【自定义控件】QProgressBar

一、前言

在工作中，经常会使用到各种各样的ProgressBar，有些时候系统自带的pogressbar就能满足需求，有些时候只要更改一下属性同样能满足需求，但是，在特殊情况下，系统自带的控件可能就无法满足项目的需求了，这个时候就需要自定义一个ProgressBar了，话不多说，先看效果图。

二、QProgressBar的三种形式

2.1 直线型

<com.qiyou.qprogressbars.QProgressBar
        android:id="@+id/l_progressbar"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        app:bar_type="linesBar" />

2.2 圆形

<com.qiyou.qprogressbars.QProgressBar
        android:id="@+id/c_progressbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        app:bar_type="circleBar" />

2.3 圆环形

<com.qiyou.qprogressbars.QProgressBar
        android:id="@+id/a_progressbar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="10dp"
        app:bar_annulus_border_width="40"
        app:bar_type="annulusBar" />

三、属性设置

		//progresebar 最大值 默认为100
        app:bar_max="100"
        
        //progressbar 背景颜色 默认黑色
        app:bar_bg_color="@color/colorPrimary"
        
        //progressbar progress背景颜色 默认红色
        app:bar_pr_color="@color/colorPrimaryDark"
        
        //progressbar类型 linesBar直线 circleBar圆形 annulusBar圆环 默认为直线
        app:bar_type="linesBar"
        
        //progressbar 进度值颜色 默认白色
        app:bar_text_color="@color/colorAccent"
        
        //progressbar 进度值大小 默认30
        app:bar_text_size="20"
        
        //progressbar 是否显示进度值 默认为true
        app:bar_text_visibily="true"
        
        //progressbar 圆环宽度 该属性只对圆环progressbar有效
        app:bar_annulus_border_width="10"

四、原理

4.1 直线型ProgressBar

直线型progressbar，从效果图中可以看出是上下分别是两个圆角矩形组成，下面圆角矩形不断，上面圆角矩形根据当前进度（以下简称为progress）不断重绘，从而形成progressBar效果。
核心代码：

private void drawLineRectf() {
        line_bg_rectf.left = getPaddingLeft();
        line_bg_rectf.top = 0;
        line_bg_rectf.right = getWidth() - getPaddingRight();
        line_bg_rectf.bottom = getHeight();

        line_pr_rectf.left = getPaddingLeft();
        line_pr_rectf.top = 0;
        line_pr_rectf.right =
                ((getWidth() - getPaddingLeft() - getPaddingRight()) / bar_max) * progress;
        line_pr_rectf.bottom = getHeight();

        line_rect_radius = getHeight() / 2;
    }

4.2 圆形ProgressBar

圆形progressbar，从效果图中可以看出，由上下两个圆组成，准确的说应该是下面是圆，上面是扇形，同样通过progress不断绘制扇形形成progressbar效果。这里需要注意一点，扇形是通过矩形来绘制的，但是这个矩形可不是下边圆的矩形，而是确定圆的大小之后，一个与下面圆内切的矩形，这样上面的扇形才会完全覆盖下面的圆。
核心代码：

RectF circleRectf = new RectF(
                centerX - radius,
                centerY - radius,
                centerX + radius,
                centerY + radius
        );

4.3 圆环形ProgressBar

圆环形progressbar，需要先了解PathMeasure的概念，请参考：https://blog.youkuaiyun.com/u012124438/article/details/86681957。
通过测量下面圆环的长度，通过progress截取下面圆环的路径，然后赋给上面的圆环，从而实现progressbar的效果。
核心代码：

pathMeasure.getSegment(0, pathMeasure.getLength() / bar_max * progress, drawPath, true);

本篇自定义控件之QProgressBar讲解完毕，如果您发现任何问题或者建议，欢迎留言。

五、源码

https://github.com/qylfzy/QProgressBar