Android自定义圆形倒计时进度条

效果预览

源代码传送门：https://github.com/yanzhenjie/circletextprogressbar

实现与原理

这个文字圆形的进度条我们在很多app中看到过，比如app欢迎页倒计时，下载文件倒计时等。

分析下原理，可能有的同学一看到这个自定义view就慌了，这个是不是要继承view啊，是不是要绘制啊之类的，答案是：是的。但是我们也不要担心，实现这个效果实在是so easy。下面就跟我一起来看看核心分析和代码吧。

原理分析

首先我们观察上图，需要几个部分组成：
1. 外面逐渐增加/减少的圆形进度条。
2. 圆形进度条中间的展示文字。
3. 圆形进度条外面包裹的圆。
4. 圆形进度条中间的填充色。
5. 字体颜色/填充颜色点击变色：colorstatelist类。

我们分析得出需要四个部分。一看有文字，那么第一个想到的自然是textview啦，正好可以少做一个字体颜色的记录。中间的填充颜色（原型暂且不考虑）点击时变色，需要colorstatelist类来记录。剩下的进度条、轮廓圆和填充圆是需要我们绘制的。

我封装的circletextprogressbar特色

circletextprogressbar支持自动倒计时，自动减少进度，自动增加进度等。

如果需要自动走进度的话，设置完你自定义的属性后调用start()方法就可以自动倒计时了，如果想走完后再走一遍自动进度调用一下restart()就ok了。

如果不想自动走进度，你可以通过setprogress()来像系统的progress一样修改进度值。

// 和系统普通进度条一样，0-100。
progressbar.setprogresstype(circletextprogressbar.progresstype.count);
// 改变进度条。
progressbar.setprogresslinewidth(30);// 进度条宽度。
// 设置倒计时时间毫秒，默认3000毫秒。
progressbar.settimemillis(3500);
// 改变进度条颜色。
progressbar.setprogresscolor(color.red);
// 改变外部边框颜色。
progressbar.setoutlinecolor(color.red);
// 改变圆心颜色。
progressbar.setincirclecolor(color.red);
// 如果需要自动倒计时，就会自动走进度。
progressbar.start();
// 如果想自己设置进度，比如100。
progressbar.setprogress(100);

踩坑的过程

其实好久没有写过自定义view了，有些东西还真忘记了，所以写这个view的时候又把之前的坑踩了一遍，为了避免其它同学也被坑，这里把我踩的坑也记录下。

view绘制区域

这里我遇到一个问题，因为我们继承的textview文字多了就是长的，那么绘制出来的圆长宽是一样的，所以在textview上绘制出来的圆只能看到一部分或者是椭圆的。所以我们要把view的绘制区域扩大。当时我第一个想到的是layout()方法，因为当view的父布局onlayout()的时候会调用view的layout()来让子view布局，我重写了layout方法：

@override
public void layout(int left, int top, int right, int bottom) {
 int w = right - left;
 int h = bottom - top;
 int size = w > h ? w : h;

 if (w > h) {
 bottom += (size - h);
 } else {
 right += (size - w);
 }
 super.layout(left, top, right, bottom);
}

这段代码的原理就是宽和高，那个大，就把view扩大到这么最大的这个值。

当放了一个view在layout时，效果出来没问题，但是我放多个view到linearlayout中的时候发现几个view重叠了，哦舍特。我恍然大悟啊，这尼玛人家layout已经把我绘制区域的宽高指定了，我强行去占领别的view的了。so，我应该重写onmeasure()啊，在测量宽高的时候就告诉父layout我要多大的地盘：

@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
 super.onmeasure(widthmeasurespec, heightmeasurespec);
 int width = getmeasuredwidth();
 int height = getmeasuredheight();
 int size = width > height ? width : height;
 setmeasureddimension(size, size);
}

这段代码的意思更容易理解，就是看super.onmeasure测量的时候的宽高哪个大，就把宽高都设置成最大的这个值。告诉父layout我要多大的地盘，那么等我绘制的时候我想怎么玩就怎么玩。

绘制view的实现

好了，来到了关键的地方，前面的都搞定了就看我们怎么绘制我们的几个圆圈圈了。画圆圈圈就要重写ondraw()方法啦。

首先需要一个画笔：

paint mpaint = new paint();
mpaint.setantialias(true);// 抗锯齿

拿到绘制区域

我们可以通过getdrawingrect(rect)获取到绘制区域，通过绘制区域计算出这个区域可以绘制圆的半径。

rect bounds = new rect();

@override
protected void ondraw(canvas canvas) {
 getdrawingrect(bounds);//获取view的边界

 int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();
 float outerradius = size / 2; // 计算出绘制圆的半径
}

绘制填充圆

那么刚才提到过点击的时候变色，所以我们要用到colorstatelist，这里做一个初始化，并且支持在xml中定义这个属性：

// 默认透明填充。
colorstatelist incirclecolors = colorstatelist.valueof(color.transparent);

private void initialize(context ctx, attributeset attributeset) {
 typedarray typedarray = ctx.obtainstyledattributes(attributeset, r.styleable.progressbar);
 incirclecolors = typedarray.getcolorstatelist(r.styleable.progressbar_circle_color);
 typedarray.recycle();
}

不明白如何自定view xml属性的同学请求自行google。

根据点击、check、select状态绘制填充圆的颜色，因为是填充，所以这里paint的style是fill：

int circlecolor = incirclecolors.getcolorforstate(getdrawablestate(), 0);
mpaint.setstyle(paint.style.fill);
mpaint.setcolor(circlecolor);
canvas.drawcircle(bounds.centerx(), bounds.centery(), outerradius - outlinewidth, mpaint);

圆心是绘制区域的圆心，半径是绘制区域圆的半径减去外部轮廓圆线的宽度。这样正好填充圆和外部轮廓圆不重叠。

绘制外部边框圆

这个就简单了，因为是空心的线，所以style是stroke，然后设置线的宽度，画笔的颜色：

mpaint.setstyle(paint.style.stroke);
mpaint.setstrokewidth(outlinewidth);
mpaint.setcolor(outlinecolor);
canvas.drawcircle(bounds.centerx(), bounds.centery(), outerradius - outlinewidth / 2, mpaint);

圆心是绘制区域的圆心，半径是绘制区域圆的半径减去外部轮廓圆线的宽度的一半，这样刚好外部轮廓线和内部填充圆紧靠着。

绘制textview的字

为了我们的绘制和textview自身的绘制不重叠，我们干掉了super.ondraw(canvas);，所以这里我们要把textview的字也要写上去。

首先拿到textview的默认画笔，设置textview本身的字体颜色，抗锯齿，为了美观我们强行让文字居中：

//画字
paint paint = getpaint();
paint.setcolor(getcurrenttextcolor());
paint.setantialias(true);
paint.settextalign(paint.align.center);
float texty = bounds.centery() - (paint.descent() + paint.ascent()) / 2;
canvas.drawtext(gettext().tostring(), bounds.centerx(), texty, paint);

绘制进度条

进度条可不是一个圆了喔，准确的说它是一个圆弧，
画笔使用默认画笔，设置颜色、style为stroke，设置线的宽度，最后是指定绘制区域和圆心，角度：

rectf marcrect = new rectf();
rect bounds = new rect();

@override
protected void ondraw(canvas canvas) {
 getdrawingrect(bounds);//获取view的边界
 ...

 // 绘制进度条圆弧。
 mpaint.setcolor(progresslinecolor);
 mpaint.setstyle(paint.style.stroke);
 mpaint.setstrokewidth(progresslinewidth);
 mpaint.setstrokecap(paint.cap.round);
 int deletewidth = progresslinewidth + outlinewidth;
 // 指定绘制区域
 marcrect.set(bounds.left + deletewidth / 2, bounds.top + deletewidth / 2,
 bounds.right -deletewidth / 2, bounds.bottom - deletewidth / 2);
 canvas.drawarc(marcrect, 0, 360 * progress / 100, false, mpaint);
｝

这里难点在指定绘制区域，因为不能把外部轮廓线覆盖了，所以要贴近外部轮廓线的内部画，所以要最外层绘制圆的区域，所以要减去(外部圆线的宽 + 进度条线的宽) / 2得出来的界线就是进度条的边界。

绘制和测量的完整代码

到这里关键代码都撸完了，你可以自己写一个试试了，我这里把完整的ondraw()和onmeasure()的源码贴出来：

private int outlinecolor = color.black;
private int outlinewidth = 2;
private colorstatelist incirclecolors = colorstatelist.valueof(color.transparent);
private int circlecolor;
private int progresslinecolor = color.blue;
private int progresslinewidth = 8;
private paint mpaint = new paint();
private rectf marcrect = new rectf();
private int progress = 100;
final rect bounds = new rect();

@override
protected void ondraw(canvas canvas) {
 //获取view的边界
 getdrawingrect(bounds);

 int size = bounds.height() > bounds.width() ? bounds.width() : bounds.height();
 float outerradius = size / 2;

 //画内部背景
 int circlecolor = incirclecolors.getcolorforstate(getdrawablestate(), 0);
 mpaint.setstyle(paint.style.fill);
 mpaint.setcolor(circlecolor);
 canvas.drawcircle(bounds.centerx(), bounds.centery(), outerradius - outlinewidth, mpaint);

 //画边框圆
 mpaint.setstyle(paint.style.stroke);
 mpaint.setstrokewidth(outlinewidth);
 mpaint.setcolor(outlinecolor);
 canvas.drawcircle(bounds.centerx(), bounds.centery(), outerradius - outlinewidth / 2, mpaint);

 //画字
 paint paint = getpaint();
 paint.setcolor(getcurrenttextcolor());
 paint.setantialias(true);
 paint.settextalign(paint.align.center);
 float texty = bounds.centery() - (paint.descent() + paint.ascent()) / 2;
 canvas.drawtext(gettext().tostring(), bounds.centerx(), texty, paint);

 //画进度条
 mpaint.setcolor(progresslinecolor);
 mpaint.setstyle(paint.style.stroke);
 mpaint.setstrokewidth(progresslinewidth);
 mpaint.setstrokecap(paint.cap.round);
 int deletewidth = progresslinewidth + outlinewidth;
 marcrect.set(bounds.left + deletewidth / 2, bounds.top + deletewidth / 2,
 bounds.right - deletewidth / 2, bounds.bottom - deletewidth / 2);

 canvas.drawarc(marcrect, 0, 360 * progress / 100, false, mpaint);
}

@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) {
 super.onmeasure(widthmeasurespec, heightmeasurespec);
 int linewidth = 4 * (outlinewidth + progresslinewidth);
 int width = getmeasuredwidth();
 int height = getmeasuredheight();
 int size = (width > height ? width : height) + linewidth;
 setmeasureddimension(size, size);
}

目前已知的兼容问题修复
 1.目前circletextprogressbar在reletivelayot中高度会变大，导致进度条会有一点点扁。修复方法如下：
如果你要在reletivelayot中使用circletextprogressbar，就不要重写onmeasure()方法，然后在xml中指定circletextprogressbar的宽高就好，比如都指定为50dp，然后就没有问题啦。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。