簡單實現帶節點的進度條

2019-11-09 18:21:24

字體：大中小

來源：轉載

供稿：網友

帶節點進度條的實現方法不止一個，但是如果要實現圖中這種效果的，初步看好像還不簡單。進度條的形狀不規則、背景是漸變顏色、節點上面還有個勾。這里提供一個很簡單的思路，簡單的都不好意思說了……

為了實現這個效果，我們需要三張圖片，就是下面這三張。

看到這里可能你已經知道要怎么做了，三張圖片分別是：

1.進度條填充部分的背景，帶漸變顏色帶節點小勾 2.進度條未填充部分的背景，純色 3.進度條外框背景，是一張鏤空圖，顏色和進度條外的顏色一致

注意這三張圖片的大小必須一致，將這三張圖片疊加到一起就是我們的進度條了。至于進度條的動畫，我們只要對第二層的那張圖片實現一個屬性動畫就可以了：

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;}

至于如何控制到哪一個節點，這個可以自己拿尺子量一下，多試幾次，上面代碼中的stage就是這個作用，它從這里取值：

//不同階段進度條所在位置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;

最后看一下效果。