自定义View之圆环刷新

最近在学自定义View,然后联想到经常看到的圆环刷新效果，感觉可以用自定义View实现，于是便写了一个。

废话不说，先上效果

ps:博主没找到合适的录制gif的软件，有朋友知道可以留个言
刷新时效果就是一个个进度块颜色依次刷新

直接上代码了，注释写得很清楚，应该很容易看懂

xml布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ustb.shinerio.myview.MainActivity">
<com.ustb.shinerio.myview.RefreshBar
    android:id="@+id/circleRef"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    custom:stepNum="12"
    />
<Button
    android:layout_below="@+id/circleRef"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="开始刷新"
    android:textColor="@android:color/black"
    android:onClick="startRef"
    />
</RelativeLayout>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="basicColor" format="color"/>
    <attr name="refreshColor" format="color"/>
    <attr name="radius" format="dimension"/>
    <attr name="speed" format="integer"/>
    <attr name="stepNum" format="integer"/>
    <declare-styleable name="refreshBar">
        <attr name="stepNum"/>
        <attr name="radius"/>
        <attr name="speed"/>
        <attr name="basicColor"/>
        <attr name="refreshColor" />
    </declare-styleable>
</resources>

自定义view类

public class RefreshBar extends View {
    private int basicColor;  //基础颜色
    private int refreshColor;  //刷新用色
    private int speed; //刷新速度
    private int stepNum;  //刷新步数
    private int radius; //圆环半径

    private int progress = 0;  //记录刷新进度

    private Paint  mPaint;  //画笔工具
    //java代码创建时调用
    public RefreshBar(Context context){
        this(context,null);
    }
    //xml中定义是调用
    public  RefreshBar(Context context, AttributeSet attrs){
        this(context, attrs,0);
    }
    public RefreshBar(Context context,AttributeSet attrs,int defStyle){
        //defStyle默认为xml中style标签指定
        super(context,attrs,defStyle);
        //下面获得我们自定义的属性
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.refreshBar,defStyle,0);
        basicColor = typedArray.getColor(R.styleable.refreshBar_basicColor, Color.parseColor("#8F8F8F"));//默认浅灰色
        refreshColor = typedArray.getColor(R.styleable.refreshBar_refreshColor,Color.parseColor("#292424"));//默认深灰色
        speed = typedArray.getInt(R.styleable.refreshBar_speed,1);
        stepNum = typedArray.getInt(R.styleable.refreshBar_stepNum,12);
        //半径默认50dp,TypedValue可以进行各种尺寸单位的转换
        radius = typedArray.getDimensionPixelSize(R.styleable.refreshBar_radius,
                (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,50,getResources().getDisplayMetrics()));
        typedArray.recycle();  //回收再利用
        mPaint = new Paint();
    }
    //重写onMeasure


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heighMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int length;
        if(widthMode == MeasureSpec.EXACTLY&&heighMode == MeasureSpec.EXACTLY){
            length = Math.min(widthSize,heightSize);   //取最小值
        }else {
            length = radius*3;
        }
        setMeasuredDimension(length,length); //圆形边界宽相同
    }

    //重写onDraw()
    @Override
    protected void onDraw(Canvas canvas) {
      /*
        先绘制基础圆环
       */
        int center = getWidth()/2;  //圆心
        //根据stepNum计算出每一个进度占用角度,空隙占用角度相同
        int perAngle = 360/(stepNum*2);
        mPaint.setColor(basicColor);
        mPaint.setStrokeWidth(radius/2);  //小方块的长度，这里取半径一半
        mPaint.setStyle(Paint.Style.STROKE);   //不填充内部
        for(int i=0;i<stepNum;i++){        //绘制每一个进度块
            RectF rectF = new RectF(center-radius,center-radius,center+radius,center+radius);            //绘制边界
            canvas.drawArc(rectF,i*2*perAngle,perAngle,false,mPaint);     //*2用来间隔空隙
        }
        /*
        绘制进度
         */
        mPaint.setColor(refreshColor);
        for(int i=0;i<progress;i++){        //绘制每一个进度块
            RectF rectF = new RectF(center-radius,center-radius,center+radius,center+radius);            //绘制边界
            canvas.drawArc(rectF,i*2*perAngle,perAngle,false,mPaint);     //*2用来间隔空隙
        }
    }

    /**
     * 调用此方法来执行刷新进度操作
     */
    public void refresh(){
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true){
                    if (progress==stepNum){
                        break; //刷新结束
                    }
                    progress++;
                    postInvalidate();
                    try {
                        Thread.sleep(1000/speed);  //控制刷新速度  个数/秒
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}