自定義View——圓環進度條

效果展示

動畫效果

View實現

1.底層圓環是灰色背景
2.上層圓環是紅色背景
3.使用動畫畫一條弧線

View

/**
 * 圓環進度條
 */
public class RoundProgressBar extends View {
    //繪製矩形區域
    private RectF rectF;
    //起始角度
    private float startAngle;
    //掃過角度
    private float sweepAngle;
    //畫筆
    private Paint paint;
    //默認控件大小
    private int defoutSize;
    //默認線條寬度
    private int defoutLine;
    private int strokeWidth;

    private PointF pointF = new PointF();


    public RoundProgressBar(Context context) {
        super(context);
        initData();
    }

    public RoundProgressBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        initData();
    }

    /**
     * 參數初始化
     */
    private void initData() {
        startAngle = 0;
        sweepAngle = 0;
        defoutSize = 400;
        defoutLine = 20;
        strokeWidth = 20;

        rectF = new RectF();

        //抗鋸齒畫筆
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.GRAY);
        paint.setStrokeWidth(defoutLine);
        //筆帽樣式
        paint.setStrokeCap(Paint.Cap.ROUND);
        paint.setStyle(Paint.Style.STROKE);
    }

    /**
     * xml -----> 提供可繪製位置
     *
     * @param widthMeasureSpec  寬
     * @param heightMeasureSpec 高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        setMeasuredDimension(defoutSize, defoutSize);
    }

    /**
     * 當大小時改變回調
     *
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        pointF.x = w >> 1;
        pointF.y = h >> 1;

        rectF.top = strokeWidth >> 1;
        rectF.bottom = h - (strokeWidth >> 1);
        rectF.left = strokeWidth >> 1;
        rectF.right = w - (strokeWidth >> 1);

    }

    /**
     * 繪製
     *
     * @param canvas
     */
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        //畫布旋轉
        paint.setColor(Color.GRAY);
        canvas.rotate(135, pointF.x, pointF.y);
        //繪製圓環
        canvas.drawArc(rectF, startAngle, 270, false, paint);

        paint.setColor(Color.RED);
        canvas.drawArc(rectF, startAngle, sweepAngle, false, paint);

    }

    public void setProgress(float index) {
   	//防止數值越界
        if (index > 1 || index < 0) {
            return;
        }
        ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, index);
        valueAnimator.setDuration(3000);
        valueAnimator.setInterpolator(new DecelerateInterpolator());
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                sweepAngle = (float) animation.getAnimatedValue() * 270;
                //重寫繪製
                invalidate();
            }
        });
        valueAnimator.start();

    }
}

最後在Activity中使用setProgress方法賦值進度條的進度來實現效果

progressView.setProgress(0.8f);