效果展示

實現步驟

1、初始化變數

    //-------------必須給的資料相關-------------
    private String[] str = new String[]{"一年級", "二年級", "三年級", "四年級", "五年級", "六年級"};
    //分配比例大小，總比例大小為100
    private int[] strPercent = new int[]{10, 25, 18, 41, 2, 5};
    //圓的直徑
    private float mRadius = 300;
    //圓的粗細
    private float mStrokeWidth = 40;
    //文字大小
    private int textSize = 20;
    //-------------畫筆相關-------------
    //圓環的畫筆
    private Paint cyclePaint;
    //文字的畫筆
    private Paint textPaint;
    //標註的畫筆
    private Paint labelPaint;
    //-------------顏色相關-------------
    //邊框顏色和標註顏色
    private int[] mColor = new int[]{0xFFF06292, 0xFF9575CD, 0xFFE57373, 0xFF4FC3F7, 0xFFFFF176, 0xFF81C784};
    //文字顏色
    private int textColor = 0xFF000000;
    //-------------View相關-------------
    //View自身的寬和高
    private int mHeight;
    private int mWidth;
 

標註：文字前面的圓點。

分配比例大小：由於需要計算圓環掃過的角度，計算方法使用：（比例/100）*360度，用百分比算出360度佔用了多少，由於比例/100的結果一直是0，所以換一種方法：（比例*360度）/100，先乘後除，但是這樣會導致沒辦法獲得100/100的值，所以我們分配比例大小的總和為101.

2、獲取寬和高

    public MyChatView(Context context) {
        super(context);
    }

    public MyChatView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyChatView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }
 

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //移動畫布到圓環的左上角
        canvas.translate(mWidth / 2 - mRadius / 2, mHeight / 2 - mRadius / 2);
        //初始化畫筆
        initPaint();
        //畫圓環
        drawCycle(canvas);
        //畫文字和標註
        drawTextAndLabel(canvas);
    }

    /**
     * 初始化畫筆
     */
    private void initPaint() {
        //邊框畫筆
        cyclePaint = new Paint();
        cyclePaint.setAntiAlias(true);
        cyclePaint.setStyle(Paint.Style.STROKE);
        cyclePaint.setStrokeWidth(mStrokeWidth);
        //文字畫筆
        textPaint = new Paint();
        textPaint.setAntiAlias(true);
        textPaint.setColor(textColor);
        textPaint.setStyle(Paint.Style.STROKE);
        textPaint.setStrokeWidth(1);
        textPaint.setTextSize(textSize);
        //標註畫筆
        labelPaint = new Paint();
        labelPaint.setAntiAlias(true);
        labelPaint.setStyle(Paint.Style.FILL);
        labelPaint.setStrokeWidth(2);
    }

    /**
     * 畫圓環
     *
     * @param canvas
     */
    private void drawCycle(Canvas canvas) {
        float startPercent = 0;
        float sweepPercent = 0;
        for (int i = 0; i < strPercent.length; i++) {
            cyclePaint.setColor(mColor[i]);
            startPercent = sweepPercent + startPercent;
            //這裡採用比例佔100的百分比乘於360的來計算出佔用的角度，使用先乘再除可以算出值
            sweepPercent = strPercent[i] * 360 / 100;
            canvas.drawArc(new RectF(0, 0, mRadius, mRadius), startPercent, sweepPercent, false, cyclePaint);
        }
    }

    /**
     * 畫文字和標註
     *
     * @param canvas
     */
    private void drawTextAndLabel(Canvas canvas) {
        for (int i = 0; i < strPercent.length; i++) {
            //文字離右邊環邊距為60，文字與文字之間的距離為40
            canvas.drawText(str[i], mRadius + 60, i * 40, textPaint);
            //畫標註,標註離右邊環邊距為40,y軸則要減去半徑（10）的一半才能對齊文字
            labelPaint.setColor(mColor[i]);
            canvas.drawCircle(mRadius + 40, i * 40 - 5, 10, labelPaint);
        }
    }
 

原理分析

1、畫布移到圓環的左上角，為（0，0）。

2、畫圓環：使用drawArc方法畫出一個直徑為mRadius的圓環，從初始角度開始，掃過多少角度。這裡使用初始角度的遞增方法使圓環一段接上一段的畫出來。如果想讓圓環旋轉起來，就修改startPercent的值即可。

3、畫文字和標註：將文字和標註畫於圓環的右上角，也即圓的直徑加上一段間距即可，同理，標註也是。

原始碼下載