自定义view - 实现圆形进度条

2019-07-25 本文已影响0人 cao苗子

先看下效果图：

要实现这个效果：

分析：底部是一个圆圈，顶层是一个会动的圆圈代表进度的意思，中间就是文字了
实现思路：
1.画以一个底层的圆圈 drawCircle()
2.画一个带进度的圆圈 drawArc()
3.画字体 drawText()
代码实现如下：

在重写 onDraw()方法

1.画底层圆圈

//cx 圆心x坐标 cy 圆心y座标 radius 半径

int bottomX = getWidth() /2 ;

int bottomY = getHeight() /2 ;

int bottomRadius = getWidth() /2 -mBorderWidth/2;

canvas.drawCircle(bottomX,bottomY,bottomRadius,mBottomPaint);

2.画带进度的圆圈

//画外圈

RectF rectF =new RectF(mBorderWidth/2,mBorderWidth/2,getWidth()-mBorderWidth/2,getHeight()-mBorderWidth/2);

canvas.drawArc(rectF,0,mSweepAngle*360,false,mTopPaint);

3.画字体

int s = (int)(mSweepAngle*100);

String text = s +"%";

Rect rect =new Rect();

mTextPaint.getTextBounds(text,0,text.length(),rect);

//dx 等于控件宽度的一半减去文字的宽度的一半

int dx = getWidth()/2 - rect.width()/2;

Paint.FontMetricsInt fontMetricsInt =mTextPaint.getFontMetricsInt();

int dy = (fontMetricsInt.bottom - fontMetricsInt.top)/2 - fontMetricsInt.bottom;

int baseLine = getHeight()/2 + dy;

canvas.drawText(text,dx,baseLine,mTextPaint);

有问题随时留言看到会答复的