弧线展示图

在理财或者健康等相关的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;
    }
}

拓展

可以自定义属性，设置view的宽度、圆形的颜色半径、外圈的颜色宽度和文字的颜色大小等，由于简单，这里就不进行拓展了。