【Android自定义控件】圆圈交替，仿progress效果

来源：互联网发布：淘宝运动衣编辑：程序博客网时间：2024/05/27 19:26

还是我们自定View的那几个步骤：

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

3、重写onMesure （不是必须）

4、重写onDraw

自定义View的属性

 <?xml version="1.0" encoding="utf-8"?><resources><attr name="firstColor" format="color" />    <attr name="secondColor" format="color" />    <attr name="circleWidth" format="dimension" />    <attr name="speed" format="integer" />    <declare-styleable name="progressStyle">        <attr name="firstColor"/>        <attr name="secondColor"/>        <attr name="circleWidth"/>        <attr name="speed"/>    </declare-styleable></resources>

自定义View，并且使用自定义的View

public class ProgressView extends View {    /**     * 第一圈的颜色     */    private int mFirstColor;    /**     * 第二圈的颜色     */    private int mSecondColor;    /**     * 圈的宽度     */    private int mCircleWidth;    /**     * 画笔     */    private Paint mPaint;    /**     * 当前进度     */    private int mProgress;    /**     * 速度     */    private int mSpeed;    /**     * 是否应该开始下一个     */    private boolean isNext = false;    public ProgressView(Context context) {        this(context, null);    }    public ProgressView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.progressStyle,defStyleAttr,0);        int n = typedArray.getIndexCount();        for (int i =0 ;i < n ; i ++){            int attr =typedArray.getIndex(i);            switch (attr){//这里的0,1,2，3对应attrs中declare-styleable name="progressStyle"数组元素的顺序，我是为了举例方便，实际开发中不要这样写                case 0:                    mFirstColor = typedArray.getColor(attr, Color.BLACK);                    break;                case 1:                    mSecondColor = typedArray.getColor(attr, Color.RED);                    break;                case 2:                    mCircleWidth = typedArray.getDimensionPixelSize(attr,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16,getResources().getDisplayMetrics()));                    break;                case 3:                    mSpeed = typedArray.getInt(attr,20);                    break;            }        }        typedArray.recycle();        mPaint = new Paint();        startMyThread();    }    @Override    protected void onDraw(Canvas canvas) {        int center = getWidth() / 2; // 获取圆心的x坐标        int radius = (center - mCircleWidth)/2 ;// 半径        mPaint.setAntiAlias(true);        mPaint.setStrokeWidth(mCircleWidth);        mPaint.setStyle(Paint.Style.STROKE);        RectF rectf = new RectF(center-radius,center-radius,center+radius,center+radius);//颜色的切换        if(!isNext){            canvas.save();            mPaint.setColor(mFirstColor);// 设置圆环的颜色            canvas.drawCircle(center,center,radius,mPaint);//划出圆圈            mPaint.setColor(mSecondColor);            canvas.drawArc(rectf,-90,mProgress,false,mPaint);//根据进度画圆弧            canvas.restore();        }else {            canvas.save();            mPaint.setColor(mSecondColor);// 设置圆环的颜色            canvas.drawCircle(center,center,radius,mPaint);            mPaint.setColor(mFirstColor);            canvas.drawArc(rectf,-90,mProgress,false,mPaint);            canvas.restore();        }    }    private void startMyThread() {        new Thread(new Runnable() {            @Override            public void run() {                while (true){                    mProgress++;//进度                    if(mProgress == 360){//当360度时候值变为初始状态                        mProgress = 0;                        if(!isNext){//设置是否切换颜色开关                            isNext = true;                        }else {                            isNext = false;                        }                    }                    postInvalidate();                    try {                        Thread.sleep(mSpeed);                    }catch (InterruptedException e){                        e.printStackTrace();                    }                }            }        }).start();;    }<strong></strong>

以上代码就是自定义View的全部代码，使用的话没什么多说的直接在Xml中引用这个新建的ProgressView就可以了

重画ondraw 不多解释直接看代码

 @Override    protected void onDraw(Canvas canvas) {        int center = getWidth() / 2; // 获取圆心的x坐标        int radius = (center - mCircleWidth)/2 ;// 半径        mPaint.setAntiAlias(true);        mPaint.setStrokeWidth(mCircleWidth);        mPaint.setStyle(Paint.Style.STROKE);        RectF rectf = new RectF(center-radius,center-radius,center+radius,center+radius);        if(!isNext){            canvas.save();            mPaint.setColor(mFirstColor);// 设置圆环的颜色            canvas.drawCircle(center,center,radius,mPaint);//划出圆圈            mPaint.setColor(mSecondColor);            canvas.drawArc(rectf,-90,mProgress,false,mPaint);//根据进度画圆弧            canvas.restore();        }else {            canvas.save();            mPaint.setColor(mSecondColor);// 设置圆环的颜色            canvas.drawCircle(center,center,radius,mPaint);            mPaint.setColor(mFirstColor);            canvas.drawArc(rectf,-90,mProgress,false,mPaint);            canvas.restore();        }    }

效果是不是和progress相似呢，自己试试看吧

因为有的人说效果很生硬，我就做了个完整的gif图，速度是可以调节的，根据不同的速度值，移动可以调剂频率

0 0