Android圆形进度条

叁歲伎倆 2022-05-16 04:30 538阅读 0赞

自定义圆形进度条，见下图：

![70][]

**1、自定义进度条类：**

package com.example.msh.view;
    
    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.example.msh.mshaliapp.R;
    
    /**
     * 自定义圆形进度条
     * Author：William（徐威）
     * Create Time：2018-08-15
     */
    public class PercentCircle extends View {
        //全局变量
        private Paint mTextPaint;
        private Paint mBackgroundPaint;
        private Paint mRingPaint;
        private int mCircleX;
        private int mCircleY;
        private float mCurrentAngle;
        private RectF mArcRectF;
        private float mStartSweepValue;
        private int mTargetPercent;
        private int mCurrentPercent;
        private int mDefaultRadius = 60;
        private int mRadius;
        private int mDefaultBackgroundColor = 0xffafb4db;
        private int mBackgroundColor;
        private int mDefaultRingColor = 0xff6950a1;
        private int mRingColor;
        private int mDefaultTextSize;
        private int mTextSize;
        private int mDefaultTextColor = 0xffffffff;
        private int mTextColor;
        private int progressRate = 1000;
    
        /**
         * 构造函数
         * Author：William（徐威）
         * Create Time：2018-08-15
         *
         * @param context
         */
        public PercentCircle(Context context) {
            super(context);
            init(context);
    
        }
    
        /**
         * 设置进度条的进度频率（微妙）
         * Author：William（徐威）
         * Create Time：2018-08-15
         *
         * @param rate （多少微妙前进1个百分比）
         */
        public void setProgressRate(int rate) {
            progressRate = rate;
        }
    
        public PercentCircle(Context context, AttributeSet attrs) {
            super(context, attrs);
            // 自定义属性，attrs
            // 使用TypedArray
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.PercentageRing);
            // 背景圆的半径
            mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, mDefaultRadius);
            // 背景圆的颜色
            mBackgroundColor = typedArray.getColor(R.styleable.PercentageRing_circleBackground, mDefaultBackgroundColor);
            // 文字的颜色 默认白色
            mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, mDefaultTextColor);
            // 外圆环的颜色
            mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, mDefaultRingColor);
            typedArray.recycle();
    
            init(context);
        }
    
        public PercentCircle(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            init(context);
        }
    
        /**
         * 初始化
         * Author：William（徐威）
         * Create Time：2018-08-15
         * @param context
         */
        private void init(Context context) {
            //圆环开始角度 -90° 正北方向
            mStartSweepValue = -90;
            //当前角度
            mCurrentAngle = 0;
            //当前百分比
            mCurrentPercent = 0;
    
            //设置中心园的画笔
            mBackgroundPaint = new Paint();
            mBackgroundPaint.setAntiAlias(true);
            mBackgroundPaint.setColor(mBackgroundColor);
            mBackgroundPaint.setStyle(Paint.Style.FILL);
    
            //设置文字的画笔
            mTextPaint = new Paint();
            mTextPaint.setColor(mTextColor);
            mTextPaint.setAntiAlias(true);
            mTextPaint.setStyle(Paint.Style.FILL);
            mTextPaint.setStrokeWidth((int) (0.025 * mRadius));
            mTextPaint.setTextSize(mRadius / 2);   //文字大小为半径的一半
            mTextPaint.setTextAlign(Paint.Align.CENTER);
    
            //设置外圆环的画笔
            mRingPaint = new Paint();
            mRingPaint.setAntiAlias(true);
            mRingPaint.setColor(mRingColor);
            mRingPaint.setStyle(Paint.Style.STROKE);
            mRingPaint.setStrokeWidth((float) (0.075 * mRadius));
    
            //获得文字的字号 因为要设置文字在圆的中心位置
            mTextSize = (int) mTextPaint.getTextSize();
        }
    
        // 主要是测量wrap_content时候的宽和高，因为宽高一样，只需要测量一次宽即可，高等于宽
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));
        }
    
        // 当wrap_content的时候，view的大小根据半径大小改变，但最大不会超过屏幕
        private int measure(int measureSpec) {
            int result = 0;
            /**
             * 1、先获取测量模式 和 测量大小
             * 2、如果测量模式是MatchParent 或者精确值，则宽为测量的宽
             * 3、如果测量模式是WrapContent ，则宽为 直径值 与 测量宽中的较小值；否则当直径大于测量宽时，会绘制到屏幕之外；
             */
            int specMode = MeasureSpec.getMode(measureSpec);
            int specSize = MeasureSpec.getSize(measureSpec);
            if (specMode == MeasureSpec.EXACTLY) {
                result = specSize;
            } else {
                result = (int) (mRadius * 2 + mRingPaint.getStrokeWidth() * 2);
                if (specMode == MeasureSpec.AT_MOST) {
                    result = Math.min(result, specSize);
                }
            }
            return result;
        }
    
        /**
         * 实现View布局
         * Author：William（徐威）
         * Create Time：2018-08-15
         * @param changed
         * @param left
         * @param top
         * @param right
         * @param bottom
         */
        @Override
        protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
            super.onLayout(changed, left, top, right, bottom);
    
            /**
             * 1、如果半径大于圆心的横坐标，需要手动缩小半径的值，否则画到屏幕之外；
             * 2、改变了半径，则需要重新设置字体大小；
             * 3、改变了半径，则需要重新设置外圆环的宽度
             * 4、画背景圆的外接矩形，用来画圆环；
             */
            mCircleX = getMeasuredWidth() / 2;
            mCircleY = getMeasuredHeight() / 2;
            if (mRadius > mCircleX) {
                mRadius = mCircleX;
                mRadius = (int) (mCircleX - 0.075 * mRadius);
                mTextPaint.setStrokeWidth((float) (0.025 * mRadius));
                mTextPaint.setTextSize(mRadius / 2);
                mRingPaint.setStrokeWidth((float) (0.075 * mRadius));
                mTextSize = (int) mTextPaint.getTextSize();
            }
            mArcRectF = new RectF(mCircleX - mRadius, mCircleY - mRadius, mCircleX + mRadius, mCircleY + mRadius);
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            /**
             * 1、画中间背景圆
             * 2、画文字
             * 3、画圆环
             * 4、判断进度，重新绘制
             */
            canvas.drawCircle(mCircleX, mCircleY, mRadius, mBackgroundPaint);
            canvas.drawText(String.valueOf(mCurrentPercent) + "%", mCircleX, mCircleY + mTextSize / 4, mTextPaint);
            canvas.drawArc(mArcRectF, mStartSweepValue, mCurrentAngle, false, mRingPaint);
    
            if (mCurrentPercent < mTargetPercent) {
                //当前百分比+1
                mCurrentPercent += 1;
                //当前角度+360
                mCurrentAngle += 3.6;
                //按照设置的前进频率毫秒数重画一次（默认1000ms）
                postInvalidateDelayed(progressRate);
            }
        }
    
        /**
         * 设置最大百分比
         * Author：William（徐威）
         * Create Time：2018-08-15
         * @param targetPercent
         */
        public void setTargetPercent(int targetPercent) {
            mTargetPercent = targetPercent;
        }
    }

2、前端UI页面Xml文件布局引入：

**3、Activity后台操作：**

PercentCircle pCircleBar = (PercentCircle) findViewById(R.id.pCircleBar);
    pCircleBar.setProgressRate(120);//设置进度条前进频率，单位微妙，此处是120微妙前进1%
    pCircleBar.setTargetPercent(100);//设置进度条最大可以到达的百分比，此处设置是到达100%

[70]: /images/20220516/b08dc3c9b6f6437c89d3ac35126e9412.png