【Android】圆形进度条

效果图 背景图.png

一：分析（背景、进度条、文字）

初始化需要的工具

private void init() {
        //进度圆环
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(Color.parseColor(mProgressBackGround));//笔刷颜色#3BB0E2
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(mCriWidth);//圆环宽度12
        mCirclePaint.setStrokeCap(Paint.Cap.ROUND);//笔刷圆角
        //文字描述
        mTitlePaint = new Paint();
        mTitlePaint.setAntiAlias(true);
        mTitlePaint.setTextSize(mHumTitleSize);//字体大小20
        mTitlePaint.setColor(Color.parseColor(mProgressBackGround));//字体颜色#3BB0E2
        mTitlePaint.setStyle(Paint.Style.STROKE);
        //背景图，将图片缩放到设置的宽度
        mBackgroundBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.bg_nfc_progress), mWidth, mWidth, true);
    }

二：测量画布宽高，调整圆半径、字体大小、线宽等

RxImageTool.sp2px，dp2px方法百度下都有

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        // 参考宽，处理成正方形
        setMeasuredDimension(specSize, specSize);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 控件宽、高
        mWidth = Math.min(h, w);
        //圆半径
        mRadius = mWidth / 2 - mWidth / 200 * RxImageTool.dp2px(10);
        //圆宽度
        mCriWidth = mWidth / 200 * RxImageTool.sp2px(15);
        //设置字体大小
        mTitleSize = RxImageTool.sp2px(mWidth / 10);
        //设置图片大小
        mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap, mWidth, mWidth, true);
    }

三：绘制看看

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //图片背景
        canvas.drawBitmap(mBackgroundBitmap, 0, 0, mTitlePaint);
        //画圆
        drawCircle(canvas);
        //画进度文字
        drawTemText(canvas);
    }

 //画圆弧
    private void drawCircle(Canvas canvas) {
        canvas.save();
        RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);
        //移至画布中心
        canvas.translate(mWidth / 2, mWidth / 2);
        //旋转角度，让起点从顶部开始
        canvas.rotate(-90);
        //画进度条，currentAnimationValue需根据进度条计算
        mCirclePaint.setColor(Color.parseColor(mProgressBackGround));
        canvas.drawArc(rectF, 0,currentAnimationValue, false, mCirclePaint);
        canvas.restore();
    }

    // 画标题
    private void drawTemText(Canvas canvas) {
        canvas.save();
        canvas.translate(mWidth / 2, mWidth / 2);
        mTitlePaint.setTextSize(mHumTitleSize);
        mHumTitle = mProgress + "%";
        float humValue = mTitlePaint.measureText(mHumTitle);
        mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
        canvas.drawText(mHumTitle, -humValue / 2, RxImageTool.dp2px(7), mTitlePaint);
    }

currentAnimationValue的计算方法

//计算1%进度对应的角度
mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
//根据当前进度计算需要绘制的角度
currentAnimationValue=mAngleOneHum * mProgress;

四：扩展功能

例设置进度、添加动画

//设置最大、最小、进度
    public CircleProgressView setData(int minHum, int maxHum, int progress) {
        this.mMinProgress = minHum;
        this.mMaxProgress = maxHum;
        if (progress < minHum) {
            this.mProgress = minHum;
        } else if (progress > maxHum) {
            this.mProgress = maxHum;
        } else {
            this.mProgress = progress;
        }
        mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
        return this;
    }

    //设置当前进度
    public CircleProgressView setProgress(int progress) {
        setData(mMinProgress, mMaxProgress, progress);
        currentAnimationValue=mAngleOneHum * mProgress;
        invalidate();
//        setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
        return this;
    }

    public int getProgress() {
        return mProgress;
    }

    /**
     * 为进度设置动画
     * @param last
     * @param current
     */
    private void setAnimation(float last, float current, int duration) {
        if(progressAnim !=null&& progressAnim.isRunning()){
            progressAnim.cancel();
//            isAnimation =true;
        }
        progressAnim = ValueAnimator.ofFloat(last, current);
        progressAnim.setDuration(duration);
        progressAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentAnimationValue = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        progressAnim.addListener(new Animator.AnimatorListener(){

            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
//                isAnimation =false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
//                isAnimation =false;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        progressAnim.start();
    }

完整代码

/**
 * urkay
 * 2020/5/12
 * 圆形进度条
 */
public class CircleProgressView extends View {
    //控件宽
    private int mWidth = 200;
    //半径
    private int mRadius;
    //字体宽度
    private int mTitleSize;
    // 圆环宽度
    private int mCriWidth = RxImageTool.dp2px(12);
    //文字大小
    private int mHumTitleSize = RxImageTool.sp2px(20);
    //圆笔触
    private Paint mCirclePaint;
    //当前进度笔触
    private Paint mValueCirclePaint;
    private Paint mTitlePaint;
    //圆背景色
    private String mCircleBackground = "#666666";
    //圆进度色
    private String mProgressBackGround = "#3BB0E2";
    //最小进度
    private int mMinProgress = 0;
    //最大进度
    private int mMaxProgress = 100;
    //当前进度
    private int mProgress = 50;
    //标题
    private String mHumTitle = "0%";
    //当前进度每份的角度
    private float mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
    private Bitmap mBackgroundBitmap;
    private ValueAnimator progressAnim;
    private float currentAnimationValue;

    public CircleProgressView(Context context) {
        super(context);
        init();
    }

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

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

    private void init() {
        //进度圆环
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(Color.parseColor(mCircleBackground));
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(mCriWidth);
        mCirclePaint.setStrokeCap(Paint.Cap.ROUND);//笔刷圆角
        //文字描述
        mTitlePaint = new Paint();
        mTitlePaint.setAntiAlias(true);
        mTitlePaint.setTextSize(mHumTitleSize);
        mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
        mTitlePaint.setStyle(Paint.Style.STROKE);
        //背景图
        mBackgroundBitmap = Bitmap.createScaledBitmap(BitmapFactory.decodeResource(getResources(), R.mipmap.bg_nfc_progress), mWidth, mWidth, true);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        // 参考宽，处理成正方形
        setMeasuredDimension(specSize, specSize);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        // 控件宽、高
        mWidth = Math.min(h, w);
        //圆半径
        mRadius = mWidth / 2 - mWidth / 200 * RxImageTool.dp2px(10);
        //圆宽度
        mCriWidth = mWidth / 200 * RxImageTool.sp2px(15);
        //设置字体大小
        mTitleSize = RxImageTool.sp2px(mWidth / 10);
        //设置图片大小
        mBackgroundBitmap = Bitmap.createScaledBitmap(mBackgroundBitmap, mWidth, mWidth, true);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //图片背景
        canvas.drawBitmap(mBackgroundBitmap, 0, 0, mTitlePaint);
        //画圆
        drawCircle(canvas);
        //画进度文字
        drawTemText(canvas);
    }

    //画圆弧
    private void drawCircle(Canvas canvas) {
        canvas.save();
        RectF rectF = new RectF(-mRadius, -mRadius, mRadius, mRadius);

        canvas.translate(mWidth / 2, mWidth / 2);
        canvas.rotate(-90);
        //画背景
//        mCirclePaint.setColor(Color.parseColor(mCircleBackground));
//        canvas.drawArc(rectF, 0, 361, false, mCirclePaint);
        //画前景
        mCirclePaint.setColor(Color.parseColor(mProgressBackGround));
        canvas.drawArc(rectF, 0,currentAnimationValue, false, mCirclePaint);
        canvas.restore();
    }

    // 画标题
    private void drawTemText(Canvas canvas) {
        canvas.save();
        canvas.translate(mWidth / 2, mWidth / 2);
        mTitlePaint.setTextSize(mHumTitleSize);
        mHumTitle = mProgress + "%";
        float humValue = mTitlePaint.measureText(mHumTitle);
        mTitlePaint.setColor(Color.parseColor(mProgressBackGround));
        canvas.drawText(mHumTitle, -humValue / 2, RxImageTool.dp2px(7), mTitlePaint);
    }

    //设置最大、最小、进度
    public CircleProgressView setData(int minHum, int maxHum, int progress) {
        this.mMinProgress = minHum;
        this.mMaxProgress = maxHum;
        if (progress < minHum) {
            this.mProgress = minHum;
        } else if (progress > maxHum) {
            this.mProgress = maxHum;
        } else {
            this.mProgress = progress;
        }
        mAngleOneHum = (float) 360 / (mMaxProgress - mMinProgress);
        return this;
    }

    //设置当前进度
    public CircleProgressView setProgress(int progress) {
        setData(mMinProgress, mMaxProgress, progress);
        currentAnimationValue=mAngleOneHum * mProgress;
        invalidate();
//        setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
        return this;
    }

    public int getProgress() {
        return mProgress;
    }

    /**
     * 为进度设置动画
     * @param last
     * @param current
     */
    private void setAnimation(float last, float current, int duration) {
        if(progressAnim !=null&& progressAnim.isRunning()){
            progressAnim.cancel();
//            isAnimation =true;
        }
        progressAnim = ValueAnimator.ofFloat(last, current);
        progressAnim.setDuration(duration);
        progressAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                currentAnimationValue = (float) animation.getAnimatedValue();
                invalidate();
            }
        });
        progressAnim.addListener(new Animator.AnimatorListener(){

            @Override
            public void onAnimationStart(Animator animation) {

            }

            @Override
            public void onAnimationEnd(Animator animation) {
//                isAnimation =false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {
//                isAnimation =false;
            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        progressAnim.start();
    }

    @Override
    protected void onAttachedToWindow() {
        setAnimation(currentAnimationValue,mAngleOneHum * mProgress,1000);
        super.onAttachedToWindow();
    }

    @Override
    protected void onDetachedFromWindow() {
        if(progressAnim !=null&& progressAnim.isRunning()){
            progressAnim.cancel();
        }
        super.onDetachedFromWindow();
    }
}