IOS效果圖如下：

EBA63DDEE18F4952A4EA1D4477613BE6.png

Android自定義view效果圖如下

74FB14B4AC26A02B95E8666B29B7E4F9.jpg

自定義圓環(huán)比例控件類

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.util.AttributeSet;
import android.view.View;

public class CircleScaleView extends View {
    private int firstColor;//第一段顏色
    private int secondColor;//第二段顏色
    private int thirdlyColor;//第三段顏色
    private Paint mPaint;//畫筆
    private int mRadius;//半徑
    private float mCircleWidth;//圓環(huán)的寬度
    private int mWidth;
    private int mHeight;
    private RectF mRectF;
    private float sweepAngle;//繪制圓環(huán)的角度
    private float firstPercent;//第一段比例
    private float secondPercent;//第二段比例
    private float thirdlyPercent;//第三段比例

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

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

    public CircleScaleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CircleScaleView, defStyleAttr, 0);
        int n = array.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = array.getIndex(i);
            switch (attr) {
                case R.styleable.CircleScaleView_firstColor:
                    firstColor = array.getColor(attr, Color.parseColor("#fac62d"));
                    break;
                case R.styleable.CircleScaleView_secondColor:
                    secondColor = array.getColor(attr, Color.parseColor("#65cff6"));
                    break;
                case R.styleable.CircleScaleView_thirdlyColor:
                    thirdlyColor = array.getColor(attr, Color.parseColor("#fe9a9c"));
                    break;
                case R.styleable.CircleScaleView_circleWidth:
                    mCircleWidth = array.getDimensionPixelSize(attr, dip2px(context, 20));
                    break;
                case R.styleable.CircleScaleView_radius:
                    mRadius = array.getDimensionPixelSize(attr, dip2px(context, 20));
                    break;
            }
        }
        array.recycle();
        initPaint();
    }

    //初始化畫筆
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    //設(shè)置圓環(huán)各段比例
    public void setCirclePercent(float first, float second, float thirdly) {
        float total = first + second + thirdly;
        firstPercent = first / total;
        secondPercent = second / total;
        thirdlyPercent = thirdly / total;
        invalidate();//重繪
    }

    //繪制圓環(huán)
    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStrokeWidth(mCircleWidth);
        mRectF = new RectF(mCircleWidth / 2, mCircleWidth / 2, mRadius * 2 - mCircleWidth / 2, mRadius * 2 - mCircleWidth / 2);
        //第一段圓環(huán)繪制
        float startAngle = -90;
        sweepAngle = 360 * firstPercent;
        mPaint.setColor(firstColor);
        canvas.drawArc(mRectF, startAngle, sweepAngle, false, mPaint);
        //第二段圓環(huán)繪制
        startAngle = startAngle + sweepAngle;
        sweepAngle = 360 * secondPercent;
        mPaint.setColor(secondColor);
        canvas.drawArc(mRectF, startAngle, sweepAngle, false, mPaint);
        //第三段圓環(huán)繪制
        startAngle = startAngle + sweepAngle;
        sweepAngle = 360 * thirdlyPercent;
        mPaint.setColor(thirdlyColor);
        canvas.drawArc(mRectF, startAngle, sweepAngle, false, mPaint);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //設(shè)置寬度
        int specMode = MeasureSpec.getMode(widthMeasureSpec);
        int specSize = MeasureSpec.getSize(widthMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mWidth = (int) (specSize + mCircleWidth);
        } else {
            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mWidth = (mRadius * 2);
            }
        }
        //設(shè)置高度
        specMode = MeasureSpec.getMode(heightMeasureSpec);
        specSize = MeasureSpec.getSize(heightMeasureSpec);
        if (specMode == MeasureSpec.EXACTLY)// match_parent , accurate
        {
            mHeight = (int) (specSize + mCircleWidth);
        } else {
            if (specMode == MeasureSpec.AT_MOST)// wrap_content
            {
                mHeight = (mRadius * 2);
            }
        }
        setMeasuredDimension(mWidth + 10, mHeight + 10);
    }

    //根據(jù)手機的分辨率從 dp 的單位 轉(zhuǎn)成為 px(像素)
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

styleable添加屬性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleScaleView">
        <attr name="firstColor" format="color|reference" />
        <attr name="secondColor" format="color|reference" />
        <attr name="thirdlyColor" format="color|reference" />
        <attr name="circleWidth" format="dimension" />
        <attr name="radius" format="dimension" />
    </declare-styleable>
</resources>

xml使用控件

    <com.codans.circlescale.CircleScaleView
        android:id="@+id/circleScaleView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:circleWidth="6dp"
        app:firstColor="#ff00ff"
        app:radius="100dp"
        app:secondColor="#a286da"
        app:thirdlyColor="#65cff6" />

在代碼中中設(shè)置比例

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    private CircleScaleView circleScaleView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleScaleView = (CircleScaleView) findViewById(R.id.circleScaleView);
        if (circleScaleView != null) {
            circleScaleView.setCirclePercent(1, 2, 2);
        }
    }
}