Android 实现仿IOS11 控制中心进度条

iOS11已经发布了beta版,相信有iphone的小伙伴已经有一部分迫不及待的升级了.
那么这篇文章我们就用简单的自定义View实现类似iOS11的控制中心里边出现的很新颖的进度条。

先看一下目标效果图，以及最后的实现效果：

目标效果图
实现效果

自定义属性分析

---

名字	释义
progressMax	最大值
progressValue	进度
iconSrc	图标
bgColor	背景颜色
progressColor	进度颜色
progressOrientation	方向
rectRadius	圆角弧度
iconPadding	icon内间距

以上总结下来，相关属性定义代码为：

    <declare-styleable name="RectProgress">
        <attr name="progressValue" format="integer" />
        <attr name="progressMax" format="integer" />
        <attr name="bgColor" format="color" />
        <attr name="rectRadius" format="dimension" />
        <attr name="iconPadding" format="dimension" />
        <attr name="progressColor" format="color" />
        <attr name="iconSrc" format="reference" />
        <attr name="progressOrientation">
            <enum name="vertical" value="1" />
            <enum name="horizontal" value="2" />
        </attr>
    </declare-styleable>

进度条绘制

---

首先分析下进度条构成

• 背景
• 进度
• Icon

看似很简单。使用canvas.drawRoundRect()分别画出背景和进度，最后追加绘制一个bitmap即可。
但实际操作中会发现如果按照Progress 覆盖 Background的思路操作起来可行性并不高。问题出在绘制Progress时，处理圆角上边。
解决办法是使用Paint.setXfermode();（关于各个Mode详解请参照此处。)这里我们用到的是PorterDuff.Mode.SRC_ATOP
这个思路用白话文描述就是:先画一个圆角背景,然后在圆角背景的基础上画矩形的Progress.这时候因为使用了Paint.setXfermode();所以矩形的Progress只有与背景相交的部分才会显示出来.
(注：使用Paint.setXfermode();需要关闭硬件加速，否则可能会不生效：setLayerType(View.LAYER_TYPE_SOFTWARE, null);)

那么ondraw()中绘制进度代码其实就很简单了:

        //bgPaint 是背景画笔、progressPaint是进度画笔
        int canvasWidth = canvas.getWidth();
        int canvasHeight = canvas.getHeight();
        int layerId = canvas.saveLayer(0, 0, canvasWidth, canvasHeight, null, Canvas.ALL_SAVE_FLAG);
        {
            bgPaint.setColor(bgColor);
            // draw the background of progress
            canvas.drawRoundRect(bgRect, rectRadius, rectRadius, bgPaint);
            // draw progress
            canvas.drawRect(progressRect, progressPaint);
            bgPaint.setXfermode(null);
        }
        canvas.restoreToCount(layerId);

手势的处理

---

此处只分析垂直方向手势处理,水平方向同理:手势处理这块逻辑极为简单。逻辑上ACTION_DOWN与ACTION_MOVE都是一样的。需要处理的只有一点：

• 考虑到View的padding,所以首先要判断 ACTION_DOWN的时候是否是按在进度条内,如果是才做处理
  主要代码：

            //bgRect背景矩形，progressRect进度矩形
            if (event.getY() < bgRect.top) {
                //触点超出Progress顶部
                progressRect.top = bgRect.top;
            } else if (event.getY() > bgRect.bottom) {
                //触点超过Progress底部
                progressRect.top = bgRect.bottom;
            } else {
                progressRect.top = getPaddingTop() + event.getY();
            }

图标绘制

---

icon的绘制只有一行代码：
canvas.drawBitmap(bitmap, srcRect, dstRect, bgPaint);
需要解释一下的是该方法的参数。

• srcRect 要绘制的Bitmap区域
• dstRect Bitmp要绘制的区域

回调

---

要注意的是每次百分比变化才做一次回调。

项目托管地址

---

https://github.com/CuiZhaoHui/IOS11RectProgress

笔者水平有限，若有错误请指正~