整理總結自鴻洋的部落格：http://blog.csdn.net/lmj623565791/article/details/24500107

要實現的效果如圖：

分析一下，需要這麼幾個屬性：兩個顏色、一個速度、一個圓環寬度

com.cctvjiatao.customview03.act.MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
 

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <attr name="colorFirst" format="color" />
    <attr name="colorSecond" format="color" />
    <attr name="speed" format="integer" />
    <attr name="ringWidth" format="dimension" />
    <declare-styleable name="RunningRing">
        <attr name="colorFirst" />
        <attr name="colorSecond" />
        <attr name="speed" />
        <attr name="ringWidth" />
    </declare-styleable>
</resources>
 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ring="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".act.MainActivity">

    <com.cctvjiatao.customview03.view.RunningRing
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        ring:colorFirst="#ff0000"
        ring:colorSecond="#00ff00"
        ring:ringWidth="10dp"
        ring:speed="20" />

    <com.cctvjiatao.customview03.view.RunningRing
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_horizontal"
        ring:colorFirst="#ffff00"
        ring:colorSecond="#00ffff"
        ring:ringWidth="30dp"
        ring:speed="2" />
</LinearLayout>
 

public class RunningRing extends View {

    private int mColorFirst;
    private int mColorSecond;
    private int mSpeed;
    private int mRingWidth;

    private boolean isNext;
    private int mProgress;
    private Paint mPaint;

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

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

    public RunningRing(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RunningRing, defStyleAttr, 0);
        int n = typedArray.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = typedArray.getIndex(i);
            switch (attr) {
                case R.styleable.RunningRing_colorFirst:
                    mColorFirst = typedArray.getColor(attr, Color.BLACK);
                    break;
                case R.styleable.RunningRing_colorSecond:
                    mColorSecond = typedArray.getColor(attr, Color.BLUE);
                    break;
                case R.styleable.RunningRing_speed:
                    mSpeed = typedArray.getInt(attr, 1);
                    break;
                case R.styleable.RunningRing_ringWidth:
                    mRingWidth = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                            TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
                    break;
            }
        }
        typedArray.recycle();
        mPaint = new Paint();

        //繪圖執行緒
        new Thread() {
            public void run() {
                while (true) {
                    mProgress++;
                    if (mProgress == 360) {
                        mProgress = 0;
                        if (isNext) {
                            isNext = false;
                        } else {
                            isNext = true;
                        }
                    }
                    postInvalidate();
                    try {
                        Thread.sleep(mSpeed);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }.start();
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        int centre = getWidth() / 2;//圓心
        int radius = centre - mRingWidth / 2;//半徑
        mPaint.setStyle(Paint.Style.STROKE);//空心圓
        mPaint.setStrokeWidth(mRingWidth);
        mPaint.setAntiAlias(true);
        RectF rectF = new RectF(centre - radius, centre - radius, centre + radius, centre + radius);

        if (!isNext) {//第一顏色的圈完整，第二顏色跑
            mPaint.setColor(mColorFirst);
            canvas.drawCircle(centre, centre, radius, mPaint);// 畫出圓環
            mPaint.setColor(mColorSecond);
            canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根據進度畫圓弧
        } else {
            mPaint.setColor(mColorSecond);
            canvas.drawCircle(centre, centre, radius, mPaint);// 畫出圓環
            mPaint.setColor(mColorFirst);
            canvas.drawArc(rectF, -90, mProgress, false, mPaint);// 根據進度畫圓弧
        }

    }
}