Android自定义圆角矩形进度条

淩亂°似流年 2022-03-24 18:58 591阅读 0赞

效果图：

![20190122162708176.png][]  或 ![20190122162837351.png][]

方法讲解：

（1）invalidate()方法

invalidate()是用来刷新View的，必须是在UI线程中进行工作。比如在修改某个view的显示时， 调用invalidate()才能看到重新绘制的界面。invalidate()的调用是把之前的旧的view从主UI线程队列中pop掉。一般在自定义控件中会用到这个方法。

（2）RectF方法的应用

RectF是用来绘画矩形的方法。

RectF（left,top,right,bottom）,四个参数的含义分别是父控件距离矩形左上右下边距的距离，以下用图来说明：

drawRoundRect方法是用来绘制圆角矩形的，它的参数如下：   
参数说明

rect：RectF对象。   
rx：x方向上的圆角半径。   
ry：y方向上的圆角半径。   
paint：绘制时所使用的画笔。

（3）onMeasure方法

指定自定义控件在屏幕上的大小,onMeasure方法的两个参数是由上一层控件 传入的大小，而且是模式和尺寸混合在一起的数值，需要MeasureSpec.getMode(widthMeasureSpec) 得到模式，MeasureSpec.getSize(widthMeasureSpec)得到尺寸。

onMeasure的几种模式分别为EXACTLY,AT\_MOST,UNSPECIFIED。

\[1\]MeasureSpec.EXACTLY

MeasureSpec.EXACTLY是精确尺寸，当我们将控件的layout\_width或layout\_height指定为具体数值时如andorid:layout\_width=”50dip”，或者为FILL\_PARENT是，都是控件大小已经确定的情况，都是精确尺寸。

\[2\]MeasureSpec.AT\_MOST

MeasureSpec.AT\_MOST是最大尺寸，当控件的layout\_width或layout\_height指定为WRAP\_CONTENT时，控件大小一般随着控件的子空间或内容进行变化，此时控件尺寸只要不超过父控件允许的最大尺寸即可。因此，此时的mode是AT\_MOST，size给出了父控件允许的最大尺寸。

\[3\]MeasureSpec.UNSPECIFIED

MeasureSpec.UNSPECIFIED是未指定尺寸，这种情况不多，一般都是父控件是AdapterView，通过measure方法传入的模式。

实现步骤：

a、在values文件夹下新建attrs.xml，内容如下：

<?xml version="1.0" encoding="utf-8"?>
    <resources>
    
        <declare-styleable name="CircleProgressBar">
            <attr name="croundColor" format="color"/>
            <attr name="croundProgressColor" format="color"/>
            <attr name="cfillColor" format="color"/>
            <attr name="croundWidth" format="dimension"></attr>
            <attr name="croundProgressWidth" format="dimension"></attr>        
            <attr name="ctextColor" format="color" />  
            <attr name="ctextSize" format="dimension" />         
            <attr name="cnumberSize" format="dimension" />        
            <attr name="cparaLable" format="string" />
            <attr name="cunitLable" format="string" />   
        </declare-styleable>
    
        <declare-styleable name="RoundRectProgressBar">
            <attr name="cbarRoundColor" format="color"/>
            <attr name="cbarProgressColor" format="color"/>
            <attr name="cbarFillColor" format="color"/>
            <attr name="cbarOrientation">
                　　<enum name="HORIZONTAL" value="0"></enum>
                　　<enum name="VERTICAL" value="1"></enum>
            </attr>
        </declare-styleable>
        
    </resources>

b、新建RoundRectProgressBar类继承View

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.view.View;
    
    /**
     * 自定义圆角矩形进度条view
     *
     * @author xl
     */
    public class RoundRectProgressBar extends View {
    
        private final static String TAG = RoundRectProgressBar.class.getSimpleName();
    
        /**
         * 画笔对象的引用
         */
        private Paint paint;
    
        /**
         * 圆角环的颜色
         */
        private int roundColor;
    
        /**
         * 进度的颜色
         */
        private int fillProgressColor;
    
        /**
         * 填充的颜色
         */
        private int fillColor;
    
        /**
         * 圆角矩形宽度
         */
        private int roundWidth;
    
        /**
         * 圆角矩形高度
         */
        private int roundHeight;
    
        /**
         * 进度条方向，0水平，1垂直
         */
        private int barOrientation;
    
        /**
         * 进度条最大值
         */
        private float max = 100;
    
        /**
         * 进度条当前值
         */
        private float progress = 30;
    
        public RoundRectProgressBar(Context context) {
            this(context, null);
        }
    
        public RoundRectProgressBar(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public RoundRectProgressBar(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            //获取画笔
            paint = new Paint();
            TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundRectProgressBar);
            //获取自定义属性和默认值
            roundColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarRoundColor, Color.RED);
            fillProgressColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarProgressColor, Color.GREEN);
            fillColor = mTypedArray.getColor(R.styleable.RoundRectProgressBar_cbarFillColor, Color.BLUE);
            barOrientation = mTypedArray.getInt(R.styleable.RoundRectProgressBar_cbarOrientation, 0);
            //回收TypedArray资源
            mTypedArray.recycle();
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            //设置抗锯齿效果
            paint.setAntiAlias(true);
            //设置画笔颜色
            paint.setColor(roundColor);
            //进度方向
            if (barOrientation == 0) {
                //水平，向右
                try {
                    int round = roundHeight / 2;
                    //RectF：绘制矩形，四个参数分别是left,top,right,bottom,类型是单精度浮点数
                    RectF rf = new RectF(0, 0, roundWidth, roundHeight);
                    //绘制圆角矩形，背景色为画笔颜色
                    canvas.drawRoundRect(rf, round, round, paint);
                    //设置progress内部是灰色
                    paint.setColor(fillColor);
                    RectF rectBlackBg = new RectF(2, 2, roundWidth - 2, roundHeight - 2);
                    canvas.drawRoundRect(rectBlackBg, round, round, paint);
                    //设置进度条进度及颜色
                    float section = progress / max;
                    RectF rectProgressBg = new RectF(2, 2, (roundWidth - 2) * section, roundHeight - 2);
                    if (section != 0.0f) {
                        paint.setColor(fillProgressColor);
                    } else {
                        paint.setColor(Color.TRANSPARENT);
                    }
                    canvas.drawRoundRect(rectProgressBg, round, round, paint);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            } else {
                //垂直，向上
                try {
                    int round = roundWidth / 2;
                    //RectF：绘制矩形，四个参数分别是left,top,right,bottom,类型是单精度浮点数
                    RectF rf = new RectF(0, 0, roundWidth, roundHeight);
                    //绘制圆角矩形，背景色为画笔颜色
                    canvas.drawRoundRect(rf, round, round, paint);
                    //设置progress内部是灰色
                    paint.setColor(fillColor);
                    RectF rectBlackBg = new RectF(2, 2, roundWidth - 2, roundHeight - 2);
                    canvas.drawRoundRect(rectBlackBg, round, round, paint);
                    //设置进度条进度及颜色
                    float section = progress / max;
                    RectF rectProgressBg = new RectF(2, roundHeight - 2 - (roundHeight - 4) * section, roundWidth - 2, roundHeight - 2);
                    if (section != 0.0f) {
                        paint.setColor(fillProgressColor);
                    } else {
                        paint.setColor(Color.TRANSPARENT);
                    }
                    canvas.drawRoundRect(rectProgressBg, round, round, paint);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    
        /**
         * dip转px
         *
         * @param dip
         * @return
         */
        private int dipToPx(int dip) {
            float scale = getContext().getResources().getDisplayMetrics().density;
            //加0.5是为了四舍五入
            return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));
        }
    
        /**
         * 指定自定义控件在屏幕上的大小,onMeasure方法的两个参数是由上一层控件
         * 传入的大小，而且是模式和尺寸混合在一起的数值，需要MeasureSpec.getMode(widthMeasureSpec)
         * 得到模式，MeasureSpec.getSize(widthMeasureSpec)得到尺寸
         */
        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
            //MeasureSpec.EXACTLY，精确尺寸
            if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {
                roundWidth = widthSpecSize;
            } else {
                roundWidth = 0;
            }
            if (heightSpecMode == MeasureSpec.EXACTLY || heightSpecMode == MeasureSpec.AT_MOST) {
                roundHeight = heightSpecSize;
            } else {
                roundHeight = 0;
            }
            //MeasureSpec.AT_MOST，最大尺寸，只要不超过父控件允许的最大尺寸即可，MeasureSpec.UNSPECIFIED未指定尺寸
            //if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {
            //    roundHeight = dipToPx(20);
            //} else {
            //    roundHeight = heightSpecSize;
            //}
            //设置控件实际大小
            setMeasuredDimension(roundWidth, roundHeight);
        }
    
    
        /**
         * 设置进度
         *
         * @param progress
         */
        public synchronized void setProgress(float progress) {
            if (progress < 0) {
                throw new IllegalArgumentException("value can not be negative");
            }
            if (progress > max) {
                this.progress = max;
            } else {
                this.progress = progress;
            }
            postInvalidate();
        }
    
        /**
         * 设置最大值
         *
         * @param max
         */
        public synchronized void setMax(float max) {
            if (max < 0) {
                throw new IllegalArgumentException("value can not be negative");
            }
            this.max = max;
        }
    
    }

c、布局文件中引用activity\_main.xml

<ups.invt.com.view.RoundRectProgressBar
                                android:id="@+id/bar"
                                android:layout_width="20dp"
                                android:layout_height="100dp"
                                android_custom:cbarRoundColor="@color/transparent"
                                android_custom:cbarFillColor="@color/white"
                                android_custom:cbarProgressColor="@color/bar_fill_color"
                                android_custom:cbarOrientation="VERTICAL"
                                android:layout_centerInParent="true"/>

d、MainActivity.java中设置进度

progress = (RoundRectProgressBar) findViewById(R.id.bar);
    progress.setMax(100);
    
    progress.setProgress(80);

完！！！

[20190122162708176.png]: https://img-blog.csdnimg.cn/20190122162708176.png
[20190122162837351.png]: /images/20220323/9c3423eee58344f9b1e6153484f10282.png