繼承View基類，畫了這樣的扇形圖

粗糙的樣子^_^

直接來步驟吧

(參考了GcsSloop的教程)

1.分析

自定義View需要認真的分析下，里面還是會用到一些數學知識

• 首先是扇形該怎么表現
  1. 扇形的外觀是個圓弧，而且是圍繞一個中心點旋轉一定角度構成的
  2. View主要的繪制都是通過畫布(canvas)進行，canvas里提供了許多繪制的方法。其中有一個
  drawArc()畫圓弧的方法。

    public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint) {
            drawArc(oval.left, oval.top, oval.right, oval.bottom, startAngle, sweepAngle, useCenter,paint);
    }   
  

這個方法就給畫扇形提供了捷徑。

• 發現里面有個RectF參數，隱約有點是矩形的感覺，網查一下：
  這個類包含一個矩形的四個單精度浮點坐標。矩形通過上下左右4個邊的坐標來表示一個矩形

參數說明一下：

• oval :指定圓弧的外輪廓矩形區域
• startAngle: 圓弧起始角度，單位為度。
• sweepAngle: 圓弧掃過的角度，順時針方向，單位為度。
• useCenter: 如果為True時，在繪制圓弧時將圓心包括在內，通常用來繪制扇形。
• paint: 繪制圓弧的畫筆屬性，如顏色，是否填充等。

cu cao的分析^_^

1.1 分析需要哪些數據

參照上面的畫圓弧函數的參數需求和上面那個結(cu)果(cao)圖

要使用canvas畫扇形需要這些參數吧

• 外輪廓矩形
• 起始角度
• 掃過的角度
• 畫筆

再看上面那個結(cu)果(cao)圖，還需要

• 顏色
• 文字

這樣就可以定義一個數據結構了

public class ViewData {
        public String name; //名字
        public int value;   //數值

        public int color;   //顏色
        public float percentage; //百分比
        public float angle; //角度

        public ViewData(int value, String name) {
        this.value = value;
        this.name = name;
        }
}

1.2 角度計算

扇形圖應該反應的是里面每塊扇形占總數的百分比，在我們的數據結構里應該是通過數值(value)計算出扇形區域占總體的比例和掃過的角度

• 比例 = 數值 / 各塊數值之和
• 角度 = 比例 x 圓周(360度)

1.3 文字位置確定

文字不像扇形區域可以直接調用畫布的圓弧方法繪制，文字使用畫布的drawText()方法

public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) {
        ......
    }

查看源碼可知需要傳遞字符內容、x坐標、y坐標和畫筆，字符內容和畫筆容易，就是坐標位置我們要好好想想

文字位置

需要注意這里的文字的位置坐標都是基于canvas為父元素的

回到以前的數學應用題，先擺出我們有哪些已知量

• 扇形圓的半徑
• 每塊扇形的掃過的角度
• 起始的角度

文字位置

new

想想根據這些數據，應該可以求出文字位置(上圖黑圓點)的坐標

• 文字位置角度 = 起始角度 + 扇形塊角度/2
• 文字x坐標 = 半徑/2 x cos(文字位置角度)
• 文字y坐標 = 半徑/2 x sin(文字位置角度)

分析差不多了，開始實踐了

2 實踐

2.1 數據結構

public class ViewData {
    public String name; //名字
    public int value;   //數值

    public int color;   //顏色
    public float percentage; //百分比
    public float angle; //角度

    public ViewData(int value, String name) {
    this.value = value;
    this.name = name;
    }
}

2.2 View實現

先來一張圖鎮店

圖片來自@GcsSloop

public class MyView extends View {
        private int[] mColors = {Color.BLUE, Color.DKGRAY, Color.CYAN, Color.RED, Color.GREEN};
        private Paint paint;    //畫筆
        private ArrayList<ViewData> viewDatas;    //數據集
        private int w;          //View寬高
        private int h;
        private RectF rectF;    //矩形

    public MyView(Context context) {
        super(context);
        initPaint();    //設置畫筆
    }

    //設置數據
    public void setData(ArrayList<ViewData> viewDatas) {
        this.viewDatas = viewDatas;
        initData();     //設置數據的百分度和角度
        invalidate();   //刷新UI
    }

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

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

    //初始化畫筆
    private void initPaint() {
        paint = new Paint();
        //設置畫筆默認顏色
        paint.setColor(Color.WHITE);
        //設置畫筆模式：填充
        paint.setStyle(Paint.Style.FILL);
        //
        paint.setTextSize(30);
        //初始化區域
        rectF = new RectF();
    }

    //確定View大小
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        this.w = w;     //獲取寬高
        this.h = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.translate(w / 2, h / 2);             //將畫布坐標原點移到中心位置
        float currentStartAngle = 0;                //起始角度
        float r = (float) (Math.min(w, h) / 2);     //餅狀圖半徑(取寬高里最小的值)
        rectF.set(-r, -r, r, r);                    //設置將要用來畫扇形的矩形的輪廓
        for (int i = 0; i < viewDatas.size(); i++) {
            ViewData viewData = viewDatas.get(i);
            paint.setColor(viewData.color);
            //繪制扇形(通過繪制圓弧)
            canvas.drawArc(rectF, currentStartAngle, viewData.angle, true, paint);
            //繪制扇形上文字
            float textAngle = currentStartAngle + viewData.angle / 2;    //計算文字位置角度
            paint.setColor(Color.BLACK);
            float x = (float) (r / 2 * Math.cos(textAngle * Math.PI / 180));    //計算文字位置坐標
            float y = (float) (r / 2 * Math.sin(textAngle * Math.PI / 180));
            paint.setColor(Color.YELLOW);        //文字顏色
            canvas.drawText(viewData.name, x, y, paint);    //繪制文字

            currentStartAngle += viewData.angle;     //改變起始角度
        }
    }

    private void initData() {
        if (null == viewDatas || viewDatas.size() == 0) {
            return;
        }

        float sumValue = 0;                 //數值和
        for (int i = 0; i < viewDatas.size(); i++) {
                ViewData viewData = viewDatas.get(i);
                sumValue += viewData.value;
                int j = i % mColors.length;     //設置顏色
                viewData.color = mColors[j];
        }

        for (ViewData data : viewDatas) {
            float percentage = data.value / sumValue;    //計算百分比
            float angle = percentage * 360;           //對應的角度
            data.percentage = percentage;
            data.angle = angle;
        }
    }
}

最終實現效果就是開(cu)頭(cao)那張了，自定義View還有很長路要走

完整代碼請移步這里