Android自定义View之炫丽的进度条
好久没有写Blog了，昨天意外看到自己无意中写的一篇文章，访问量都有1k+，突然之间觉得写博客，分享知识是一件多么幸福的事情！今天我给大家分享一个自定义view来绘制一个项目中经常用的炫丽立体效果的进度条.虽然不怎么有难度，但是项目中经常用到，希望能帮助大家项目中的一些问题，帮到大家。 
代码下载地址：http://download.csdn.net/detail/zgkxzx/9762403
实现原理 主要是通过Paint的setXfermode(Xfermode xfermode) 图像混合模式，关于paint的混合模式的知识，小编就不在这里科普了，自己到百度上面谷歌一下就知道了。下面我们找重点的地方讲解。如下，多种混合模式的效果图： 
这里，我们用的的模式是SRC_IN,从效果图中，我们很清晰看出，当SRC是蓝色正方形图片，DST为橙色圆形图片时，SRC_IN效果，即为当SRC与DST重叠发生，交集部分为两图交集区域，并展现出SRC交集区域。这里，我们项目中SRC为 
DST资源为通过画布画的扇形图像，由于图片源SRC是一张切图，我们不容易控制进度，那么我们通过控制扇形的区域，来实现整体画布的进度条的控制。如下图，没有找到比较好的作图工具，自己用Galaxy Note机手绘图形进行分析（画的不好，不要吐槽~~）。 
当DST扇形（红色区域）在画布上扫过，与SRC的交集部分，即画布上面最终展现的区域（紫色区域），这里的扇形起始边是-270度。我们可以根据实际需要进行调整。
好了，我们不多说了，直接上源码分析。
代码实现
自定义View的步骤一般是onMeasure,onLayout,onDraw,这里我们只需要测量和绘制就行了。
第一步：初始化参数
//背景图片和进度条图片 PRivate Bitmap bgBmp; private Bitmap bgProcess; private PorterDuffXfermode mMode; private Paint mXferPaint; private RectF mOval; private Paint mTextPaint; //百分比 private int mPercent; //边长 private int sideLength; //缩放比例 private float scale = 1.0f; private void init() { bgBmp = BitmapFactory.decodeResource(getResources(), R.mipmap.ring_bg); if (processImg != null) { bgProcess = ((BitmapDrawable) processImg).getBitmap(); } else bgProcess = BitmapFactory.decodeResource(getResources(), R.mipmap.ring_bg_1); mMode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN); mXferPaint = new Paint(); mXferPaint.setColor(Color.GREEN); mXferPaint.setXfermode(mMode); mXferPaint.setAntiAlias(true); mOval = new RectF(); mOval.left = 0; mOval.top = 0; mPercent = 0; mTextPaint = new Paint(); mTextPaint.setColor(textColor); mTextPaint.setTextSize(textSize); mTextPaint.setAntiAlias(true); Typeface font = Typeface.createFromAsset(context.getAssets(), textFont != null ? textFont : DEFAULR_FONT); mTextPaint.setTypeface(font); }在初始化中，主要是对需要绘画的几个画笔进行了初始化。这里比较重要的是我们用的的PorterDuffXfermode混合图像模式，在这里采用了SRC_IN模式。画笔画出的扇形和原始进度条图片发生交集后，显示原始进度条图片的部分。在设计进度条之前，小编考虑到可扩展性，本来是准备采用DST_IN模式，这样进度条显示部分为交集的扇形部分，这样进度条的颜色通过xml倒是很方便配置，但是进度条通过drawArc方法画出来的是屏幕效果图，效果没有切片能展现立体的效果。
第二步：onMeasure方法实现测量
int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int width; int height; int bgWidth = bgBmp.getWidth(); int bgHight = bgBmp.getHeight(); if (widthMode == MeasureSpec.EXACTLY) { width = widthSize; } else { width = bgWidth; } if (heightMode == MeasureSpec.EXACTLY) { height = heightSize; } else { height = bgHight; } //得到边长，这里默认进度条为正方形的控件 sideLength = Math.min(width, height); //计算比例缩放系数 scale = (float) sideLength / bgWidth; setMeasuredDimension(sideLength, sideLength);在测量部分，如果采用包裹方式，控件的大小为原切片背景大大小；如果EXACTLY方式，那么原切片货更加精确的长宽进行比例缩放。
第三步：关键部分onDraw方法的实现
//矩阵运算 主要是根据xml的设置对原切片进行比例缩放 Matrix matrix = new Matrix(); matrix.postScale(scale, scale); mXferPaint.setXfermode(null); canvas.drawBitmap(bgBmp, matrix, mXferPaint); //将绘制操作保存到新的图层（离屏缓存） int saveCount = canvas.saveLayer(0, 0, sideLength, sideLength, null, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG); mOval.left = 0; mOval.top = 0; mOval.right = sideLength; mOval.bottom = sideLength; mXferPaint.setXfermode(null); //绘制扇形区域，关于-235,290这个角度，根据实际切片的角度填写，找美工妹子要就行了~~~ canvas.drawArc(mOval, -235, 290 * mPercent / MAX_PROCESS, true, mXferPaint); mXferPaint.setXfermode(mMode); canvas.drawBitmap(bgProcess, matrix, mXferPaint); //绘制进度字 String text = mPercent + ""; canvas.drawText(text, 0, text.length(), sideLength / 2 - ViewUtil.getTextWidth(mTextPaint, text) / 2, sideLength / 2 + ViewUtil.getTextHeight(mTextPaint, text) / 2, mTextPaint); canvas.restoreToCount(saveCount);至此，代码部分也说完了，此自定义view并不怎么复杂，但是工程中经常用到，希望能帮到大家，一起学习进步… 本来是准备代码在Github和csdn各上传一份便于大家参考，可惜最近Github连接不上去了。 代码下载地址：http://download.csdn.net/detail/zgkxzx/9762403
