今天找到一个比较不错的进度有关的素材,随即写了一个自定义控件HeartProgress,思路:先把图片绘制进去,然后根据进度值,截取图片自下而上的范围,进行裁剪,裁剪后的图片进行图片变色,然后重新绘制到View,公开方法setProgress (int progress)控制进度显示。(也可以换一种实现方式,设置xFermode..)下面是效果图:
自定义控件的基本使用都差不多,这里就就简单明一下,先获取心形背景图片的绝对宽高,进行onMeasure
mDrawable=getBackground();
mWidth=mDrawable.getIntrinsicWidth();
mHeight=mDrawable.getIntrinsicHeight();
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// TODO Auto-generated method stub
setMeasuredDimension(mWidth, mHeight);
}
根据当前进度mProgress 进行计算,得出图片自下而上的矩形裁剪区域(如果要弧形旋转效果,裁剪方式需要改变,原理相同,这里不作说明 了)
public void caculater(){
mRectHeight=mHeight*mProgress/100;//这里必须先乘以mProgress再除以100
minX=0;
minY=mHeight-mRectHeight;
maxX=mWidth;
}
然后调用Bitmap的图片裁剪方法得到裁剪区域图片
Bitmap retBitmap = Bitmap.createBitmap(bgBitmap, minX, minY, maxX, mRectHeight, matrix, true);
给裁剪图片设置滤色,再重新绘制到View里面
canvas.drawBitmap(retBitmap, 0, mHeight-mRectHeight, mPaint);
ColorMatrix mColorMatrix = new ColorMatrix();
mColorMatrix.set(getArrayFilter());
mPaint.setColorFilter(new ColorMatrixColorFilter(mColorMatrix));
canvas.drawBitmap(retBitmap, 0, mHeight-mRectHeight, mPaint);
对外公开setProgress方法
public void setProgress(final int progress){
new Thread(){
public void run() {
try {
for (int i = 0; i <= progress; i++) {
if(i>mProgress){
mProgress=i;
postInvalidate();
Thread.sleep(100);
}else if(i<mProgress){
mProgress--;
postInvalidate();
Thread.sleep(100);
}
}
Thread.interrupted();
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
};
}.start();
}
private float[] getArrayFilter() {
float []arr=new float[20];
for (int i = 0; i < arr.length; i++) {
if(i==0){
arr[i]=2.0f;
}else if(i==6||i==12||i==18){
arr[i]=1.0f;
}else{
arr[i]=0.0f;
}
}
return arr;
}
这里把红色列值放大,呈现出的颜色偏红,这个就是所谓的滤色,通过颜色矩阵还可以实现颜色的饱和度、对比度、色变等图片处理效果,系统相机拍照选择模式也就是这个原理。
参考资料:http://www.cnblogs.com/menlsh/archive/2013/02/03/2890888.html
Demo地址:http://download.csdn.net/detail/analyzesystem/8919285