Android自定义View之圆环交替 等待效果

　　学习了前面两篇的知识，对于本篇实现的效果，相信大家都不会感觉太困难，我要实现的效果是什么样呢？下面请先看效果图：

　　

　　看上去是不很炫的样子，它的实现上也不是很复杂，重点在与onDraw()方法的绘制。

　　首先是我们的attrs文件：

<?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="CustomView">
        <attr name="firstColor" />
        <attr name="secondColor" />
        <attr name="circleWidth" />
        <attr name="speed" />
    </declare-styleable>

</resources>

　　接下来是我们重写View类的自定义View类：

public class MySelfCircleView extends View {

    /*
     * 第一圈颜色
     */
    int firstColor;
    /*
     * 第二圈颜色
     */
    int secondColor;
    /*
     * 圆的宽度
     */
    int circleWidth;
    /*
     * 速率
     */
    int speed;
    /*
     * 画笔
     */
    Paint mPaint;
    /*
     * 进度
     */
    int mProgress;
    /*
     * 是否切换标志
     */
    boolean isNext;

    public MySelfCircleView(Context context, AttributeSet attrs,
            int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomView, defStyleAttr, 0);
        int n = typedArray.getIndexCount();
        for(int i=0; i<n; i++){
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.CustomView_firstColor:
                    firstColor = typedArray.getColor(attr, Color.RED);
                    break;
                case R.styleable.CustomView_secondColor:
                    secondColor = typedArray.getColor(attr, Color.RED);
                    break;
                case R.styleable.CustomView_circleWidth:
                    circleWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
                case R.styleable.CustomView_speed:
                    speed = typedArray.getInt(attr, 20);
                    break;
            }
        }
        typedArray.recycle();

        mPaint = new Paint();
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (true) {
                    mProgress++;
                    if (mProgress == 360) {
                        mProgress = 0;
                        if (!isNext)
                            isNext = true;
                        else
                            isNext = false;
                    }
                    postInvalidate();
                    try {
                        Thread.sleep(speed);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }

    public MySelfCircleView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MySelfCircleView(Context context) {
        this(context, null);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        int centre = getWidth() / 2; // 获取圆心的x坐标
        int radius = centre - circleWidth / 2;// 半径
        mPaint.setStrokeWidth(circleWidth); // 设置圆环的宽度
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStyle(Paint.Style.STROKE); // 设置空心
        RectF oval = new RectF(centre - radius, centre - radius, centre + radius, centre + radius); // 用于定义的圆弧的形状和大小的界限
        if (!isNext) {// 第一颜色的圈完整，第二颜色跑
            mPaint.setColor(firstColor); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
            mPaint.setColor(secondColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
        } else {
            mPaint.setColor(secondColor); // 设置圆环的颜色
            canvas.drawCircle(centre, centre, radius, mPaint); // 画出圆环
            mPaint.setColor(firstColor); // 设置圆环的颜色
            canvas.drawArc(oval, -90, mProgress, false, mPaint); // 根据进度画圆弧
        }
    }

}

　　最后是我们的布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:zhy="http://schemas.android.com/apk/res/com.example.myselfview"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.myselfview.view.MySelfCircleView
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginTop="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        zhy:circleWidth="15dp"
        zhy:firstColor="#D4F668"
        zhy:secondColor="#2F9DD2"
        zhy:speed="10" /> 

    <com.example.myselfview.view.MySelfCircleView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        zhy:circleWidth="24dp"
        android:layout_marginBottom="40dp"
        zhy:firstColor="#16A3FA"
        zhy:secondColor="#D20F02"
        zhy:speed="5" />  

</RelativeLayout>

　　好了，到这里我们的效果就算大工告成，新童鞋的可以写写看，个人感觉自定义View需要大量的联系，才能为我所用。