Android 自定义 View：包含多种状态的下载用圆形进度条

前言

最近做项目碰到一个这样的一个需求：需要一个环形的进度条表示一个下载请求的进度加载。
同时要以各种不同的图标展现其下载过程中的各个状态：等待、下载中、暂停、错误、完成。

具体状态对应图标见下图：


download_status.png

以上图标来自http://www.iconfont.cn/。

考虑到其状态多达 5 种之多。用已有的控件组合显示，然后判断状态来控制各图标的显示不太合适。
借此机会，简单的撸一个这样的一个自定义控件：CircleProgressBar 来温习下自定义控件的知识。

直接拷贝 CircleProgressBar 使用：CircleProgressBar.java

自定义控件

首先需要的基础知识，你需要了解关于安卓自定义控件的基本原理、控件的绘制过程。
推荐看下官方的相关文档 Custom View Components。注意：文档为英文文档，有墙。

简单总结下见下表：


custom-components-form.png

搞清楚上面的基础之后就正式开始自定义控件。如果还没有看过上述文档也可以跟着我把下面的步奏写一遍。

创建 View

一般自定义 View 都是继承自 android.view.View。不过既然我们自定义的是 ProgressBar，就没必要重头开始了，直接继承自 android.widget.ProgressBar 。
这样 setProgress(int progress); 这些基础方法就没必要再定义了。So，给我的控件取名为 CircleProgressBar extends ProgressBar。

观察上述几个图标，除了下载中状态有进度加载，其形态有所改变外，其余状态均为一个静态图片。现在只用搞定下载中状态的圆环进度和绘制中间的两条竖线即可。

定义自定义属性

我们在使用 Android SDK 提供的控件的时候，可以直接从 .xml 文件中新建，比如新建一个 LinearLayout：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" />

同时我们还可以直接在 .xml 文件中配置各种属性，如上述代码中的 android:orientation="horizontal" 。
我们自定义的控件当然也要支持配置和一些自定义属性，所以就必须要这个构造方法：public CircleProgressBar(Context context, AttributeSet attrs) {}。
这个构造方法允许我们在 .xml 文件中创建和编辑我们自定义控件的实例：

public CircleProgressBar(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

同时，为了在 .xml 文件中定义我们的自定义属性（eg: color, size, etc.），我们需要新增以下构造方法：

public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

defStyleAttr 这个整型变量是一个定义在 res/values/attrs.xml 文件中的 declare-styleable 值。
基于此，我们需要新建 res/values/attrs.xml 文件，并定义一些需要用到的自定义属性。

观察要实现的外圈进度条，有两个进度：一个用来表示默认的圆形，另一个表示进度的颜色。所以这里涉及到两个进度条颜色宽高的定义。要绘制圆肯定还需要半径。
故所有定义的属性如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CircleProgressBar">
        <!--默认圆的颜色-->
        <attr name="defaultColor" format="color" />
        <!--进度条的颜色-->
        <attr name="reachedColor" format="color" />
        <!--默认圆的高度-->
        <attr name="defaultHeight" format="dimension" />
        <!--进度条的高度-->
        <attr name="reachedHeight" format="dimension" />
        <!--圆的半径-->
        <attr name="radius" format="dimension" />
    </declare-styleable>
</resources>

这段代码声明了 5 个自定义属性，它们都是属于 styleable：CircleProgressBar 的。
为了方便起见，一般styleable的name和我们自定义控件的类名一样。自定义控件定义好了之后就可以直接使用了。
具体自定义属性值含义见 xml 里面的注释。

在使用中就可以直接设置这些自定义属性了：

<com.chengww.circleprogressdemo.CircleProgressBar
    android:layout_width="46dp"
    android:layout_height="46dp"
    android:padding="6dp"
    android:id="@+id/cp_progress"
    app:defaultColor="#D8D8D8"
    app:reachedColor="#1296DB"
    app:defaultHeight="2.5dp"
    app:reachedHeight="2.5dp" />

获取自定义属性

既然定义了自定义属性，当然需要获取到具体使用中设置的自定义属性。否则定义自定义属性就没有意义了。
首先定义成员变量：

private int mDefaultColor;
private int mReachedColor;
private int mDefaultHeight;
private int mReachedHeight;
private int mRadius;
private Paint mPaint;
private Status mStatus = Status.Waiting;

然后就是获取成员变量了。还记得我们上文中 Java 代码里面定义的构造方法 public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {} 吗？
没错，就是在这个方法里面获取用户设置的自定义属性值：

    public CircleProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CircleProgressBar);
        //默认圆的颜色
        mDefaultColor = typedArray.getColor(R.styleable.CircleProgressBar_defaultColor, Color.parseColor("#D8D8D8"));
        //进度条的颜色
        mReachedColor = typedArray.getColor(R.styleable.CircleProgressBar_reachedColor, Color.parseColor("#1296DB"));
        //默认圆的高度
        mDefaultHeight = typedArray.getDimension(R.styleable.CircleProgressBar_defaultHeight, dp2px(context, 2.5f));
        //进度条的高度
        mReachedHeight = typedArray.getDimension(R.styleable.CircleProgressBar_reachedHeight, dp2px(context, 2.5f));
        //圆的半径
        mRadius = typedArray.getDimension(R.styleable.CircleProgressBar_radius, dp2px(context, 17));
        typedArray.recycle();

        setPaint();
    }

当我们在 xml 文件中创建一个 View 时，所有在 xml 文件中声明的属性都会被传入到该 View 的上述构造方法中。
通过调用 Context 的 obtainStyledAttributes() 方法返回一个 TypedArray 对象。然后直接用 TypedArray 对象获取自定义属性的值，第二个参数是获取不到时取得默认值。
由于 TypedArray 对象是共享的资源，所以在获取完值之后必须要调用 recycle() 方法来回收。

使用 Java 方法设置自定义属性

上述方法只能通过 xml 文件设置自定义属性，只有在 View 被初始化的时候才能获取到。要想在运行时使用 Java 方法修改某个属性值，对某个属性值（成员变量）新增 Getter 和 Setter 方法即可。

private Status mStatus = Status.Waiting;

public Status getStatus() {
    return mStatus;
}

public void setStatus(Status status) {
    if (mStatus == status) return;
    mStatus = status;
    invalidate();
}

注意 setStatus 方法，在为 mStatus 赋值之后，调用了 invalidate() 方法，我们自定义控件的属性发生改变之后，控件的样子也可能发生改变，在这种情况下就需要调用 invalidate() 方法让系统去调用 View 的 onDraw() 重新绘制。
同样的，控件属性的改变可能导致控件所占的大小和形状发生改变，可以调用 requestLayout() 来请求测量获取一个新的布局位置。
注：如改变某属性后，确定控件不会变更大小和位置，可以不需要调用 requestLayout() 方法。同样，如控件不需要重绘，可以不需要调用 invalidate() 方法。

获取基础的一些属性，这里 mStatus 用来表示当前 View 的状态以对应各种下载状态。我们用这些状态来判定如何绘制合适的效果。各状态用一个内部枚举来表示。

public enum Status {
    Waiting,
    Pause,
    Loading,
    Error,
    Finish
}

上述 setPaint() 为初始化 paint 方法。用以绘制进度圆环和各静态 Drawable。附上 setPaint() 方法代码：

private void setPaint() {
    mPaint = new Paint();
    //下面是设置画笔的一些属性
    mPaint.setAntiAlias(true);//抗锯齿
    mPaint.setDither(true);//防抖动，绘制出来的图要更加柔和清晰
    mPaint.setStyle(Paint.Style.STROKE);//设置填充样式
    /**
     *  Paint.Style.FILL    :填充内部
     *  Paint.Style.FILL_AND_STROKE  ：填充内部和描边
     *  Paint.Style.STROKE  ：仅描边
     */
    mPaint.setStrokeCap(Paint.Cap.ROUND);//设置画笔笔刷类型
}

处理 View 的布局

View 的测量

一个 View 在展示时总是其宽和高，测量 View 就是为了能够让自定义的控件能够根据各种不同的情况以合适的宽高去展示。
具体使用到的方法为 onMeasure() 方法。该方法重写自系统的方法，包含两个参数：int widthMeasureSpec, int heightMeasureSpec。
这两个参数包含了两个重要的信息：Mode 和 Size。获取 Mode 和 Size：

int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);

以上代码可以获取 widthMode、heightMode、widthSize、heightSize 共四个参数。

Mode 代表了当前控件的父控件告诉我们控件，你应该按怎样的方式来布局。
Mode 有三个可选值：EXACTLY、AT_MOST、UNSPECIFIED。它们的含义是：

  • EXACTLY：父控件告诉我们子控件了一个确定的大小，你就按这个大小来布局。比如我们指定了确定的 dp 值和 match_parent 的情况。
  • AT_MOST：当前控件不能超过一个固定的最大值，一般是 wrap_content 的情况。
  • UNSPECIFIED：当前控件没有限制，要多大就有多大，这种情况很少出现。

Size 其实就是父布局传递过来的一个大小，父布局希望当前布局的大小。

下面是我们代码中 onMeasure() 方法的写法：

@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);

    int paintHeight = Math.max(mReachedHeight, mDefaultHeight);

    if (heightMode != MeasureSpec.EXACTLY) {
        int exceptHeight = getPaddingTop() + getPaddingBottom() + mRadius * 2 + paintHeight;
        heightMeasureSpec = MeasureSpec.makeMeasureSpec(exceptHeight, MeasureSpec.EXACTLY);
    }
    if (widthMode != MeasureSpec.EXACTLY) {
        int exceptWidth = getPaddingLeft() + getPaddingRight() + mRadius * 2 + paintHeight;
        widthMeasureSpec = MeasureSpec.makeMeasureSpec(exceptWidth, MeasureSpec.EXACTLY);
    }

    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

我们只需要处理宽高没有精确指定的情况，通过 padding 加上整个圆以及 Paint 的宽度计算出具体的值。

接下来就是绘制效果了。

绘制 View

如开始所述：观察上述几个图标，除了下载中状态有进度加载，其形态有所改变外，其余状态均为一个静态图片。绘制其余状态静态图片可以使用：
drawable.draw(canvas); 方法。现在说说如何绘制下载中这个状态。

重写 onDraw() 方法，然后我们开始绘制圆：

canvas.translate(getPaddingStart(), getPaddingTop());
mPaint.setStyle(Paint.Style.STROKE);
//画默认圆(边框)的一些设置
mPaint.setColor(mDefaultColor);
mPaint.setStrokeWidth(mDefaultHeight);
canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

通过 canvas.drawCircle(mRadius, mRadius, mRadius, mPaint); 绘制默认状态下的圆。之后改变画笔的颜色，根据进度绘制圆弧。

//画进度条的一些设置
mPaint.setColor(mReachedColor);
mPaint.setStrokeWidth(mReachedHeight);
//根据进度绘制圆弧
float sweepAngle = getProgress() * 1.0f / getMax() * 360;
canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), -90, sweepAngle, false, mPaint);

最后绘制圆中间的两条竖线下载中状态就完成了。下面是一个示例，绘制竖线宽度为 2/5 半径(1/5 + 1/5)，高度为 1/2 半径(1/2 + 1/2)：

mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(dp2px(getContext(), 2));
mPaint.setColor(Color.parseColor("#667380"));
canvas.drawLine(mRadius * 4 / 5, mRadius * 3 / 4, mRadius * 4 / 5, 2 * mRadius - (mRadius * 3 / 4), mPaint);
canvas.drawLine(2 * mRadius - (mRadius * 4 / 5), mRadius * 3 / 4, 2 * mRadius - (mRadius * 4 / 5), 2 * mRadius - (mRadius * 3 / 4), mPaint);

然后通过判断 mStatus 来绘制不同的状态即可完成 onDraw() 方法即可。完整 onDraw() 代码和相关 dp2px 方法：

@Override
protected synchronized void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    /**
     * 这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的
     * 当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作,但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，
     * 那么之后在画布上的元素都会受到影响，所以我们在操作之前调用canvas.save()来保存画布当前的状态，当操作之后取出之前保存过的状态，
     * (比如：前面元素设置了平移或旋转的操作后，下一个元素在进行绘制之前执行了canvas.save();和canvas.restore()操作)这样后面的元素就不会受到(平移或旋转的)影响
     */
    canvas.save();
    //为了保证最外层的圆弧全部显示，我们通常会设置自定义view的padding属性，这样就有了内边距，所以画笔应该平移到内边距的位置，这样画笔才会刚好在最外层的圆弧上
    //画笔平移到指定paddingLeft， getPaddingTop()位置
    canvas.translate(getPaddingStart(), getPaddingTop());

    int mDiameter = (int) (mRadius * 2);
    if (mStatus == Status.Loading) {
        mPaint.setStyle(Paint.Style.STROKE);
        //画默认圆(边框)的一些设置
        mPaint.setColor(mDefaultColor);
        mPaint.setStrokeWidth(mDefaultHeight);
        canvas.drawCircle(mRadius, mRadius, mRadius, mPaint);

        //画进度条的一些设置
        mPaint.setColor(mReachedColor);
        mPaint.setStrokeWidth(mReachedHeight);
        //根据进度绘制圆弧
        float sweepAngle = getProgress() * 1.0f / getMax() * 360;
        canvas.drawArc(new RectF(0, 0, mRadius * 2, mRadius * 2), -90, sweepAngle, false, mPaint);

        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(dp2px(getContext(), 2));
        mPaint.setColor(Color.parseColor("#667380"));
        canvas.drawLine(mRadius * 4 / 5, mRadius * 3 / 4, mRadius * 4 / 5, 2 * mRadius - (mRadius * 3 / 4), mPaint);
        canvas.drawLine(2 * mRadius - (mRadius * 4 / 5), mRadius * 3 / 4, 2 * mRadius - (mRadius * 4 / 5), 2 * mRadius - (mRadius * 3 / 4), mPaint);
    } else {
        int drawableInt;
        switch (mStatus) {
            case Waiting:
            default:
                drawableInt = R.mipmap.ic_waiting;
                break;
            case Pause:
                drawableInt = R.mipmap.ic_pause;
                break;
            case Finish:
                drawableInt = R.mipmap.ic_finish;
                break;
            case Error:
                drawableInt = R.mipmap.ic_error;
                break;
        }
        Drawable drawable = getContext().getResources().getDrawable(drawableInt);
        drawable.setBounds(0, 0, mDiameter, mDiameter);
        drawable.draw(canvas);
    }
    canvas.restore();
}

float dp2px(Context context, float dp) {
    final float scale = context.getResources().getDisplayMetrics().density;
    return dp * scale + 0.5f;
}

处理用户交互

由于对于下载更新进度的情况来说，该控件只做状态显示，所以这一步不需要，要使用的话自己设置点击事件就可以了。

完成品效果 gif：

CircleProgressBarDemo.gif

演示 apk 下载：
https://blog.chengww.com/files/CircleProgressBarDemo_1.0.apk

源码下载：https://github.com/chengww5217/CircleProgressBarDemo

文章作者: chengww
文章链接: https://chengww.com/archives/CircleProgressBar.html
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 chengww's blog！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342