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

Rance935
764 阅读2分钟
原文链接： mp.weixin.qq.com

点击上方蓝字“AndroidParks”一起学习、扯淡

文章来源

http://www.jianshu.com/p/735e92cc8e55

源码地址

https://github.com/CuiZhaoHui/IOS11RectProgress

效果预览 自定义属性介绍

进度条的绘制

首先分析下进度条构成

  • 背景

  • 进度

  • Icon

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

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

手势的处理

点击下方空白区域查看答案

▼

「手机上看不见我」  

可插入其他样式内容，高度固定180px，可通过修改代码的方式调整区域高度！

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

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

图像的绘制

点击下方空白区域查看答案

▼

「手机上看不见我」  

可插入其他样式内容，高度固定180px，可通过修改代码的方式调整区域高度！

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

  • srcRect 要绘制的Bitmap区域

  • dstRect Bitmp要绘制的区域

精选文章推荐

点击下方空白区域查看答案

▼

「手机上看不见我」  

可插入其他样式内容，高度固定180px，可通过修改代码的方式调整区域高度！

  1. 如何高效利用github提升自己

  2. Android：修图技术之瘦脸效果的实现(drawBitmapMesh)

AndroidParks 关注AndroidParks，和Rance935一起学习、扯淡
avatar
文章
阅读
粉丝