Android项目实战（六十七）：自定义圆形进度条

圆形进度条

支持设置：

1、圆环背景颜色

2、圆管背景宽度

3、进度圆环颜色

4、进度圆环宽度

5、圆环进度

6、开始角度

7、动画执行时间

自定义类：

package com.example.mainactivty;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

import androidx.annotation.Nullable;

public class ProgressBarView extends View {

    private Paint mPaint; // 画笔
    private CircleBarAnim anim; // 动画
    private float progressSweepAngle;//进度条圆弧扫过的角度

    // 以下是自定义参数
    private int mAnnulusWidth; // 圆环宽度
    private int mProgressWidth; // 进度条宽度
    private int mAnnulusColor; // 圆环颜色
    private int mLoadColor; // 加载进度圆弧扫过的颜色
    private int mProgress = 0; // 当前进度
    private int maxProgress = 100; // 最大进度，默认100
    public int startAngle = -90; // 开始圆点角度

    public ProgressBarView(Context context) {
        this(context, null);
    }

    public ProgressBarView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ProgressBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 获取自定义属性
        TypedArray value = context.getTheme().obtainStyledAttributes(attrs, R.styleable.AnnulusCustomizeView, defStyleAttr, 0);
        int indexCount = value.getIndexCount();
        for (int i = 0; i < indexCount; i++) {
            int parm = value.getIndex(i);
            switch (parm) {
                case R.styleable.AnnulusCustomizeView_startAngle:
                    startAngle = value.getInt(parm, 90);
                    break;
                case R.styleable.AnnulusCustomizeView_annulusWidth:
                    mAnnulusWidth = value.getDimensionPixelSize(parm,
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                    10,
                                    getResources().getDisplayMetrics()));
                    break;
                case R.styleable.AnnulusCustomizeView_progressWidth:
                    mProgressWidth = value.getDimensionPixelSize(parm,
                            (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                                    10,
                                    getResources().getDisplayMetrics()));
                    break;
                case R.styleable.AnnulusCustomizeView_annulusColor:
                    mAnnulusColor = value.getColor(parm, Color.BLACK);
                    break;
                case R.styleable.AnnulusCustomizeView_loadColor:
                    mLoadColor = value.getColor(parm, Color.BLACK);
                    break;
                case R.styleable.AnnulusCustomizeView_progress:
                    mProgress = value.getInt(parm, 10);
                    break;
            }
        }
        value.recycle();
        // 动画
        anim=new CircleBarAnim();
        mPaint = new Paint();
    }


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

        // TODO:绘制圆环
        // 获取圆形坐标
        int centre = getWidth() / 2;
        // 获取半径
        int radius = centre - mAnnulusWidth / 2-10;
        // 取消锯齿
        mPaint.setAntiAlias(true);
        // 设置画笔宽度
        mPaint.setStrokeWidth(mAnnulusWidth);
        // 设置空心
        mPaint.setStyle(Paint.Style.STROKE);
        // 设置画笔颜色
        mPaint.setColor(mAnnulusColor);
        canvas.drawCircle(centre, centre, radius, mPaint);

        // TODO:画圆弧，进度
        // 获取进度条中心点
        // 进度条半径
        int progressRadius = centre - mAnnulusWidth /2-10;
        // 设置进度颜色
        mPaint.setColor(mLoadColor);
        mPaint.setStrokeWidth(mProgressWidth);
        mPaint.setStyle(Paint.Style.STROKE);
        // 用于定义的圆弧的形状和大小的界限
        RectF ovalStroke = new RectF(centre - progressRadius, centre - progressRadius,
                centre + progressRadius, centre + progressRadius);
        canvas.drawArc(ovalStroke, startAngle, progressSweepAngle, false, mPaint);
    }

    /**
     * 设置进度
     * @param progress 进度值
     * @param time 动画时间范围
     */
    public synchronized void setProgress(final int progress,int time) {
        anim.setDuration(time);
        this.startAnimation(anim);
        this.mProgress = progress;
    }

    // 动画
    public class CircleBarAnim extends Animation {
        public CircleBarAnim() {

        }

        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            super.applyTransformation(interpolatedTime, t);
            progressSweepAngle=interpolatedTime*(mProgress * 360 / maxProgress);//这里计算进度条的比例

            postInvalidate();
        }
    }

    public synchronized int getmProgress() {
        return mProgress;
    }
}

属性值：

放在main->res->values->attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">

    <attr name="annulusColor" format="color"/>//圆环颜色
    <attr name="loadColor" format="color"/>//环形进度条加载颜色
    <attr name="annulusWidth" format="dimension"/>//圆环宽度
    <attr name="progressWidth" format="dimension"/>//圆环宽度
    <attr name="startAngle" format="integer"/>//开始角度
    <attr name="progress" format="integer"/>//圆环进度
    <declare-styleable name="AnnulusCustomizeView">
        <attr name="annulusColor"/>
        <attr name="loadColor"/>
        <attr name="annulusWidth"/>
        <attr name="progressWidth"/>
        <attr name="startAngle"/>
        <attr name="progress"/>
    </declare-styleable>
</resources>

xml使用:

 <com.example.mainactivty.ProgressBarView
        android:id="@+id/progressBar"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:padding="20dp"
        app:annulusColor="#F1EEE7"
        android:paddingVertical="6dp"
        android:paddingHorizontal="6dp"
        app:annulusWidth="4dp"
        app:loadColor="#BE9B79"
        app:progress="0"
        app:progressWidth="6dp"
        app:startAngle="-90"
        >
    </com.example.mainactivty.ProgressBarView>

progressBarView.setProgress(70,2000);

源码参考:

https://gitee.com/xqxacm/circleProgress