Android繪製自定義餅圖

繪製自定義餅圖

1.先上效果圖：

2.下面分析需要用到的技術點

canvas.translate(100,100);

把當前畫布的原點移到(100,100),後面的操作都以(100,100)作爲參照點，即把（100,100）作爲座標系的（0,0），默認原點爲(0,0)

 canvas.drawArc(rectF, startAngle, swipeAngle, true, mPaint);

說明：

第一個參數rectF，定義的圓弧的形狀和大小的範圍

第二個參數：float startAngle，設置圓弧是從哪個角度來順時針繪畫。

第三個參數：float sweepAngle，設置圓弧掃過的角度。

第四個參數：boolean useCenter，設置我們的圓弧在繪畫的時候，是否經過圓心。

即：爲false時候直接AB相連接，爲true時候ACB連接

第五個參數：畫筆不用說。

3.下面貼一下關鍵代碼

說了上面這麼多相信聰明的你也是可以直接寫出來的。

首先我們定義一些內置的顏色

 private int[] colos = new int[]{0xFF663311, 0xFF6495ED, 0xFFE32636, 0xFF174EF6};

獲取我們設置的view的寬高以及padding

 @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        paddingLeft = getPaddingLeft();
        paddingRight = getPaddingRight();
        paddingBottom = getPaddingBottom();
        paddingTop = getPaddingTop();
        mWith = w;
        mHeight = h;
    }

移動畫布到我們的view的中心位置，這裏注意要減去padding後的中心位置

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (mPieDataBeans.size() < 1) {
            return;
        }
        //canvas.drawRect(0, 0, mWith, mHeight, mPaint);
       
        int realWith = mWith - paddingLeft - paddingRight;
        int realHeight = mHeight - paddingTop - paddingBottom;
        int r = (Math.min(realWith, realHeight)) / 2;
        canvas.translate(paddingLeft + realWith / 2, paddingTop + realHeight / 2);
         


    }

根據傳入的參數動態繪製startAngle與swipeAngle

 RectF rectF = new RectF(-r, -r, r, r);
for (int i = 0; i < mPieDataBeans.size(); i++) {
            swipeAngle = mPieDataBeans.get(i).getNum() * 360 / total;
            mPaint.setColor(colos[mPieDataBeans.get(i).getColor()]);
            canvas.drawArc(rectF, startAngle, swipeAngle, true, mPaint);
            startAngle = startAngle + swipeAngle;


        }

說明：其中的total爲傳的list集合的總數量，mPieDataBeans.get(i).getNum()爲每個數據自己的值， swipeAngle = mPieDataBeans.get(i).getNum() * 360 / total;這個方法就可以算出每個值應該掃過的角度。每循環一次startAngle 就要重新計算起始位置，startAngle = startAngle + swipeAngle; mPaint.setColor(colos[mPieDataBeans.get(i).getColor()]);，這個是根據傳入的編號獲取對應的顏色，設置畫筆顏色。

外部暴露方法

 public void setPieData(List<PieDataBean> data) {
        this.mPieDataBeans = data;
        total = 0;
        initData();
        invalidate();
    }

每次設置數據，記得調用一下invalidate();，我這個 initData();主要是計算total的值。

每次設置數據，記得調用一下invalidate();，我這個 initData();主要是計算total的值。

好了就到這兒了，講完了，大家試一下吧，下期增加標註信息。