自定义View，仿华为天气弧形进度条

曾经终败给现在 2023-10-05 12:47 13阅读 0赞

### 前言 ###

最近看到华为手机的系统天气软件里面有个弧形的进度条，感觉挺好玩，也比较简单，所以想自己写写代码来一个山寨版的。有不足之处欢迎大佬指正。

先看一下华为系统天气软件的截图：  
![在这里插入图片描述][20201029110724107.png_pic_center]

想要实现的是空气质量和舒适度那个弧形的进度条。  
看一下最终的效果：  
![在这里插入图片描述][20201029111138629.gif_pic_center]

看下代码实现：

package com.example.selfdefinitionview.custom;
    
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.os.Handler;
    import android.os.Looper;
    import android.text.TextUtils;
    import android.util.AttributeSet;
    import android.view.View;
    
    import androidx.annotation.Nullable;
    
    import com.example.selfdefinitionview.R;
    import com.example.selfdefinitionview.util.UiUtils;
    
    
    /**
     * @ClassName ：MyRoundView
     * @Description ：
     * @Author ： SheYi
     * @Date ：2020/8/10  8:19 PM
     */
    public class MyRoundView extends View {
    
        private Paint circleBgPaint;
        private int mProgress=0;
        Handler handler=new Handler(Looper.getMainLooper());
        private Paint circlePaint;
        private Paint textPaint;
        /*总的进度*/
        private int totalProgress=100;
        /*进度文字距离顶部的距离*/
        private int textTopMargin=60;
        /*圆环的宽度*/
        private float circleBorderWidth;
        /*圆环的背景色*/
        private int circleBgColor;
        /*圆环的颜色*/
        private int circleColor;
        /*设置圆心文字*/
        private String centerText=null;
        private Rect rect;
        private Paint centerTextPaint;
        private Context context;
        /*默认的圆弧的线宽，单位为dp*/
        private final int DEFULT_CIRCLE_BORDER_WIDTH=10;
    
        public MyRoundView(Context context, @Nullable AttributeSet attrs) {
            super(context, attrs);
            this.context=context;
    
            initAttrs(context,attrs);
            init();
        }
    
        public MyRoundView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            this.context=context;
    
            initAttrs(context,attrs);
            init();
        }
    
        public MyRoundView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr, defStyleRes);
            this.context=context;
    
            initAttrs(context,attrs);
            init();
        }
    
        private void initAttrs(Context context, @Nullable AttributeSet attrs){
            TypedArray mTypeArray=context.obtainStyledAttributes(attrs, R.styleable.MyRoundView);
            circleBorderWidth=mTypeArray.getDimension(R.styleable.MyRoundView_circleBorderWidth, UiUtils.convertDpToPixel(DEFULT_CIRCLE_BORDER_WIDTH,context));
            circleBgColor=mTypeArray.getColor(R.styleable.MyRoundView_circleBgColor, getResources().getColor(R.color.color_F5));
            circleColor=mTypeArray.getColor(R.styleable.MyRoundView_circleColor, Color.RED);
    
            mTypeArray.recycle();
        }
    
        private void init(){
            /*初始化圆弧底部背景画笔*/
            circleBgPaint = new Paint();
            circleBgPaint.setStyle(Paint.Style.STROKE);
            circleBgPaint.setStrokeWidth(circleBorderWidth);
            circleBgPaint.setAntiAlias(true);
            circleBgPaint.setColor(circleBgColor);
            circleBgPaint.setStrokeCap(Paint.Cap.ROUND);
    
            /*初始化圆弧画笔*/
            circlePaint = new Paint();
            circlePaint.setStyle(Paint.Style.STROKE);
            circlePaint.setStrokeWidth(circleBorderWidth);
            circlePaint.setColor(circleColor);
            circlePaint.setStrokeCap(Paint.Cap.ROUND);
    
            /*初始化文字画笔*/
            textPaint = new Paint();
            textPaint.setStyle(Paint.Style.FILL);
            textPaint.setAntiAlias(true);
            textPaint.setTextSize(66);
            textPaint.setColor(Color.BLACK);
    
            /*初始化圆心文字画笔*/
            centerTextPaint = new Paint();
            centerTextPaint.setStyle(Paint.Style.FILL);
            centerTextPaint.setAntiAlias(true);
            centerTextPaint.setTextSize(66);
            centerTextPaint.setColor(Color.BLACK);
    
            rect = new Rect();
    
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    if (mProgress<100){
                        mProgress=mProgress+2;
                        setProgress(mProgress);
                        handler.postDelayed(this,10);
                    }
                }
            },0);
        }
    
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int finalWidth=getFinalWidth(widthMeasureSpec);
            int finalHeight=getFinalHeigh(heightMeasureSpec);
            setMeasuredDimension(finalWidth,finalHeight);
        }
    
        /**
         * 测量View的宽度
         * @param widthMeasureSpec
         * @return
         */
        private int getFinalWidth(int widthMeasureSpec){
            int mode=MeasureSpec.getMode(widthMeasureSpec);
            int size=MeasureSpec.getSize(widthMeasureSpec);
            if (mode==MeasureSpec.AT_MOST){
                size=0;
            }
            return size;
        }
    
        /**
         * 测量View的高度
         * @param heightMeasureSpec
         * @return
         */
        private int getFinalHeigh(int heightMeasureSpec){
            int mode=MeasureSpec.getMode(heightMeasureSpec);
            int size=MeasureSpec.getSize(heightMeasureSpec);
            if (mode==MeasureSpec.AT_MOST){
                size=0;
            }
            return size;
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            int minValue=getMeasuredWidth()<getMeasuredHeight()?getMeasuredWidth():getMeasuredHeight();
            float radius=minValue/2-circleBorderWidth/2;
    
            /*画圆弧背景*/
            canvas.drawArc(circleBorderWidth/2,circleBorderWidth/2,circleBorderWidth/2+2*radius,circleBorderWidth/2+2*radius,135,270,false,circleBgPaint);
            /*画圆弧*/
            canvas.drawArc(circleBorderWidth/2,circleBorderWidth/2,circleBorderWidth/2+2*radius,circleBorderWidth/2+2*radius,135,270*mProgress/totalProgress,false,circlePaint);
    
            /*画当前进度文字*/
            canvas.save();
            canvas.translate(circleBorderWidth/2+radius,circleBorderWidth/2+radius);
            String currentProgressStr=String.valueOf(mProgress);
            rect.setEmpty();
            textPaint.getTextBounds(currentProgressStr,0,currentProgressStr.length(),rect);
            float x1= (float) (-radius*Math.cos(Math.PI*45/180f));
            float y1= (float) (radius*Math.sin(Math.PI*45/180f));
    
            float X1=x1-(rect.width()>>1);
            float Y1=y1+(rect.height()>>1)+textTopMargin;
            canvas.drawText(currentProgressStr, X1, Y1, textPaint);
    
            /*画总进度文字*/
            String totalProgressStr=String.valueOf(totalProgress);
            rect.setEmpty();
            textPaint.getTextBounds(totalProgressStr,0,totalProgressStr.length(),rect);
            float x2= (float) (radius*Math.cos(Math.PI*45/180f));
            float y2= (float) (radius*Math.sin(Math.PI*45/180f));
    
            float X2=x2-(rect.width()>>1);
            float Y2=y2+(rect.height()>>1)+textTopMargin;
            canvas.drawText(totalProgressStr, X2, Y2, textPaint);
    
            String centerTextStr="";
            if (TextUtils.isEmpty(centerText)){
                centerTextStr=mProgress*100/totalProgress+"%";
            }else{
                centerTextStr=centerText;
            }
            rect.setEmpty();
            textPaint.getTextBounds(centerTextStr,0,centerTextStr.length(),rect);
            float X3=-(rect.width()>>1);
            float Y3=(rect.height()>>1);
            canvas.drawText(centerTextStr, X3, Y3, centerTextPaint);
    
            canvas.restore();
        }
    
        public void setProgress(int progress){
            this.mProgress=progress;
            invalidate();
        }
    
    
    
    }

属性：

<declare-styleable name="MyRoundView">
        <attr name="circleBorderWidth" format="dimension"></attr>
        <attr name="circleBgColor" format="color"></attr>
        <attr name="circleColor" format="color"></attr>
    </declare-styleable>

在xml布局中使用：

[20201029110724107.png_pic_center]: https://img-blog.csdnimg.cn/20201029110724107.png#pic_center
[20201029111138629.gif_pic_center]: https://img-blog.csdnimg.cn/20201029111138629.gif#pic_center