【Android】自定義ProgressView-進度條動畫

LuLiangDev發表於2018-08-14
AndroidView動畫

前兩天公司需求，實現進度條動畫，本來想在網上找找有沒有類似的拿來用，想偷懶都不行。就簡單自定義View進度條動畫。實現很簡單。

Github專案地址

動畫預覽

  • 使用在公司專案效果預覽

xz-progressview

  • 簡潔效果預覽

progressview

程式碼實現

動畫效果很簡單，使用ObjectAnimator屬性動畫來實現，這個官方提供一些Api使用，具體可以檢視官方文件。如果以後需要實現更復雜的動畫，可以以此為例進行自定義。這裡我會對基礎自定義View動畫實現簡單的說明，具體說明在程式碼註釋。如果你們需要的效果跟我的類似，你可以直接把ProgressView檔案拷貝下來使用，需要的屬性不夠用的話可以直接在裡面修改新增。

看程式碼才是王道

  • 自定義View-ProgressView程式碼（只展示主要程式碼）
public class ProgressView extends View {
    
    private void initView() {
        //初始化畫筆
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        animator = new ObjectAnimator();
        //設定動畫屬性
        animator.setPropertyName("progress");
        //設定執行動畫的View
        animator.setTarget(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫筆屬性
        paint.setAntiAlias(true);                  //設定畫筆為無鋸齒
        paint.setColor(color);                    //設定畫筆顏色
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        //圓角形狀設定到畫布
        RectF rectF = new RectF(0, 0, progress, getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
    }

    public void startAnim() {
        if (animator.isRunning()) animator.end();
        //設定進度陣列，  0 - max
        animator.setFloatValues(0, progress);
        //設定動畫時間
        animator.setDuration(duration);
        //動畫開啟
        animator.start();
    }

}
複製程式碼
  • xml新增程式碼
 <cn.luliangdev.devprogressview.ProgressView
        android:id="@+id/progressview"
        android:layout_width="wrap_content"
        android:layout_height="30dp"/>
複製程式碼
  • 程式碼使用程式碼
//設定顏色
progressview.setColor(getResources().getColor(R.color.colorAccent));
//設定圓角   預設無圓角
progressview.setRadius(6);
//設定進度條長度    預設px
progressview.setProgress(500);
//設定動畫時間
progressview.setDuration(500);
//開啟動畫
progressview.startAnim();

//動畫監聽
progressview.getAnimator().addListener(new Animator.AnimatorListener() {
    @Override
    public void onAnimationStart(Animator animation) {
        //動畫開始
    }

    @Override
    public void onAnimationEnd(Animator animation) {
       //動畫結束
    }

    @Override
    public void onAnimationCancel(Animator animation) {
        //動畫取消
    }

    @Override
    public void onAnimationRepeat(Animator animation) {
        //動畫重複
    }
});
複製程式碼

意見反饋

如果遇到問題或者好的建議，請反饋到：issue、927195249@qq.com 或者LiangLuDev@gmail.com

如果覺得對你有用的話，贊一下吧!

相關文章