自定义View之炫丽的进度条

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