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
网友评论