先上gif效果圖:

上圖中,藍(lán)色的進(jìn)度條為自定義進(jìn)度條
注意?。?!源碼在文末
背景
要實現(xiàn)一個進(jìn)度條,大部分情況下,都是需要進(jìn)行自定義的。因為原生就算你自定義了背景圖片,但是一旦進(jìn)度條的高度,超過了一定的范圍,且進(jìn)度在1%左右的時候,就會看到明顯的“卡邊”情況。
就是進(jìn)度條如果是圓角的背景,但是如果是小進(jìn)度的時候,進(jìn)度會顯示出一個長方形。因此為了一了百了,則有了這篇文章,自定義進(jìn)度條!
思路
要實現(xiàn)自定義進(jìn)度條,首先,是需要有canvas的基礎(chǔ)知識的。如果沒有,則需要自行學(xué)習(xí)。
伸手黨看到這里,可以關(guān)閉網(wǎng)頁了。
首先,如開頭的圖片所示,進(jìn)度條,有以下要素:
(1)區(qū)分為當(dāng)前進(jìn)度顏色,和背景進(jìn)度顏色
(2)有圓角
(3)點擊后,有擴散的水波紋效果,然后從百分之一百回到當(dāng)前進(jìn)度
大概要點就是這些。下面開始定義要素。
(1)有一個狀態(tài)變量,是控制進(jìn)度條的狀態(tài)的,例如說默認(rèn)狀態(tài),選中狀態(tài),非選中狀態(tài)
(2)控制顏色的變量
(3)進(jìn)度條的值
(4)點擊時候的參數(shù)
再者,我們需要思考一下問題:
(1)默認(rèn)情況,是沒有進(jìn)度的,所以只需要繪制一個默認(rèn)的背景即可
(2)非選中狀態(tài),進(jìn)度條是從0開始到目標(biāo)值的,中間有個過渡的動畫
(3)選中狀態(tài),先觸發(fā)水波紋動畫,當(dāng)動畫到達(dá)最長邊的時候,則會有消失,然后播放進(jìn)度條動畫
實現(xiàn)
(1)水波紋
直接使用canvas中的drawCircle方法繪制即可,通過ValueAnimator進(jìn)行半徑的變化,然后即可實現(xiàn)
(2)普通從0-xx的進(jìn)度條動畫,也是通過ValueAnimator進(jìn)行控制即可
(3)基于(2)的基礎(chǔ)上,如果進(jìn)度條從100-xx也是通過ValueAnimator變化即可。
整體繪制實現(xiàn),都需要放到onDraw方法中,通過標(biāo)識(Boolean)的控制,控制繪制的方法,繪制不同的效果,onDraw核心代碼如下:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (!hadInit()) {
return;
}
if (getStatus() == TYPE_STATUS_DEFAULT) {
drawBgInfo(canvas);
return;
}
if (!needDraw()) {
return;
}
if (!needAnim()) {
drawChangeBg(canvas);
//不需要動畫,直接畫進(jìn)度條
drawProgressInfo(canvas);
return;
}
//繪制順序:
//非選中模式,進(jìn)度條慢慢疊加,直到進(jìn)度值
//選中模式,水波紋填充后,進(jìn)度條漸漸顯示,數(shù)值從100退回到目標(biāo)值
if (mDrawingRipple) {
//繪制水波紋
drawRippleInfo(canvas);
}
if (mDrawingCustomBg) {
//繪制修改后的背景
drawChangeBg(canvas);
}
if (mDrawingProgress) {
//繪制進(jìn)度條
drawProgressInfo(canvas);
}
}
注意
(1)對于動畫的實現(xiàn),用到了ValueAnimator,注意釋放的時機
(2)對于recyclerview中使用該進(jìn)度條控件,請注意復(fù)用問題
(3)對于進(jìn)度條的值換算,通過實際px值換算即可
(4)對于圓角,在繪制的過程中,你會發(fā)現(xiàn)低進(jìn)度的情況(1%)圓角失效,
同時,網(wǎng)上大部分自定義進(jìn)度條也是的,這里就不一一放出他們的博客地址了。實現(xiàn)方法有很多,我這里是直接使用clipPath后再繪制。
就這么多,鏈接在下面
that's all----------------------------------------------------
類名:
SelectionProgressHorizontalBarView
SelectionProgressVerticalBarView