自定义View之圆环刷新

来源：互联网发布：淘宝退款率多久清零编辑：程序博客网时间：2024/05/18 03:58

最近在学自定义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();    }}

0 0