本文由FlowLeaf授权本公众号发布。

FlowLeaf的博客地址：

http://blog.csdn.net/u011102153

---

1

介绍

   

1. 一个横向进度条

2. 下载完成区域有一个滑块不断从左往右滑动（最开始就是被这个吸引的，就想着这个怎么实现的）

3. 进度条中间显示当前进度，值得注意的是，进度条文本包含在下载区域中的部分显示为白色

4. 点击暂停，进度条颜色改变，进度文本改变

4

分析

  

根据以上简单介绍，可以抓住要实现的重难点是上面的第2、3点。

1.进度条文本包含在下载区域中的部分显示为白色怎么实现？

这个和歌词变色的效果是一样的，所以实现原理应该差不多。canvas有一个save的方法，然后设置成CLIP_SAVE_FLAG标志，这个标志的解释是restore the current clip when restore() is called.然后结合canvas的clip方法和restore方法就能实现。后文见代码④。

2.下载完成区域有一个滑块不断从左往右滑动怎么实现？

首先想到的是画这样一个滑块(其实是一张图片)，然后不断根据当前进度修改位置实现移动。需要注意的是这个滑块的移动特点： 滑块的右边界开始进入，最后左边界消失，而且只在下载完成这个区域内有显示（右边界超出下载完成右边界部分不显示）这让我想到两个图层重叠时的显示模式，再看看这幅图，那么这里就可以使用SRC_ATOP模式。

3

实现

   

1.自定义属性

2.重写onMeasure方法，当height设置为wrap_content时设置为默认高度

3.重写onDraw方法

①绘制边框

②绘制进度

③绘制进度条显示文本

④进度条文本变色处理

最终的效果图是：

源码下载：

• https://github.com/LineChen/FlickerProgressBar

其实上述代码还有很大的优化空间，欢迎留言讨论，该博主也专门针对优化写了一篇：

http://blog.csdn.net/u011102153/article/details/52583313

---

掘金是一个高质量的技术社区，从 RxJava 到 React Native，性能优化到优秀开源库，让你不错过 Android 开发的每一个技术干货。长按图片二维码识别或者各大应用市场搜索「掘金」，技术干货尽在掌握中。

如果你有好的文章想和大家分享，欢迎投稿，直接向我投递文章链接即可。

欢迎长按下图->识别图中二维码或者扫一扫关注我的公众号：