帶動畫的圓形進度條

1.使用

 <com.ycx.driver.utils.widget.view.ProgressArc
            android:layout_width="@dimen/width_80"
            android:layout_height="@dimen/width_80"
            android:layout_marginTop="@dimen/margin_20"
            progressArc:progressValue="3"
            progressArc:textColor="@color/color_blue"
            progressArc:textSize="16sp"
            progressArc:totalValue="7" />

2.定義屬性

<declare-styleable name="ProgressArc">
        <attr name="progressValue" format="integer" />
        <attr name="totalValue" format="integer" />
        <attr name="textValue" format="string" />
        <attr name="textSize" format="dimension" />
        <attr name="textColor" format="color" />
    </declare-styleable>

3.自定義view

public class ProgressArc extends View {
    private Paint paint; //圓環畫筆
    private Paint arcPaint; //圓弧畫筆
    private Paint textPaint; //文字畫筆
    private int roundWidth;//圓環寬度

    //    private int[] doughnutColors = new int[]{Color.parseColor("#3BB7FF"), Color.parseColor("#1B8BFF")};
    private int[] doughnutColors = new int[]{Color.parseColor("#3BB7FF"), Color.parseColor("#1B8BFF"), Color.parseColor("#3BB7FF")};

    public ProgressArc(Context context) {
        super(context);
        init(context, null);
    }

    public ProgressArc(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public ProgressArc(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {

        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ProgressArc, 0, 0);

        progressValue = a.getInt(R.styleable.ProgressArc_progressValue, 0);
        totalValue = a.getInt(R.styleable.ProgressArc_totalValue, 0);
        float textSize = a.getDimension(R.styleable.ProgressArc_textSize, 12);
        int textColor = a.getColor(R.styleable.ProgressArc_textColor, Color.BLUE);

        roundWidth = 20;
        paint = new Paint();
        paint.setColor(Color.GRAY); //設置圓環的顏色
        paint.setStyle(Paint.Style.STROKE); //設置空心
        paint.setStrokeWidth(roundWidth); //設置圓環的寬度
        paint.setAntiAlias(true);  //消除鋸齒

        arcPaint = new Paint();
        arcPaint.setStrokeCap(Paint.Cap.ROUND);
        arcPaint.setColor(Color.BLUE); //設置圓環的顏色
        arcPaint.setStyle(Paint.Style.STROKE); //設置空心
        arcPaint.setStrokeWidth(roundWidth); //設置圓環的寬度
        arcPaint.setAntiAlias(true);  //消除鋸齒

        textPaint = new Paint();
        textPaint.setColor(textColor); //設置文字的顏色
        textPaint.setStrokeWidth(3); //設置文字的畫筆的寬度
        textPaint.setTextSize(textSize);

        setProgress(progressValue, totalValue);
    }


    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = 200;
        }
        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = 200;
        }
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        SweepGradient sweepGradient = new SweepGradient(getWidth() / 2, getHeight() / 2, doughnutColors, null);
        //旋轉 不然是從0度開始漸變
        Matrix matrix = new Matrix();
        matrix.setRotate(-90, getWidth() / 2, getHeight() / 2);
        sweepGradient.setLocalMatrix(matrix);

        arcPaint.setShader(sweepGradient);
        /**
         * 畫最外層的大圓環
         */
        int centre = getWidth() / 2; //獲取圓心的x座標
        int radius = (centre - roundWidth / 2); //圓環的半徑
        canvas.drawCircle(centre, centre, radius, paint); //畫出圓環

        /**
         * 畫圓弧
         * */
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);  //用於定義的圓弧的形狀和大小的界限

//        Logger.i("draw current = " + currentArc);
        canvas.drawArc(oval, -90, currentArc, false, arcPaint);  //根據進度畫圓弧

        /**
         * 繪製文字
         */
        float textWidth = textPaint.measureText(progressValue + "/" + totalValue);
        int textHeight = (int) (Math.ceil(textPaint.getFontMetrics().descent - textPaint.getFontMetrics().ascent) + 2);
        canvas.drawText(progressValue + "/" + totalValue, getWidth() / 2 - textWidth / 2, getHeight() / 2 + textHeight / 4, textPaint);

    }

    private int progressValue = 0;
    private int totalValue = 0;

    private int currentArc;

    public void setProgress(int progressValue, int totalValue) {
        this.progressValue = progressValue;
        this.totalValue = totalValue;

        ValueAnimator animator = ValueAnimator.ofFloat(0, (float) progressValue / totalValue);
        animator.setInterpolator(new DecelerateInterpolator());
        animator.setDuration(2000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentArc = (int) (360 * (float) animation.getAnimatedValue());
//                Logger.i("current = " + currentArc);
                invalidate();
            }
        });
        animator.start();

    }