Android 开发之 HeartProgress 自定义心形进度条

今天找到一个比较不错的进度有关的素材，随即写了一个自定义控件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();
	}

整个自定义View都挺简单的值得一说的是图片滤色，Android开发中的颜色矩阵 ColorMatrix如图：5*4的矩阵，按照红、蓝、绿、透明度、偏移量排列，代码里面：

	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