自定义环形进度条控件

前面一篇文章讲解了自定义属性的使用，接着上篇的文章，继续完成CustomProgressBar3这个自定义view。

public class CustomProgerssBar3 extends View {

    private final int roundColor;
    private final int roundProgressColor;
    private final float roundWidth;
    private final float textSize;
    private final int textColr;
    private final boolean textShow;
    private final int STROKE = 0;
    private final int FILL = 1;
    private final int style;
    private final int max;
    private final int paddingRight;
    private final int paddingBottom;
    private int progress;
    private final Paint mPaint;
    private int defaultWidth = 0;
    private int defaultHeight = 0;
    private final int paddingLeft;
    private final int paddingTop;

    public CustomProgerssBar3(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomProgerssBar3);
        roundColor = typedArray.getColor(R.styleable.CustomProgerssBar3_roundColor, Color.CYAN);
        roundProgressColor = typedArray.getColor(R.styleable.CustomProgerssBar3_roundProgressColor, Color.RED);
        roundWidth = typedArray.getDimension(R.styleable.CustomProgerssBar3_roundWidth, 55);
        textSize = typedArray.getDimension(R.styleable.CustomProgerssBar3_textSize, 10);
        textColr = typedArray.getColor(R.styleable.CustomProgerssBar3_textColor, Color.BLUE);
        textShow = typedArray.getBoolean(R.styleable.CustomProgerssBar3_textShow, true);
        style = typedArray.getInt(R.styleable.CustomProgerssBar3_style, STROKE);
        max = typedArray.getInt(R.styleable.CustomProgerssBar3_max, 100);
        mPaint = new Paint();
        LogUtil.i("roundWidth=  "+roundWidth+"     "+ DensityUtil.px2dip(context,roundWidth));
        typedArray.recycle();
        defaultWidth = DensityUtil.dip2px(context,60);
        defaultHeight = DensityUtil.dip2px(context,60);
        paddingLeft = getPaddingLeft();
        paddingRight = getPaddingRight();
        paddingTop = getPaddingTop();
        paddingBottom = getPaddingBottom();
        LogUtil.i("paddingLeft= "+ paddingLeft+"  paddingRight="+paddingRight+"  paddingTop="+paddingTop+"  paddingBottom="+paddingBottom);

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int resolveWidthSize = resolveSize(defaultWidth, widthMeasureSpec);
        int resolveHeightSize = resolveSize(defaultHeight, heightMeasureSpec);
        setMeasuredDimension(resolveWidthSize,resolveHeightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setAntiAlias(true);
        mPaint.setStyle((style==STROKE)? Paint.Style.STROKE: Paint.Style.FILL);
        mPaint.setStrokeWidth(roundWidth);
        mPaint.setColor(roundProgressColor);
        //支持处理padding
        int width = getWidth()-paddingLeft-paddingRight;
        int height = getHeight()-paddingTop-paddingBottom;
        int centerX = paddingLeft+width/2;
        int centerY = paddingTop+height/2;
        int radius = Math.min(width,height)/2;
        radius = (int) (radius-roundWidth/2);
        canvas.drawCircle(centerX,centerY,radius,mPaint);
        float percent = 0.0f;
        if(textShow){
            //绘制进度百分比
            mPaint.reset();
            mPaint.setAntiAlias(true);
            mPaint.setStyle((style==STROKE)? Paint.Style.STROKE: Paint.Style.FILL);
            mPaint.setTextSize(textSize);
            mPaint.setColor(textColr);
            percent = progress/(float)max * 100;
            Rect bounds = new Rect();// 矩形
            String text = (int)percent + "%";
            mPaint.getTextBounds(text, 0, text.length(), bounds);
            int textHeight = bounds.height();
            int textWidth = bounds.width();
//        measureText() 会在左右两侧加上一些额外的宽度值，而 getTextBounds() 则是返回需要的最小宽度而已
            LogUtil.i("textWidth="+textWidth+"        textHeight="+textHeight+"       mPaint.measureText(text)="+mPaint.measureText(text));
            float x =  centerX-textWidth/2;
            Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();
            LogUtil.e("fontMetrics.descent="+fontMetrics.descent+"          fontMetrics.ascent="+fontMetrics.ascent);
            LogUtil.i("descent="+mPaint.descent()+"         ascent="+mPaint.ascent()+"     textHeight="+(mPaint.descent()-mPaint.ascent()));
            canvas.drawText(text, x,(centerY+textHeight/2),mPaint);
        }


        //绘制圆弧
        mPaint.reset();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(style==STROKE? Paint.Style.STROKE: Paint.Style.FILL);
        mPaint.setStrokeWidth(roundWidth);
        mPaint.setColor(roundColor);
        float left = centerX-radius;
        float top = centerY-radius;
        float right = centerX+radius;
        float bottom = centerY+radius;
        RectF rectF = new RectF(left,top,right,bottom);
        boolean useCenter = (style==FILL);
        LogUtil.i("(progress/(float)max*360)=   "+(progress/(float)max*360));
        canvas.drawArc(rectF,0,progress/(float)max*360,useCenter,mPaint);
    }

    /**
     * 自定义的属性progress,方便使用属性动画
     * @param progress
     */
    public synchronized void setProgress(int progress){
        this.progress = progress;
        invalidate();
    }

    public synchronized int getProgress(){
        return this.progress;
    }

}

完成环形进度条后，接着要控制环形进度条动起来，显示进度，比例。

public class CustomProgerssBarActivity extends AppCompatActivity implements View.OnClickListener {

    private CustomProgerssBar3 cpb1;
    private CustomProgerssBar3 cpb2;
    private CustomProgerssBar3 cpb3;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_progress_bar);
        cpb1 = findViewById(R.id.cpb1);
        cpb1.setOnClickListener(this);
        cpb2 = findViewById(R.id.cpb2);
        cpb2.setOnClickListener(this);
        cpb3 = findViewById(R.id.cpb3);
        cpb3.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        ObjectAnimator objectAnimator = null;
        switch (v.getId()){
            case R.id.cpb1:
                cpb1.setProgress(0);
                objectAnimator = ObjectAnimator.ofInt(v, "progress",80);
                objectAnimator.setDuration(1000);
                objectAnimator.start();
                break;
            case R.id.cpb2:
                cpb2.setProgress(0);
                objectAnimator = ObjectAnimator.ofInt(v, "progress",60);
                objectAnimator.setDuration(800);
                objectAnimator.start();
                break;
            case R.id.cpb3:
                cpb3.setProgress(0);
                objectAnimator = ObjectAnimator.ofInt(v, "progress",70);
                objectAnimator.setDuration(1500);
                objectAnimator.start();
                break;
        }
    }
}

下面是点击各个控件后的效果