帶節(jié)點(diǎn)進(jìn)度條的實(shí)現(xiàn)方法不止一個(gè)，但是如果要實(shí)現(xiàn)圖中這種效果的，初步看好像還不簡(jiǎn)單。進(jìn)度條的形狀不規(guī)則、背景是漸變顏色、節(jié)點(diǎn)上面還有個(gè)勾。這里提供一個(gè)很簡(jiǎn)單的思路，簡(jiǎn)單的都不好意思說(shuō)了......
為了實(shí)現(xiàn)這個(gè)效果，我們需要三張圖片，就是下面這三張。
看到這里可能你已經(jīng)知道要怎么做了，三張圖片分別是：
1.進(jìn)度條填充部分的背景，帶漸變顏色帶節(jié)點(diǎn)小勾
2.進(jìn)度條未填充部分的背景，純色
3.進(jìn)度條外框背景，是一張鏤空?qǐng)D，顏色和進(jìn)度條外的顏色一致
注意這三張圖片的大小必須一致，將這三張圖片疊加到一起就是我們的進(jìn)度條了。至于進(jìn)度條的動(dòng)畫(huà)，我們只要對(duì)第二層的那張圖片實(shí)現(xiàn)一個(gè)屬性動(dòng)畫(huà)就可以了：
public void setProgress(float stage) {
int progressWidth = ivProgress.getWidth();
ObjectAnimator animator = ObjectAnimator.ofFloat(ivProgress, "translationX", stage * progressWidth);
animator.setDuration((int) (Math.abs(stage - currentStage) * 1000));
animator.start();
currentStage = stage;
}
至于如何控制到哪一個(gè)節(jié)點(diǎn)，這個(gè)可以自己拿尺子量一下，多試幾次，上面代碼中的 stage 就是這個(gè)作用，它從這里取值：
//不同階段進(jìn)度條所在位置
public static final float STAGE0 = 0f;
public static final float STAGE1 = 0.046f;
public static final float STAGE2 = 0.285f;
public static final float STAGE3 = 0.523f;
public static final float STAGE4 = 0.761f;
public static final float STAGE5 = 1f;
最后看一下效果。
這樣就已經(jīng)實(shí)現(xiàn)了一個(gè)看上去有點(diǎn)復(fù)雜的進(jìn)度條了，妥妥的。
