先看下效果图:
要实现这个效果:
分析:底部是一个圆圈,顶层是一个会动的圆圈代表进度的意思,中间就是文字了
实现思路:
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);
核心代码就是这些
附上源代码连接
GitHub - panshimu/View_Date03: 自定义圆形进度条
有问题 随时留言 看到会答复的
网友评论