首先在values中的attrs中建立自定義控制元件的屬性

<declare-styleable name="MyView">
        <attr name="my_view_color" format="color"></attr>
        <attr name="my_view_cirle" format="dimension"></attr>
    </declare-styleable>

package com.bruce.testgitdemo.test;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewTreeObserver;

import com.ajie.bootstartdemo.R;

import java.util.ArrayList;


/**
 * 自定義圓環
 */
public class MyView extends View {
    private int color = Color.parseColor("#e8e8e8");   //畫圓的顏色  預設紅色
    private float cirle = 200;   //半徑範圍大小 預設200
    private Paint mPaint;
    private int widthSize,heightSize;    //螢幕寬高
    private int[] colors;   //顏色陣列
    private ArrayList<Float> percents;   //百分比陣列
    private float percent ;   //總共百分比
    private Boolean flag = true;    // 只執行一次
    private float[] step;   //儲存每個圓弧的弧度
    private float[] percentnum ;   //儲存每個圓弧的起始弧度
    private boolean isAnim = false;    //是否使用動畫 預設不使用


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

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

    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.MyView, defStyleAttr, 0);
        int n = a.getIndexCount();
        for (int i = 0;i<n;i++){
            int attr = a.getIndex(i);
            switch (attr){
                case R.styleable.MyView_my_view_color:
                    color = a.getColor(R.styleable.MyView_my_view_color,0);
                    break;
                case R.styleable.MyView_my_view_cirle:
                    cirle= a.getDimension(R.styleable.MyView_my_view_cirle,0f);
                    break;
                default:
                    break;
            }
        }
        a.recycle();
        mPaint = new Paint();
        mPaint.setAntiAlias(true);  //消除鋸齒
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec);
        heightSize = MeasureSpec.getSize(heightMeasureSpec);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //外圈圓
        mPaint.setColor(color);   //預設顏色(底部最初圓環顏色)
        canvas.drawCircle(widthSize/2,heightSize/2,cirle,mPaint);
        RectF oval = new RectF(widthSize/2-cirle, heightSize/2-cirle, widthSize/2+cirle, heightSize/2+cirle);
        if (isAnim){
            addCircleAnim(canvas,oval);
        }else {
            circleNoAnim(canvas,oval);
        }

        //內圈圓
        mPaint.setColor(Color.BLACK);
        canvas.drawCircle(widthSize/2,heightSize/2,cirle-cirle/4,mPaint);



    }

    public int[] getColors() {
        return colors;
    }

    public void setColors(int[] colors) {
        this.colors = colors;
    }

    public ArrayList<Float> getPercents() {
        return percents;
    }

    public void setPercents(ArrayList<Float> percents) {
        this.percents = percents;
    }

    /**
     * 是否使用動畫
     * @param isHaveAnim
     */
    public void setIsHaveAnim(Boolean isHaveAnim){
        if (isHaveAnim){
            this.getViewTreeObserver().addOnPreDrawListener(
                    new ViewTreeObserver.OnPreDrawListener() {
                        public boolean onPreDraw() {
                            new Thread(new CircleThread()).start();
                            getViewTreeObserver().removeOnPreDrawListener(this);
                            return false;
                        }
                    });
        }
        this.isAnim = isHaveAnim;
    }

    /**
     * 檢查百分比是否超過100%
     */
    private float checkPercent(ArrayList<Float> percents){
        if (percents == null){
            Log.d("tag","總百分比為空");
            return 0;
        }
        for (int i = 0;i<percents.size();i++){
            percent += percents.get(i);
        }
        Log.d("tag","percent-----"+percent);
       return percent;
    }

    private class CircleThread implements Runnable {

        @Override
        public void run() {
            // TODO Auto-generated method stub
            while (!Thread.currentThread().isInterrupted()) {
                try {
                    Thread.sleep(20);
                    /**
                     * 在新的執行緒中，傳送訊息給View，更新介面資料
                     * 通過m++實現加速度方式的不斷加速繪製弧形
                     * i代表要繪製扇形的角度大小，0-360
                     */
                    flag = false;
                    m +=2;
                    Message msg = new Message();
                    msg.what = 1;
                    if (i < 360) {
                        i = m;
                    } else {
                        i = 360;
                        return;
                    }
                    msg.obj = i;
                    circleHandler.sendMessage(msg);
                } catch (InterruptedException e) {
                    // TODO Auto-generated catch block
                    e.printStackTrace();
                }
            }
        }

    }

    private Handler circleHandler = new Handler() {

        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what == 1) {
                int temp = (Integer) msg.obj;
                setTemp(temp);
                invalidate();
            }
        }
    };

    private int temp ,i,m ;
    private void setTemp(int temp){
        this.temp = temp;
    }

    /**
     * 帶動畫的畫圓
     * @param canvas
     * @param oval
     */
    private void addCircleAnim(Canvas canvas,RectF oval){
        float nextPercent = 0;
        //初始化賦值，flag = true 只執行一次（有動畫效果）
        if (flag){
            try {
                if (checkPercent(percents)>1) {
                    throw new Exception("百分比不能大於1");
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            step  = new float[percents.size()];
            percentnum = new float[percents.size()];
            for (int i = 0;i<percents.size();i++){
                step[i] = 360*percents.get(i);
                percentnum[i] = nextPercent;
                nextPercent += 360*percents.get(i);
            }
        }else {
            for (int i = 0;i<percents.size();i++){
                if (temp<=step[i]){
                    mPaint.setColor(colors[i]);
                    canvas.drawArc(oval,percentnum[i],temp,true,mPaint);
                }else {
                    mPaint.setColor(colors[i]);
                    canvas.drawArc(oval,percentnum[i],step[i],true,mPaint);
                }
            }
        }
    }

    /**
     * 不帶動畫的畫圓
     * @param canvas
     * @param oval
     */
    private void circleNoAnim(Canvas canvas,RectF oval){
        try {
            if (checkPercent(percents)>1) {
                throw new Exception("百分比不能大於1");
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
        //迴圈畫圓環
        float nowPercent = 0;
        float nextPercent = 0;
        //繪製圓環  （無動畫效果）
        for (int i = 0;i<percents.size();i++){
            mPaint.setColor(colors[i]);
            nextPercent += 360*percents.get(i);
            canvas.drawArc(oval,nowPercent,360*percents.get(i),true,mPaint);     //   360*percents.get(i)此引數寫法對畫圓環很重要
            nowPercent = nextPercent;
        }
    }
}
 

 MyView myView = (MyView) findViewById(R.id.myview);
        myView.setIsHaveAnim(false);
        myView.setColors(colors);
        myView.setPercents(getPercentValue());

 public ArrayList<Float> getPercentValue() {
        ArrayList<Float> list = new ArrayList<>();
//        for (int i = 0;i<5;i++){
//            list.add(0.15f);
//        }
        list.add(0.1f);
        list.add(0.2f);
        list.add(0.3f);
        list.add(0.1f);
        list.add(0.1f);

        return list;
    }