美文网首页
自定义view - 实现圆形进度条

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

作者: cao苗子 | 来源:发表于2019-07-25 12:00 被阅读0次

    先看下效果图:

    要实现这个效果:

    分析:底部是一个圆圈,顶层是一个会动的圆圈代表进度的意思,中间就是文字了
    实现思路:
    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: 自定义圆形进度条

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

    相关文章

      网友评论

          本文标题:自定义view - 实现圆形进度条

          本文链接:https://www.haomeiwen.com/subject/cglcrctx.html