弧線展示圖

在理財或者健康等相關的app中，經常有弧線佔比的view出現。

將該view分成三個部分就容易多了，分別是：中間的圓形、中間顯示的文字和外圈的弧線。這裏是把View繪製的長度設置爲了屏幕的寬度。

public class ScaleView extends View {
    private int mLength;
    private int widthSize;
    private float mSweepAngle;
    private float mSweepValue;
    private String mText;
    private Paint paint;
    private Paint paintArc;
    private Paint paintText;
    private int degree;
    public ScaleView(Context context) {
        this(context, null);
    }

    public ScaleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ScaleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData();
    }

    private void initData() {
        paint = new Paint();
        paint.setColor(Color.BLUE);

        paintArc = new Paint();
        paintArc.setColor(Color.GRAY);
        /**
         * 只繪製邊緣部分，中間內容不繪製，可以用作繪製空心圓
         */
        paintArc.setStyle(Paint.Style.STROKE);
        /**
         * 設置描邊寬度
         */
        paintArc.setStrokeWidth(100);

        paintText = new Paint();
        paintText.setColor(Color.GRAY);
        paintText.setTextSize(100);
        /**
         * 畫出的文字以基準點爲中心
         */
        paintText.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        widthSize = MeasureSpec.getSize(widthMeasureSpec);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        initDrawData();
        canvas.drawCircle(mLength /2, mLength /2, mLength /4, paint);
        /**
         * drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
         *
         * oval 指定圓弧的外輪廓矩形區域
         * startAngle 圓弧起始角度，單位爲度
         * sweepAngle 圓弧掃過的角度，順時針方向，單位爲度，從右中間開始爲零度（類似座標系中的x軸正方向）
         * useCenter 如果爲True時，在繪製圓弧時將圓心包括在內，通常用來繪製扇形
         * paint 繪製圓弧的畫板屬性，如顏色，是否填充
         */
        getSweepAngle();
        RectF rectF = new RectF((float) (mLength * 0.1),
                (float) (mLength * 0.1),
                (float) (mLength *0.9),
                (float) (mLength *0.9));
        degree+=10;
        canvas.drawArc(rectF, 270, degree, false, paintArc);
        /**
         * drawText(String text, int start, int end, float x, float y, Paint paint)
         *
         * start text的要畫的第一個下標
         * end text的要畫的最後一個下標
         * x x軸方向的基準線
         * y y軸方向的基準線
         * paint 畫筆
         */
        canvas.drawText(mText, 0, mText.length(), mLength /2, mLength /2+mText.length()/4, paintText);
        /**
         * 添加動態畫外圈效果
         */
        if (degree<mSweepAngle){
            postInvalidateDelayed(10);
        }
    }

    private void initDrawData() {
        mLength = widthSize;
    }

    public void getSweepAngle(){
        mSweepAngle = mSweepValue*360/100;
    }

    /**
     * 設置圓弧的佔比，50就是佔了50%
     * @param sweepValue
     */
    public void setSweepValue(float sweepValue){
        if (sweepValue!=0){
            mSweepValue = sweepValue;
        }else {
            mSweepValue = 25;
        }
        this.invalidate();
    }

    /**
     * 畫出圓形內部的文字
     * @param word
     */
    public void setText(String word){
        mText = word;
    }
}