美文网首页自定义viewAndroid知识Android开发
Android-画个你想要的圆形进度条

Android-画个你想要的圆形进度条

作者: 橘子周二 | 来源:发表于2017-07-10 17:15 被阅读159次

啊哈,最近又闲下来了。但一直有个事儿没放下,那就是项目中用到的一个开源控件--圆形进度条。虽然样式和UI设计图完全一样了,但是体验我觉得还能提升,加个动画什么的。反正闲了点干脆自己写吧。

运行效果图:

circleProgressView.gif

属性使用:

<rg.funinglayout.views.CircleProgressView
        android:id="@+id/ac_CircleProgressView"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:cp_underColor="@color/grey300"
        app:cp_progressColor="@color/colorPrimary"
        app:cp_progress="10"
        app:cp_reverseAngle="true"
        app:cp_max="100"
        app:cp_textColor="@color/colorPrimary"
        app:cp_textSize="25sp"
        app:cp_startAngle="270"
        app:cp_strokeWidth="15dp"
        app:cp_padding="5dp"
        app:cp_drawText="true"
        />



有了之前对View自定义绘制测量和参数的学习,在有了思路后很快就实现出来了。

  • 主要就三个模块:
    1.弧角度计算绘制
    2.文字绘制
    3.进度切割动画
  • 踩坑:

一开始在绘制RectF边界时使用了坐标确定位置,后来发现这是多余的,也是错误的。

drawArc在在设置边界RectF时,只用考虑绘制面积,无需考虑绘制坐标。

界限面积公式 :S = getMeasureWidth() * getMeasureHeight()

也就是说 rectF.top,rectF.letf在无边距时就是 0 。

实际起点就是 padding


源码地址:github - CircleProgressView

相关文章

  • Android-画个你想要的圆形进度条

    啊哈,最近又闲下来了。但一直有个事儿没放下,那就是项目中用到的一个开源控件--圆形进度条。虽然样式和UI设计图完全...

  • Android自定义圆形进度条学习

    Android中圆形进度条的应用还是挺多的,最近学习实现了圆形进度条。 思路 要实现圆形进度条, 首先要画灰色背景...

  • 教你如何制作圆形进度条

    常用的进度条有两种,一种是条行的,另一种是比较形象的圆形进度条。圆形进度条的用处也比较多,插件也不少,但是想要在别...

  • iOS 各种圆形进度条

    iOS 各种圆形进度条:UAProgressView iOS手把手教你实现圆形进度条

  • Android圆形进度条自定义

    自定义圆形进度条 实现 圆形进度条api 使用 将MyCircleProgressView和attrs.xml下的...

  • ProgressBar

    普通进度条 样式 圆形和水平【默认圆形】 自定义水平进度条 在这个Style中,有一个progressDrawab...

  • iOS 小知识3

    UITextField限制输入长度 圆形进度条 我对动画一直不是很了解,今天做了一个圆形进度条的动画就搞了半天,今...

  • 项目中shap的使用

    圆形 矩形边框 进度条 1. 圆形 2. 矩形边框 3. 进度条 4. 大神博客 :http://www.cnbl...

  • Flutter 之 ProgressIndicator 控件

    CircularProgressIndicator 创建一个圆形进度条,直接 new CircularProgre...

  • 小程序原型进度条

    微信小程序本身提供了html5中原生的直线进度条,但是没有提供圆形进度条,这里我使用canvas简单实现了一个圆形...

网友评论

本文标题:Android-画个你想要的圆形进度条

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