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

背景

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

效果

先上图看效果，这里有4个进度条，样式上有微妙区别，基本都属于一个类别的进度条了。
Android花样loading进度条（四）-渐变色环形进度条_第1张图片
4个进度条基本上分为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" />        <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="color" />declare-styleable>

有了属性定义后，我们在绘制的时候结合这些属性就可以按设置值绘制了。

基本图形绘制

除渐变色环形进度条的绘制外，其他绘制方法均可参考上一篇 Android花样loading进度条（三）-配文字环形进度条中的讲解，或自己做一些修改。

渐变色圆环绘制

与之前的进度条不同，渐变色圆环的进度条需要在背景环上绘制带有渐变色效果的前景环。
1、绘制背景圆环（底色）
这个和上一篇文章一样，利用paint绘制指定背景色和粗细的圆环。

// step1 画最外层的大圆环paint.setStrokeWidth(roundWidth); // 设置圆环的宽度paint.setColor(roundColor); // 设置圆环的颜色paint.setAntiAlias(true); // 消除锯齿// 设置画笔样式paint.setStyle(Paint.Style.STROKE);canvas.drawCircle(centerX, centerX, radius, paint); // 画出圆环

2、绘制渐变色前景圆环（进度环）
代码：

// step2 画圆弧-画圆环的进度// 锁画布(为了保存之前的画布状态)canvas.save();canvas.rotate(startAngle, centerX, centerX);paint.setStrokeWidth(progressWidth); // 设置画笔的宽度使用进度条的宽度paint.setColor(progressColor); // 设置进度的颜色RectF oval = new RectF(centerX - radius, centerX - radius, centerX + radius, centerX + radius); // 用于定义的圆弧的形状和大小的界限int sweepAngle = 360 * progress / max; // 计算进度值在圆环所占的角度// 根据进度画圆弧paint.setShader(new SweepGradient(centerX, centerX, new int[]{startColor, midColor, endColor}, null));canvas.drawArc(oval, 0, sweepAngle, false, paint);paint.setShader(null);canvas.rotate(-startAngle, centerX, centerX);canvas.restore();

作解释如下：

canvas.save：保存画布当前状态；
canvas.rotate：让画布按point(x,y)点中心旋转某个角度；
paint.setShader：给画笔设置着色器，这里设置了一个以(centerX, centerX)点为中心的渐变色着色器；
canvas.restore：特殊绘制完成后恢复画布为原来的状态。

SweepGradient类可以绘制出中心渐变效果，但是因为我们的进度条加了startAngle以调整其实角度，所以在给画笔paint添加SweepGradient的shader时，需要提前将画布旋转下，因为SweepGradient只能从默认角度开始出渐变效果。旋转绘制的效果，如下图：
Android花样loading进度条（四）-渐变色环形进度条_第2张图片
如果画布不旋转的话出来的效果就是起止色不能完全对应。

画布的旋转有涉及到以下3个方法：

android.graphics.Canvas#save()
android.graphics.Canvas#rotate(float, float, float)
android.graphics.Canvas#restore

3、绘制文字及百度比数字
此部分可参考上一篇 Android花样loading进度条（三）-配文字环形进度条中的讲解，此处略过。

至此，渐变色环形进度条绘制就完成了，整个GradientRoundProgress的代码为：

package com.dommy.loading.widget;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.SweepGradient;import android.graphics.Typeface;import android.util.AttributeSet;import android.view.View;import com.dommy.loading.R;import com.dommy.loading.util.AppResource;/** * 渐变色环形进度条 */public class GradientRoundProgress extends View {    private Paint paint; // 画笔对象的引用    private int roundColor; // 圆环的颜色    private float roundWidth; // 圆环的宽度    private int progressColor; // 圆环进度的颜色    private float progressWidth; // 圆环进度的宽度    private String text; // 文字内容    private int textColor; // 中间进度百分比的字符串的颜色    private float textSize; // 中间进度百分比的字符串的字体大小    private float numSize; // 中间进度文本大小    private int max; // 最大进度    private int startAngle; // 进度条起始角度    private boolean textShow; // 是否显示中间的进度    private boolean useCustomFont; // 是否使用自定义字体    private int startColor; // 渐变色起始色    private int midColor; // 渐变色中间色    private int endColor; // 渐变色起始色    private int progress; // 当前进度    public GradientRoundProgress(Context context) {        this(context, null);    }    public GradientRoundProgress(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public GradientRoundProgress(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        paint = new Paint();        // 读取自定义属性的值        TypedArray mTypedArray = context.obtainStyledAttributes(attrs, R.styleable.GradientRoundProgress);        // 获取自定义属性和默认值        roundColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_roundColor, Color.RED);        roundWidth = mTypedArray.getDimension(R.styleable.GradientRoundProgress_grp_roundWidth, 5);        progressColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_progressColor, Color.GREEN);        progressWidth = mTypedArray.getDimension(R.styleable.GradientRoundProgress_grp_progressWidth, roundWidth);        text = mTypedArray.getString(R.styleable.GradientRoundProgress_grp_text);        textColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_textColor, Color.GREEN);        textSize = mTypedArray.getDimension(R.styleable.GradientRoundProgress_grp_textSize, 11);        numSize = mTypedArray.getDimension(R.styleable.GradientRoundProgress_grp_numSize, 14);        max = mTypedArray.getInteger(R.styleable.GradientRoundProgress_grp_max, 100);        startAngle = mTypedArray.getInt(R.styleable.GradientRoundProgress_grp_startAngle, 90);        textShow = mTypedArray.getBoolean(R.styleable.GradientRoundProgress_grp_textShow, true);        useCustomFont = mTypedArray.getBoolean(R.styleable.GradientRoundProgress_grp_userCustomFont, false);        startColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_startColor, Color.GREEN);        midColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_midColor, Color.GREEN);        endColor = mTypedArray.getColor(R.styleable.GradientRoundProgress_grp_endColor, Color.GREEN);        mTypedArray.recycle();    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        int centerX = getWidth() / 2; // 获取圆心的x坐标        int radius = (int) (centerX - roundWidth / 2); // 圆环的半径        // step1 画最外层的大圆环        paint.setStrokeWidth(roundWidth); // 设置圆环的宽度        paint.setColor(roundColor); // 设置圆环的颜色        paint.setAntiAlias(true); // 消除锯齿        // 设置画笔样式        paint.setStyle(Paint.Style.STROKE);        canvas.drawCircle(centerX, centerX, radius, paint); // 画出圆环        // step2 画圆弧-画圆环的进度        // 锁画布(为了保存之前的画布状态)        canvas.save();        canvas.rotate(startAngle, centerX, centerX);        paint.setStrokeWidth(progressWidth); // 设置画笔的宽度使用进度条的宽度        paint.setColor(progressColor); // 设置进度的颜色        RectF oval = new RectF(centerX - radius, centerX - radius, centerX + radius, centerX + radius); // 用于定义的圆弧的形状和大小的界限        int sweepAngle = 360 * progress / max; // 计算进度值在圆环所占的角度        // 根据进度画圆弧        paint.setShader(new SweepGradient(centerX, centerX, new int[]{startColor, midColor, endColor}, null));        canvas.drawArc(oval, 0, sweepAngle, false, paint);        paint.setShader(null);        canvas.rotate(-startAngle, centerX, centerX);        canvas.restore();        // step3 画文字指示        paint.setStrokeWidth(0);        paint.setColor(textColor);        paint.setTextSize(textSize);        // 计算百分比        int percent = (int) (((float) progress / (float) max) * 100);        if (textShow && text != null && text.length() > 0 && percent >= 0) {            // 3.1 画文字            paint.setTypeface(Typeface.DEFAULT); // 设置为默认字体            float textWidth = paint.measureText(text); // 测量字体宽度            canvas.drawText(text, centerX - textWidth / 2, centerX + textSize + 5, paint);            // 3.2 画百分比            paint.setTextSize(numSize);            if (useCustomFont) {                paint.setTypeface(AppResource.getTypeface(getContext())); // 设置字体            } else {                paint.setTypeface(Typeface.DEFAULT_BOLD); // 设置为加粗默认字体            }            float numWidth = paint.measureText(percent + "%"); // 测量字体宽度，我们需要根据字体的宽度设置在圆环中间            canvas.drawText(percent + "%", centerX - numWidth / 2, centerX, paint); // 画出进度百分比        }    }    /**     * 设置进度的最大值     * 根据需要，最大值一般设置为100，也可以设置为1000、10000等
     *     * @param max int最大值     */    public synchronized void setMax(int max) {        if (max < 0) {            throw new IllegalArgumentException("max not less than 0");        }        this.max = max;    }    /**     * 获取进度     *     * @return int 当前进度值     */    public synchronized int getProgress() {        return progress;    }    /**     * 设置进度，此为线程安全控件     *     * @param progress 进度值     */    public synchronized void setProgress(int progress) {        if (progress < 0) {            throw new IllegalArgumentException("progress not less than 0");        }        if (progress > max) {            progress = max;        }        this.progress = progress;        // 刷新界面调用postInvalidate()能在非UI线程刷新        postInvalidate();    }}

渐变色环形进度条的使用

1、页面控件配置
自定义控件在页面中使用时，要使用类名来作为标签，自定义属性要通过命名空间引入，整体如：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    ...    tools:context="com.dommy.loading.GradientRoundActivity">    ...        <com.dommy.loading.widget.GradientRoundProgress            android:id="@+id/grp_0"            android:layout_width="100dip"            android:layout_height="100dip"            android:layout_gravity="center"            app:grp_endColor="@color/gr_end"            app:grp_midColor="@color/gr_mid"            app:grp_startColor="@color/gr_start"            app:grp_max="100"            app:grp_numSize="22sp"            app:grp_progressColor="@color/red_web"            app:grp_roundColor="@color/pro_bg"            app:grp_roundWidth="6dip"            app:grp_startAngle="0"            app:grp_text="空气质量"            app:grp_textColor="@color/red_web"            app:grp_textSize="10sp" /> ...LinearLayout>

页面编写时的preview效果：
Android花样loading进度条（四）-渐变色环形进度条_第4张图片
2、Activity代码控制
通过调用方法

com.dommy.loading.widget.GradientRoundProgress#setProgress

就可以设置控件显示指定的进度，如：

grp0.setProgress(50);

3、让进度动起来
通过Thread+Handler动态增加的方法，不断更新界面就可以达到动起来的效果：
Android花样loading进度条（四）-渐变色环形进度条_第5张图片

改变效果

进度的宽度、颜色、字体大小等可以通过自定义属性直接修改。

源码下载

https://github.com/ahuyangdong/ColorfulLoading

背景

效果