2016-09-29 FlowLeaf 鴻洋 鴻洋 鴻洋

微信號 hongyangAndroid

功能介紹 你好，歡迎關(guān)注鴻洋的公眾號，每天為您推送高質(zhì)量文章，讓你每天都能漲知識。點(diǎn)擊歷史消息，查看所有已推送的文章，喜歡可以置頂本公眾號。此外，本公眾號支持投稿，如果你有原創(chuàng)的文章，希望通過本公眾號發(fā)布，歡迎投稿。

本文由FlowLeaf授權(quán)本公眾號發(fā)布。

FlowLeaf的博客地址：

http://blog.csdn.net/u011102153

---

1

介紹

? ?

一個(gè)橫向進(jìn)度條

下載完成區(qū)域有一個(gè)滑塊不斷從左往右滑動（最開始就是被這個(gè)吸引的，就想著這個(gè)怎么實(shí)現(xiàn)的）

進(jìn)度條中間顯示當(dāng)前進(jìn)度，值得注意的是，進(jìn)度條文本包含在下載區(qū)域中的部分顯示為白色

點(diǎn)擊暫停，進(jìn)度條顏色改變，進(jìn)度文本改變

4

分析

??

根據(jù)以上簡單介紹，可以抓住要實(shí)現(xiàn)的重難點(diǎn)是上面的第2、3點(diǎn)。

1.進(jìn)度條文本包含在下載區(qū)域中的部分顯示為白色怎么實(shí)現(xiàn)？

這個(gè)和歌詞變色的效果是一樣的，所以實(shí)現(xiàn)原理應(yīng)該差不多。canvas有一個(gè)save的方法，然后設(shè)置成CLIP_SAVE_FLAG標(biāo)志，這個(gè)標(biāo)志的解釋是restore the current clip when restore() is called.然后結(jié)合canvas的clip方法和restore方法就能實(shí)現(xiàn)。后文見代碼④。

2.下載完成區(qū)域有一個(gè)滑塊不斷從左往右滑動怎么實(shí)現(xiàn)？

首先想到的是畫這樣一個(gè)滑塊(其實(shí)是一張圖片)，然后不斷根據(jù)當(dāng)前進(jìn)度修改位置實(shí)現(xiàn)移動。需要注意的是這個(gè)滑塊的移動特點(diǎn)： 滑塊的右邊界開始進(jìn)入，最后左邊界消失，而且只在下載完成這個(gè)區(qū)域內(nèi)有顯示（右邊界超出下載完成右邊界部分不顯示）這讓我想到兩個(gè)圖層重疊時(shí)的顯示模式，再看看這幅圖，那么這里就可以使用SRC_ATOP模式。

3

實(shí)現(xiàn)

? ?

1.自定義屬性

2.重寫onMeasure方法，當(dāng)height設(shè)置為wrap_content時(shí)設(shè)置為默認(rèn)高度

3.重寫onDraw方法

①繪制邊框

②繪制進(jìn)度

③繪制進(jìn)度條顯示文本

④進(jìn)度條文本變色處理

最終的效果圖是：

源碼下載：

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

其實(shí)上述代碼還有很大的優(yōu)化空間，歡迎留言討論，該博主也專門針對優(yōu)化寫了一篇：

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

---

掘金是一個(gè)高質(zhì)量的技術(shù)社區(qū)，從 RxJava 到 React Native，性能優(yōu)化到優(yōu)秀開源庫，讓你不錯(cuò)過 Android 開發(fā)的每一個(gè)技術(shù)干貨。長按圖片二維碼識別或者各大應(yīng)用市場搜索「掘金」，技術(shù)干貨盡在掌握中。

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

歡迎長按下圖->識別圖中二維碼或者掃一掃關(guān)注我的公眾號：

閱讀原文

總結(jié)

以上是生活随笔為你收集整理的炫酷进度条：Android 仿应用宝下载进度条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。