Android花样loading进度条（四）-渐变色环形进度条

背景

Android花样loading进度条系列文章主要讲解如何自定义所需的进度条，包括水平、圆形、环形、圆弧形、不规则形状等。
本篇我们对配文字环形进度条稍加变换，将圆环颜色改为渐变色的形式，使得进度条更具有色彩性，其他内容同上一篇Android花样loading进度条（三）-配文字环形进度条，主要是使用Canvas绘制圆和圆弧、绘制文字。

效果

先上图看效果，这里有4个进度条，样式上有微妙区别，基本都属于一个类别的进度条了。

4个进度条基本上分为3类：

1. 带文字的渐变色进度条；
2. 不带文字的渐变色进度条；
3. 带自定义字体的渐变色进度条

我们以第1种作为基本示例来讲解，需要准备的知识点有：

• 自定义控件的坐标轴；
• Canvas圆环、圆弧绘制方法；
• Paint画笔着色器的使用方法；
• Canvas文字绘制方法；
• 自定义属性；
• Handler消息处理机制。

其中除了Paint画笔着色器的使用方法没有说，其他都在上一篇 Android花样loading进度条（三）-配文字环形进度条一文中有讲解过。

Paint的着色器

Canvas画板中的内容依靠Paint画笔来绘制，因为在绘制渐变色圆环时需要对画笔设置渐变色效果，我们看到Paint画笔有一个方法：

android.graphics.Paint#setShader(Shader shader)

Android中提供了以下几种Shader ：

• LinearGradient：线性渐变效果，比较适合在矩形、线条形状的图形添加渐变效果；
• SweepGradient：梯度渐变，也称之为扫描式渐变，比较适合做圆、圆环上的渐变效果；
• RadialGradient：径向渐变，类似于中心发散效果，比较适合做靶环效果。

想要获取更多的渐变效果及详情资料，可以参考：https://www.cnblogs.com/tianzhijiexian/p/4298660.html，或百度学习。

自定义属性

渐变色的环形进度条控件一般定义的属性有：

• 圆环的颜色；
• 圆环的宽度；
• 圆环上的进度颜色；
• 圆环上的进度宽度；
• 文字大小；
• 文字颜色；
• 百分比大小；
• 渐变色色值等。

为此，我们定义attrs.xml配置文件的内容为：

<!--渐变色环形进度-->
<declare-styleable name="GradientRoundProgress">
    <!--圆环颜色-->
    <attr name="grp_roundColor" format="color" />
    <!--圆环的宽度-->
    <attr name="grp_roundWidth" format="dimension" />
    <!--圆环上的进度颜色-->
    <attr name="grp_progressColor" format="color" />
    <!--圆环上的进度宽度-->
    <attr name="grp_progressWidth" format="dimension" />
    <!--文字内容-->
    <attr name="grp_text" format="string" />
    <!--文字指示颜色-->
    <attr name="grp_textColor" format="color" />
    <!--文字指示字体大小-->
    <attr name="grp_textSize" format="dimension" />
    <!--数字指示字体大小-->
    <attr name="grp_numSize" format="dimension" />
    <!--进度值的最大值，一般为100-->
    <attr name="grp_max" format="integer" />
    <!--是否显示文字指示内容-->
    <attr name="grp_textShow" format="boolean" />
    <!--开始角度，指定进度初始点的绘制位置-->
    <attr name="grp_startAngle" format="integer" />
    <!--是否使用自定义字体-->
    <attr name="grp_userCustomFont" format="boolean" />
    <!--渐变色起始色-->
    <attr name="grp_startColor" format="color" />
    <!--渐变色中间色-->
    <attr name="grp_midColor" format="color" />
    <!--渐变色起始色-->
    <attr name="grp_endColor" format=