首页手记 Android 自定义带入场动画的弧形百分比进度条

Android 自定义带入场动画的弧形百分比进度条

标签：

Android

写在前面

这是在简书发表的处女座，这个想法也停留在脑海中很久了，一直拖到现在(懒癌发作2333)，先自我介绍一番，一枚刚毕业不久的Android程序猿，初出茅庐的Android小生，之前一直在CSDN发表技术文章，但感觉相比之下简书的整体体验会稍好一些，希望能够在简书留下对自己技术的成长足迹，总结开发过程中的一些小小心得，这也是一个新的开始，互相学习，无量变何以质变。

正文

概述

日常开发经常会有遇到使用进度条的地方，有些场景会需要使用圆形百分比进度条来更优雅地表示当前的进度，并赋予一些入场动画，使得页面更有活力（比如一些运动App，表示能量的进度条，消耗卡路里的进度条等等），给用户一种不断累积的视觉感：

image

需要定制的特性

1.设置圆弧半径

2.背景圆弧的粗细

3.进度圆弧的粗细

4.设置进度颜色

5.中心文字大小颜色内容

6.进度值最大值

7.动画时间

实现思路

一共可以分为3部分来绘制: 底部的圆、进度弧线、中心文本，最终结合动画达成效果。

1）绘制底部圆

底部绘制圆采用drawCircle(float cx, float cy, float radius, Paint paint)

代码如下：

/**
 * 绘制后面的整圆
 */paint.setStyle(Paint.Style.STROKE); //设置空心paint.setStrokeWidth(bgStrokeWidth); //设置圆环的宽度paint.setColor(roundColor);
paint.setAntiAlias(true);  //消除锯齿canvas.drawCircle(center, center, radius, paint);

2）绘制中心文本

中心文本采用drawText(String text, float x, float y, Paint paint)

这里需要解决一个点，如何计算文本的位置，让文本整体居中？
可以计算整个View的中心点的坐标，可以通过Paint的 measureText 方法获得文本的宽度，centerX-textWidth/2 即可得到文本的left，同理根据centerY - textSize/2 即可得到文本的top。

代码如下：

/**
  * 画进度百分比文本
*/paint.setStrokeWidth(0);
paint.setColor(textColor);
paint.setTextSize(textSize);
paint.setTypeface(Typeface.DEFAULT); //设置字体if (!TextUtils.isEmpty(centerText)) {     //如果是设置文本内容，则直接测量文本长度并绘制
     float textWidth = paint.measureText(centerText);
     canvas.drawText(centerText, center - textWidth / 2, center + textSize / 2, paint); //画出进度百分比} else {     //如果是设置百分比，则计算百分比并绘制
     int percent = (int) (((float) progressValue / (float) maxValue) * 100);  //中间的进度百分比，先转换成float在进行除法运算，不然都为0
     float textWidth = paint.measureText(percent + "%");   //测量字体宽度，我们需要根据字体的宽度设置在圆环中间
     if (percent != 0) {
        canvas.drawText(percent + "%", center - textWidth / 2, center + textSize / 2, paint); //画出进度百分比
     }
}

3）绘制进度弧线

从效果图中可以看出，进度条是从底部中心开始向两边展开，可以通过ValueAnimator让当前进度(接下来以curProgress代称)从0开始增长至最终的目标进度

进度条的绘制采用 canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint);
oval 弧形所在的区域，可以理解为弧形的边界
startAngle 弧形的起始弧度以x轴正方向为0°为起始点计算
sweepAngle 弧形的长度以startAngle为起始点计算，顺时针方向扫过的角度
useCenter 设为true时会将圆心与弧线包围的区域也同时绘制，类似扇形效果
paint 绘制弧形的画笔

画了张示意图方便理解：
drawArc示意图.png

为了实现从底部向上绘制弧线，drawArc 的 sweepAngle 肯定是(progress/max)*360，startAngle则要通过计算来动态变更。
以0°为界限，180*(curProgress/maxProgress)则表示sweepAngle的一半的长度假如当前curProgress/maxProgress 大于0.5，说明进度条弧度的一边已经超过了0°的界限，说明进度条弧度的startAngle要小于0且超过的这部分的长度 = -(180*(curProgress/maxProgress) - 90);假如当前curProgress/maxProgress 小于0.5，说明进度条弧度的一边未超过0°的界限，说明进度条弧度的startAngle要大于0且超过的这部分的长度 = 90 - 180*(curProgress/maxProgress);最终其实都可以采用90 - 180*(curProgress/maxProgress) 的计算得到当前的startAngle

代码如下：

/*
* 绘制有效的进度条弧线
*///设置圆环的宽度paint.setStrokeWidth(progressStrokeWidth);//设置进度的颜色paint.setColor(progressColor);
paint.setStrokeCap(Paint.Cap.ROUND);//用于定义的圆弧的形状和大小的界限RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);
paint.setStyle(Paint.Style.STROKE);//根据进度画圆弧canvas.drawArc(oval, 90 -180 * ((float) progressValue / (float) maxValue), 360 * progressValue / maxValue, false, paint);

4）入场动画

只需要不断更新当前的progress值，从0增长到目标进度，然后不断调用invalidate去刷新UI，代码如下：

/**
     * 弧线动画
     *
     * @param last    起始值
     * @param current 最终值
     * @param length  动画时间
 */private void setAnimation(float last, float current, int length) {
        ValueAnimator progressAnimator = ValueAnimator.ofFloat(last, current);
        progressAnimator.setDuration(length);
        progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {            @Override
            public void onAnimationUpdate(ValueAnimator animation) {                float value = (float) animation.getAnimatedValue();
                progressValue = (int) value;
                invalidate();
            }
        });
        progressAnimator.start();
}