簡單實現帶節點的進度條

SouthernBox發表於2019-02-21

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

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

簡單實現帶節點的進度條

簡單實現帶節點的進度條

簡單實現帶節點的進度條

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

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;
    
複製程式碼

最後看一下效果。

簡單實現帶節點的進度條

這樣就已經實現了一個看上去有點複雜的進度條了，妥妥的。

原始碼地址

相關文章