ezgif-1-5b04cb624e.gif

1.首先设置自定义属性

    <declare-styleable name="CircleProgressView">
        <attr name="textColor"/>
        <attr name="textSize"/>
        <attr name="outCircleColor"/>
        <attr name="inCircleColor"/>
        <attr name="circle_padding"/>
        <attr name="innerCircleWidth"/>
    </declare-styleable>

    <attr name="textColor" format="color"/>
    <attr name="textSize" format="dimension"/>
    <attr name="outCircleColor" format="color"/>
    <attr name="inCircleColor" format="color"/>
    <attr name="circle_padding" format="dimension"/>
    <attr name="innerCircleWidth" format="dimension"/>

2.在构造方法取出并赋值

    <com.chinamall21.mobile.animstudy.view.CircleProgressView
        android:layout_centerInParent="true"
        app:inCircleColor="#e96908"
        app:outCircleColor="#92e210"
        app:textColor="#e96908"
        app:textSize="20sp"
        app:circle_padding="20dp"
        app:innerCircleWidth="8dp"
        android:id="@+id/progressview"
        android:layout_width="200dp"
        android:layout_height="200dp">
    </com.chinamall21.mobile.animstudy.view.CircleProgressView>

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressView);
        mOuterColor = ta.getColor(R.styleable.CircleProgressView_outCircleColor, getResources().getColor(R.color.colorAccent));
        mInnerColor = ta.getColor(R.styleable.CircleProgressView_inCircleColor, getResources().getColor(R.color.colorAccent));
        mTextSize = ta.getDimensionPixelSize(R.styleable.CircleProgressView_textSize, 30);
        mTextColor = ta.getColor(R.styleable.CircleProgressView_textColor, getResources().getColor(R.color.colorAccent));
        mCirclePadding = ta.getDimensionPixelOffset(R.styleable.CircleProgressView_circle_padding, 10);
        mInnerCircleWidth = ta.getDimensionPixelOffset(R.styleable.CircleProgressView_innerCircleWidth, 10);
        ta.recycle();
        initPaint();
    }

3.初始化控件大小和画笔

    private void initPaint() {
        mPaint = new Paint();
        //设置抗锯齿
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(mInnerColor);
        mPaint.setTextSize(mTextSize);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int width;
        int height;
        //不确定大小就定为屏幕宽度的一半
        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = widthSize / 2;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = widthSize;
        }
        //设置控件大小
        setMeasuredDimension(width, height);
    }

4.画首先画最外层的空心圆

  canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint);

5.画文字

通过方法 float textWidth = mPaint.measureText(mProgress + "%")测量出文字的宽度

 canvas.drawText(mProgress + "%", (getWidth() - textWidth) / 2, getHeight() / 2, mPaint);

用控件宽度减去文字宽度除以2使文字居中显示

6.完整代码

    @Override
    protected void onDraw(Canvas canvas) {
        mPaint.setStrokeWidth(0);
        canvas.drawCircle(getWidth() / 2, getHeight() / 2, getWidth() / 2, mPaint);
        float textWidth = mPaint.measureText(mProgress + "%");
        mPaint.setColor(mTextColor);
        canvas.drawText(mProgress + "%", (getWidth() - textWidth) / 2, getHeight() / 2, mPaint);
        RectF rectF = new RectF(mCirclePadding, mCirclePadding, getWidth() - mCirclePadding, getHeight() - mCirclePadding);
        Log.e("mCirclePadding", mCirclePadding + "m");
        mPaint.setStrokeWidth(mInnerCircleWidth);
        mPaint.setColor(mInnerColor);
        canvas.drawArc(rectF, -90, 360 * mProgress / 100, false, mPaint);

        if (mProgress < 100) {
            postInvalidateDelayed(100);
            mProgress += 5;
        }

    }

    public void setProgress(int progress) {
        mProgress = progress;
        postInvalidate();
    }