android 进度条图标方形_Android 实现仿IOS11 控制中心进度条

iOS11已经发布了beta版,相信有iphone的小伙伴已经有一部分迫不及待的升级了.

那么这篇文章我们就用简单的自定义View实现类似iOS11的控制中心里边出现的很新颖的进度条。

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

目标效果图

实现效果

自定义属性分析

名字

释义

progressMax

最大值

progressValue

进度

iconSrc

图标

bgColor

背景颜色

progressColor

进度颜色

progressOrientation

方向

rectRadius

圆角弧度

iconPadding

icon内间距

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

进度条绘制

首先分析下进度条构成

背景

进度

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要绘制的区域

回调

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

项目托管地址

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