自定义View实现圆形进度条及圆形Loading

最新推荐文章于 2022-05-25 15:51:31 发布

熊喵先生

最新推荐文章于 2022-05-25 15:51:31 发布

阅读量1.6k

点赞数

分类专栏： Android自定义View 文章标签： Android自定义View 自定义圆形进度条自定义圆形loading

本文链接：https://blog.csdn.net/u013064109/article/details/50573747

版权

Android自定义View 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一、自定义View的四部曲:

1、曲一：在res/values文件夹下，新建一个attrs.xml文件，然后在文件中去自定义属性，并且在<declare-styleable>...</declare-styleable>中去声明这些属性

1.1:圆形进度条:

`@code

<?xml version="1.0" encoding="utf-8"?>    
<resources>
<attr name="myFirstCircleColor" format="color"></attr>
<attr name="mySecondCircleColor" format="color"></attr>
<attr name="myCircleWidth" format="dimension"></attr>
<attr name="myCircleSpeed" format="integer"></attr>
<attr name="myCircleTextColor" format="color"></attr>
<attr name="myCircleTextSize" format="dimension"></attr>
<declare-styleable name="ZqhCircle">
<attr name="myFirstCircleColor"></attr>
<attr name="mySecondCircleColor"></attr>
<attr name="myCircleWidth"></attr>
<attr name="myCircleSpeed"></attr>
<attr name="myCircleTextColor"></attr>
<attr name="myCircleTextSize"></attr>
</declare-styleable>
</resources>

1.2:圆形loading:

`@code

<?xml version="1.0" encoding="utf-8"?>
<resources>

<attr name="myFirstCircleColor" format="color"></attr>
<attr name="mySecondCircleColor" format="color"></attr>
<attr name="myCircleWidth" format="dimension"></attr>
<attr name="myCircleSpeed" format="integer"></attr>
<attr name="myCircleText" format="string"></attr>
<attr name="myCircleTextSize" format="dimension"></attr>
<attr name="myCircleTextWidth" format="dimension"></attr>
<attr name="myCircleCount" format="integer"></attr>
<attr name="myCircleTextColor" format="color"></attr>

<declare-styleable name="ZqhCircle">
    <attr name="myFirstCircleColor"></attr>
    <attr name="mySecondCircleColor"></attr>
    <attr name="myCircleWidth"></attr>
    <attr name="myCircleSpeed"></attr>
    <attr name="myCircleText"></attr>
    <attr name="myCircleTextSize"></attr>
    <attr name="myCircleTextWidth"></attr>
    <attr name="myCircleTextColor"></attr>
    <attr name="myCircleCount"></attr>
</declare-styleable>

</resources>

` 2、曲二:去定义一个class继承View然后再重写3个构造器，分别是1个参数的构造器、2个参数的构造器、3个参数的构造器；3个参数的构造器中去获取布局文件中使用的自定义的属性所有key值，然后根据key值获取到相应的value值，并做一些初始化的操作

2.1:圆形进度条:

`@code

 public myCircleProgress(Context context, AttributeSet attrs,
        int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.ZqhCircle, defStyleAttr, 0);
    for (int i = 0; i < array.getIndexCount(); i++) {
        int attr=array.getIndex(i);
        switch (attr) {
        case R.styleable.ZqhCircle_myFirstCircleColor:
            myFirstColor=array.getColor(attr, Color.YELLOW);
            break;
        case R.styleable.ZqhCircle_mySecondCircleColor:
            mySecondColor=array.getColor(attr, Color.RED);
            break;
        case R.styleable.ZqhCircle_myCircleWidth:
            myCircleWidth=array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));
            break;
        case R.styleable.ZqhCircle_myCircleSpeed:
            mySpeed=array.getInteger(attr, 1000);
            break;
        case R.styleable.ZqhCircle_myCircleTextSize:
            myCircleTextSize=array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
            break;
        case R.styleable.ZqhCircle_myCircleTextColor:
            myCircleTextColor=array.getColor(attr, Color.RED);
            break;
        default:
            break;
        }
    }
    array.recycle();

    myPaint=new Paint();
    myCircleTextBound=new Rect();
    myCircleText=((currentProgress/360)*100)+"%";
    myPaint.setTextSize(myCircleTextSize);
    new Thread(new Runnable() {
        @Override
        public void run() {

            while (currentProgress!=maxProgress) {
                currentProgress++;
                myCircleText=((int)((currentProgress/360.0f)*100))+"%";
                postInvalidate();
                try {
                    Thread.sleep(mySpeed);
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }
    }).start();
}

2.2:圆形loading:

`@code

public myLoadingProgress(Context context, AttributeSet attrs,
        int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    TypedArray array=context.obtainStyledAttributes(attrs, R.styleable.ZqhCircle, defStyleAttr, 0);
    for (int i = 0; i < array.getIndexCount(); i++) {
        int attr=array.getIndex(i);
        switch (attr) {
        case R.styleable.ZqhCircle_myFirstCircleColor:
            myFirstColor=array.getColor(attr, Color.YELLOW);
            break;
        case R.styleable.ZqhCircle_mySecondCircleColor:
            mySecondColor=array.getColor(attr, Color.RED);
            break;
        case R.styleable.ZqhCircle_myCircleWidth:
            myCircleWidth=array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 5, getResources().getDisplayMetrics()));
            break;
        case R.styleable.ZqhCircle_myCircleSpeed:
            mySpeed=array.getInteger(attr, 1000);
            break;
        case R.styleable.ZqhCircle_myCircleCount:
            myCircleCount=array.getInteger(attr, 5);
            break;
        case R.styleable.ZqhCircle_myCircleTextWidth:
            myCircleTextWidth=array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 5, getResources().getDisplayMetrics()));
            break;
        case R.styleable.ZqhCircle_myCircleTextSize:
            myCircleTextSize=array.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16,getResources().getDisplayMetrics()));
            break;
        case R.styleable.ZqhCircle_myCircleTextColor:
            myCircleTextColor=array.getColor(attr, Color.BLACK);
            break;
        default:
            break;
        }
    }
    array.recycle();
    myPaint=new Paint();
    myCircleTextBound=new Rect();
    myPaint.setTextSize(myCircleTextSize);
    myText=""+myCircleCount;
    myPaint.getTextBounds(myText,0, myText.length(), myCircleTextBound);
    new Thread(new Runnable() {
        @Override
        public void run() {
            while (true) {
                currentProgress++;
                if (currentProgress==360) {
                    --myCircleCount;
                    /**
                     * @author zhongqihong
                     * 在此判断主要为了考虑两种情况
                     * 第一种就是：正常的我们不需要显示中间的text那么我们就在布局文件中不去指定相关属性即可
                     * 此时的myCircleCount默认为0，若为0即表示一般的圆形loading，需要让它不断去转动，
                     * 当--myCircleCount执行完后就为负数，也就不会执行下面的if---else if中的语句，也就不会break，永远循环下去
                     * 第二种就是需要显示中的文本的，那么此时我们从布局文件中制定该属性的值，且该值为正数， 当--myCircleCount执行完后就为非负数
                     * 那么就会执行下面的if--else if并且当myCircleCount减到0就直接break跳出循环，就不会再去绘制canvas
                     * */
                    if (myCircleCount>0) {
                        myText=""+myCircleCount;
                    }else if (myCircleCount==0) {
                        myText="ok!";
                        break;
                    }
                    currentProgress=0;
                    if (isNext) {
                        isNext=false;
                    }else{
                        isNext=true;
                    }
                }
                handler.sendEmptyMessage(0x111);
                try {
                    Thread.sleep(mySpeed);
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }
    }).start();
}

` 3、曲三：重写onMeasure方法，根据不同的测量模式最后定义不同的宽度和高度。

`@onMeasure code

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    System.out.println("I am onMeasure");
}

` 4、曲四:重写onDraw方法，画出相应的文本和圆形及扇形本次的绘制出圆形进度条的原理是，先在矩形中间画出文本，然后接着就是画圆环(实际上就是一个一定厚度的圆，似圆环)，然后以相同的圆心坐标，开启一个子线程动态的画扇形，子线程的目的就是动态每隔一定的时间就去增加绘制扇形的角度，动态绘制的扇形覆盖在原来的圆环上，就出现圆形进度效果和圆形loading的效果。

4.1:圆形进度条:

`@code

@Override
protected void onDraw(Canvas canvas) {
    myPaint.getTextBounds(myCircleText, 0, myCircleText.length(), myCircleTextBound);
    int textX=getWidth()/2-myCircleTextBound.width()/2+myCircleWidth/4;
    int textY=(getHeight()-myCircleTextBound.height())/2+myCircleTextBound.height()-myCircleWidth/2;
    myPaint.setStyle(Paint.Style.FILL);
    myPaint.setColor(myCircleTextColor);
    canvas.drawText(myCircleText, textX, textY, myPaint);
    int center=getWidth()/2;
    int radius=center-myCircleWidth;
    myPaint.setStrokeWidth(myCircleWidth);
    myPaint.setAntiAlias(true);
    myPaint.setStyle(Paint.Style.STROKE);
    /**
     * @author zhongqihong
     * RectF的四个参数:
     * left:带内边距内部左上角点的X坐标
     * top:带内边距内部左上角点的Y坐标
     * right:带内边距内部右下角点的X坐标
     * bottom:带内边距内部右下角点的Y坐标
     * 注意：此时的圆环实际上就是画一个一个圆，只是这个圆的边厚度尺寸更大，显示出是一个圆环
     * 圆的厚度，也即是RectF矩形的尺寸厚度
     * 
     * */
    /*RectF oval=new RectF(center-radius, center-radius, center+radius, center+radius);*/
    RectF oval=new RectF(center-radius, center-radius, (center-radius)+2*radius, (center-radius)+2*radius);
    myPaint.setColor(myFirstColor);
    //先用第一种颜色画出圆，第一个第二个参数是圆心坐标，第三个是半径
    canvas.drawCircle(center, center, radius, myPaint);
    //再用第二种颜色在圆形的基础上覆盖画出扇形，覆盖原来的圆轨迹
    myPaint.setStrokeWidth(myCircleWidth-13);
    myPaint.setAntiAlias(true);
    myPaint.setStyle(Paint.Style.STROKE);
    myPaint.setColor(mySecondColor);
    canvas.drawArc(oval, -90, currentProgress, false, myPaint);
}
/**
 * @author zhongqihong
 * 设置圆环开始的起始位置
 * */
public void setCurrentCircleProgress(int progress){
    currentProgress=progress;
    invalidate();
    requestLayout();
}
/**
 * @author zhongqihong
 * */
public void setMaxCircleProgress(int progress){
    maxProgress=progress;
    invalidate();
    requestLayout();
}
public void setCircleSpeed(int speed){
    mySpeed=speed;
    invalidate();
    requestLayout();
}

4.2:圆形loading:

`@code

    @Override
protected void onDraw(Canvas canvas) {
    /**
     * @author zhongqihong
     * 绘制中间文本
     * */
    myPaint.getTextBounds(myText,0, myText.length(), myCircleTextBound);//这里获取TextBound是因为每次重新绘制Text的边界，
    //都需要最新的边界尺寸，所以在画之前都必须重新拿到最新的文本的边界尺寸
    int textX=(getMeasuredWidth()-myCircleTextBound.width())/2+myCircleWidth/8;
    int textY=(getMeasuredHeight()-myCircleTextBound.height())/2+myCircleTextBound.height()-myCircleWidth/2;
    System.out.println("getMeasureWidth-------++++------>"+getMeasuredHeight());
    System.out.println("TextX----->"+textX+"    TextY-------->"+textY);
    myPaint.setAntiAlias(true);
    myPaint.setStyle(Paint.Style.FILL);
    myPaint.setTextSize(myCircleTextSize);
    if (!isNext) {
        myCircleTextColor=mySecondColor;
    }else{
        myCircleTextColor=myFirstColor;
    }
    myPaint.setColor(myCircleTextColor);
    canvas.drawText(myText, textX,textY, myPaint);
   /**
      * @author zhongqihong
      * 绘制圆环即圆环上的覆盖的扇形
      * */
    int center=getWidth()/2;
    int radius=center-myCircleWidth;
    myPaint.setStrokeWidth(myCircleWidth);
    myPaint.setAntiAlias(true);
    myPaint.setStyle(Paint.Style.STROKE);
    /**
     * @author zhongqihong
     * RectF的四个参数:
     * left:带内边距内部左上角点的X坐标
     * top:带内边距内部左上角点的Y坐标
     * right:带内边距内部右下角点的X坐标
     * bottom:带内边距内部右下角点的Y坐标
     * 注意：此时的圆环实际上就是画一个一个圆，只是这个圆的边厚度尺寸更大，显示出是一个圆环
     * 圆的厚度，也即是RectF矩形的尺寸厚度
     * 
     * */
    /*RectF oval=new RectF(center-radius, center-radius, center+radius, center+radius);*/
    RectF oval=new RectF(center-radius, center-radius, (center-radius)+2*radius, (center-radius)+2*radius);
    if (isNext) {
        myPaint.setColor(myFirstColor);
        //先用第一种颜色画出圆，第一个第二个参数是圆心坐标，第三个是半径
        canvas.drawCircle(center, center, radius, myPaint);
        //再用第二种颜色在圆形的基础上覆盖画出扇形，覆盖原来的圆轨迹
        myPaint.setColor(mySecondColor);
        canvas.drawArc(oval, -90, currentProgress, false, myPaint);
    }else{
        myPaint.setColor(mySecondColor);
        canvas.drawCircle(center, center, radius, myPaint);
        myPaint.setColor(myFirstColor);
        canvas.drawArc(oval, -90, currentProgress, false, myPaint);
    }
}

4.1绘制圆形进度条原理:

绘制扇形与上面一致，然后就是更新中间的文本，中间的文本就是根据当前处于子线程的那个自增的变量值，当前（刻度值/总的)*100+“%”产生一个百分比的效果去更新文本显示，如何使得动态的绘制扇形呢？通过postInvalidate方法，在子线程的循环中每次都调用该方法，该方法就是将原来的旧的绘制的图形在UI线程中pop掉，然后重新调用onMeasure,和onDraw方法重新绘制新的图形，每调用一次就pop旧的，插入新的，从而使得产生一个动态的绘制扇形的效果

4.2绘制圆形loading原理:

绘制扇形与上面一致，然后就是更新中间的文本，中间的文本就是根据当前处于子线程的那个自增的变量值，当该刻度值满了一圈就去更新中间的文本，如何使得动态的绘制扇形呢？通过postInvalidate方法，在子线程的循环中每次都调用该方法，该方法就是将原来的旧的绘制的图形在UI线程中pop掉，然后重新调用onMeasure,和onDraw方法重新绘制新的图形，每调用一次就pop旧的，插入新的，从而使得产生一个动态的绘制扇形的效果

注意:invalidate和postInvalidate异同:

相同点:Invalidate和postInvalidate的相同点都是把原来的旧的绘制图形从主UI线程中给pop掉，插入新的绘制图型。一般还用与set方法中，改变绘制图形的属性值的set方法中。不同点：Invalidate是用于主线程中更新UI的，而postInvalidate则用于在子线程中调用，来更新UI 实际上它里面封装一个Handler对象发送消息，然后处理消息调用invalidate来更新主UI。

注意：requestLayout使用，用于主线程中，它的作用就是重新测量，否则调用invalidate后不调用requestLayout的话重绘的尺寸为原来旧的尺寸。一般调用完invalidate后就调用requestLayout

绘制原理图: