Android 环形进度条控件（RoundProgressView）简单自定义的一次记录

项目中用的一个环形进度条控件，简单记录下实现过程

效果图

中间的进度数据用了一个Textview，直接在onDraw里边画出来也是一种实现方式，本人比较懒，所以……

1.自定义需要的参数（res\values\attrs.xml）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundProgressView">
        <attr name="round_width" format="dimension" />
        <attr name="round_color" format="color" />
        <attr name="round_progress_color" format="color" />
        <attr name="round_max_progress" format="integer" />
    </declare-styleable>
</resources>

format的取值类如下所示：

boolean 表示attr取值为true或者false
color 表示attr取值是颜色类型，例如#ff3344,或者是一个指向color的资源id，例如R.color.colorAccent.
dimension 表示 attr 取值是尺寸类型，例如例如取值16sp、16dp，也可以是一个指向dimen的资源id，例如- - R.dimen.dp_16
float 表示attr取值是整形或者浮点型
fraction 表示 attr取值是百分数类型，只能以%结尾，例如30%
integer 表示attr取值是整型
string 表示attr取值是String类型，或者一个指向String的资源id，例如R.string.testString
reference 表示attr取值只能是一个指向资源的id。
enum 表示attr取值只能是枚举类型。
flag 表示attr取值是flag类型。

2.代码实现

package cn.kele.module_base.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.blankj.utilcode.util.SizeUtils;

import cn.kele.module_base.R;

/**
 * Des: 自定义圆形进度显示
 * Created by kele on 2020/9/10.
 * E-mail:984127585@qq.com
 */
public class RoundProgressView extends View {

    private int centerX;//圆环的中心X坐标
    private int centerY;//圆环的中心Y坐标
    private int radius;//圆环的半径
    private Paint paint;//圆环的画笔
    private Paint progressPaint;//圆环中进度的画笔
    private int progress;//当前进度
    private int maxProgress = 100;//最大进度，默认为100
    private float roundWidth;//进度圆环的宽度
    private int roundColor;//进度圆环的颜色
    private int roundProgressColor;//进度条的颜色

    public RoundProgressView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initAttrs(context, attrs);
        init();
    }

    public RoundProgressView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

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

    /**
     * 初始化自定义参数
     *
     * @param context
     * @param attrs
     */
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressView);
        roundWidth = ta.getDimension(R.styleable.RoundProgressView_round_width, 2);
        roundColor = ta.getColor(R.styleable.RoundProgressView_round_color, context.getResources().getColor(R.color.color_989FC3));
        roundProgressColor = ta.getColor(R.styleable.RoundProgressView_round_progress_color, context.getResources().getColor(R.color.color_3881EA));
        maxProgress = ta.getInteger(R.styleable.RoundProgressView_round_max_progress, maxProgress);
        ta.recycle();
    }

    /**
     * 创建RoundProgressView时通过该方法初始化
     */
    private void init() {
        paint = new Paint();
        paint.setStrokeWidth(roundWidth);
        paint.setStyle(Paint.Style.STROKE);
        paint.setAntiAlias(true);
        paint.setColor(roundColor);//灰色的圆环

        progressPaint = new Paint();
        progressPaint.setAntiAlias(true);
        progressPaint.setColor(roundProgressColor);//蓝色的进度
        progressPaint.setStrokeWidth(roundWidth);
        progressPaint.setStyle(Paint.Style.STROKE);
        progressPaint.setStrokeCap(Paint.Cap.ROUND);//让画笔画出的线条是圆的
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        //计算圆环的圆心坐标
        centerX = getMeasuredWidth() / 2;
        centerY = getMeasuredHeight() / 2;
        //计算圆环的半径,减去进度条圆环宽度的一半
        radius = (centerX > centerY ? centerY : centerX) - SizeUtils.dp2px(roundWidth / 2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画出灰色的圆环
        canvas.drawCircle(centerX, centerY, radius, paint);
        //构造圆环的外围矩形
        RectF rectF = new RectF(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
        //计算显示的进度
        int progressAngle = (progress * 360) / maxProgress;
        //画出进度，注意这里的270表示从圆环的最顶部开始画，如果270替换为0，则是从圆环的右端开始画
        canvas.drawArc(rectF, 270, progressAngle, false, progressPaint);
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        postInvalidate();
    }

    public int getMaxProgress() {
        return maxProgress;
    }

    public void setMaxProgress(int maxProgress) {
        this.maxProgress = maxProgress;
    }
}

3.具体使用

<cn.kele.module_base.widget.RoundProgressView
                android:id="@+id/pbv"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_margin="@dimen/dp_1"
                app:round_color="@color/color_66989FC3"
                app:round_max_progress="100"
                app:round_progress_color="@color/color_3881EA"
                app:round_width="@dimen/dp_2" />

Android 环形进度条控件（RoundProgressView）简单自定义的一次记录

项目中用的一个环形进度条控件，简单记录下实现过程

参考链接：