現在應用裡面整合圖表是很常見的事了，簡單、直觀能給使用者更直觀的感受，包括支付寶，招商銀行App等，雖然有很多第三方的圖示庫，但是自己實現一個是不是很有成就感？主要優勢還是體現在自己可以實現一些特殊需求以及自己實現程式碼量小，不到150行。現在我們就來一步一步實現一個帶動畫的圓環圖，先放效果圖。

初始化一些值

privatestatic final String TAG = "RingView";

    private Paint mPaint;

    private Context mContext;

    //繪製區域寬

    private float mWidth;

    //繪製區域高

    private float mHeight;

    //外圓直徑

    private float mOuterRing;

    //顏色

    private int[] colors = newint[]{0xFFF9A947, 0xFFe57646, 0xFF1E71BC, 0xFF428BFE};

    //繪製區域正方形

    private RectF mRectF;

    //各繪製角度集合

    private List<Float> mListAcr;

    //內圈大小

    private float mInnerRing;

//繪製的進度

    private float mStartAcr = 1f;

    public RingView(Context context) {

        super(context, null, 0);

    }

    public RingView(Context context,AttributeSet attrs) {

        this(context, attrs, 0);

    }

    public RingView(Context context,AttributeSet attrs, int defStyleAttr) {

        super(context, attrs, defStyleAttr);

        mListAcr = new ArrayList<>();

        mContext = context;

        mPaint = new Paint();

        mPaint.setDither(true);

        mPaint.setAntiAlias(true);

        TypedArray typedArray =context.obtainStyledAttributes(attrs, R.styleable.RingView);

        mOuterRing =typedArray.getDimension(R.styleable.RingView_outer_ring_radius, 0);

        mInnerRing =typedArray.getDimension(R.styleable.RingView_inner_ring_radius, 0);

    }

    @Override

    protected void onMeasure(intwidthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec,heightMeasureSpec);

        mWidth = getMeasuredWidth();

        mHeight = getMeasuredHeight();

        float left = (mWidth - mOuterRing) / 2;

        float top = (mHeight - mOuterRing) / 2;

        mRectF = new RectF(left, top, mWidth -left, mHeight - top);

    }

佈局檔案：

<?xmlversion="1.0" encoding="utf-8"?>

<LinearLayout

   xmlns:android="http://schemas.android.com/apk/res/android"

   xmlns:app="http://schemas.android.com/apk/res-auto"

   android:layout_width="match_parent"

   android:layout_height="match_parent"

    android:gravity="center"

   android:orientation="vertical">

    <com.example.sheteng.ringview.RingView

        android:layout_width="90dp"

        android:id="@+id/ringview"

        android:layout_height="90dp"

        app:inner_ring_radius="30dp"

        app:outer_ring_radius="90dp"

       />

    <Button

       android:layout_marginTop="20dp"

       android:layout_width="wrap_content"

       android:layout_height="wrap_content"

        android:onClick="showRing"

        android:text="點我"/>

</LinearLayout>

首先是計算部分，計算各個色塊佔據的角度，儲存到一個集合裡面

publicvoid initData(List<Float> list) {

        mListAcr.clear();

        if (list == null) {

            return;

        }

        float total = 0;

        for (Float integer : list) {

            total += integer;

        }

        if (total > 0) {

            float totalAcr = 0;

            for (int i = 0; i < list.size();i++) {

                float acr = (list.get(i) /total) * 360;

                if (i == list.size() - 1) {

                    acr = 360 - totalAcr;

                }

                totalAcr += acr;

                mListAcr.add(acr);

            }

        }

        invalidate();

    }

接下來考慮怎麼畫成圓餅，我這裡採用的是先畫成扇形，再在中間畫一個一個小白圓，疊加成為圓環，

@Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int total = 0;

        for (int i = 0; i < mListAcr.size();i++) {

            mPaint.setColor(colors[i]);

            if (mListAcr.get(i) == 0) {

                continue;

            }

            float endAcr = mListAcr.get(i);

            canvas.drawArc(mRectF, 270 + total,endAcr, true, mPaint);

               total += mListAcr.get(i);

        }

        mPaint.setColor(Color.WHITE);

        canvas.drawCircle(mWidth / 2, mHeight /2, mInnerRing / 2, mPaint);

    }

這樣的效果如下，是不是還差點什麼？

對，這不是沒動畫麼？動畫採用一次繪製比上一次繪製多幾個角度，一樣一次次繪製下來就形成了動畫。

@Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int total = 0;

        mStartAcr += 3;

        if (mStartAcr > 360) {

            mStartAcr = 360;

        }

        for (int i = 0; i < mListAcr.size();i++) {

            mPaint.setColor(colors[i]);

            if (mListAcr.get(i) == 0) {

                continue;

            }

            float endAcr = mStartAcr - total;

            if (endAcr > mListAcr.get(i)){

                endAcr = mListAcr.get(i);

            }

            canvas.drawArc(mRectF, 270 + total,endAcr, true, mPaint);

            if (mStartAcr >= total +mListAcr.get(i)) {

                total += mListAcr.get(i);

                continue;

            } else {

                break;

            }

        }

        mPaint.setColor(Color.WHITE);

        canvas.drawCircle(mWidth / 2, mHeight /2, mInnerRing / 2, mPaint);

        if (mStartAcr < 360) {

            invalidate();

        }

    }

用mStartAcr記錄繪製的進度一次多繪製3個角度，效果如下：

有沒有覺得這動畫好生硬，我們每次都多畫3個角度當然生硬了，我們把3換成一個漸變值，讓他隨著繪製的進度調整值，先變大在變小，這裡我用的餘弦

@Override

    protected void onDraw(Canvas canvas) {

        super.onDraw(canvas);

        int total = 0;

        mStartAcr += getInterpolation(mStartAcr/ 360f);

        if (mStartAcr > 360) {

            mStartAcr = 360;

        }

        for (int i = 0; i < mListAcr.size();i++) {

            mPaint.setColor(colors[i]);

            if (mListAcr.get(i) == 0) {

                continue;

            }

            float endAcr = mStartAcr - total;

            if (endAcr > mListAcr.get(i)){

                endAcr = mListAcr.get(i);

            }

            canvas.drawArc(mRectF, 270 + total,endAcr, true, mPaint);

            if (mStartAcr >= total +mListAcr.get(i)) {

                total += mListAcr.get(i);

                continue;

            } else {

                break;

            }

        }

        mPaint.setColor(Color.WHITE);

        canvas.drawCircle(mWidth / 2, mHeight /2, mInnerRing / 2, mPaint);

        if (mStartAcr < 360) {

            invalidate();

        }

    }

    /**

     * 生成插值

     */

    public float getInterpolation(float input){

        double cos = Math.cos(input * Math.PI);

        return (float) ((1f - Math.abs(cos)) *6 + 3f);

    }

這樣就達到我們前面放的效果圖，大功告成了！

完整的專案地址：https://github.com/sheteng63/RingView

期待你們的star，如有問題，敬請指正！