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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值