Android自定义圆形进度条

最新推荐文章于 2024-04-06 19:10:20 发布

cassie_7579

最新推荐文章于 2024-04-06 19:10:20 发布

阅读量563

点赞数 1

分类专栏：日常学习文章标签：自定义View 进度条 Android 渐变

本文链接：https://blog.csdn.net/weixin_38293206/article/details/95737093

版权

日常学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前话

最近因为项目的一个需求，自定义了一个百分比进度条的 View，话不多说直接上图。

Android自定义进度条

这就我们自定义出来的ui的效果图了，接下来我们来细细说我们是如何一步一步做成这个的，本文章关于 Canvas 和 Paint 就不再赘述了。

一、绘图

1. 绘图思路

在绘图前我们先把我们的绘图思路捋清楚，大致思路如下图：

2. 开始绘图

（1）画背景圆，中间白色的圆，中间的文字

画背景圆和白色的圆比较简单这里就不做解释了，这里值得注意的是计算文字大小还有计算文字的位置，我们通过 measureTextHeight(Paint paint) 方法来计算文字的高度，通过 getTextWidth(Paint paint, String str) 计算文字的宽度，然后我们知道了文字的宽度和高度就可以求出文字应该放在哪个位置了，我这边是两个文字居中。

关于我们这个进度条的一些尺寸变量定义如下图

OB = bgCirleR = bgCircleSize/2;

OW = whiteCirleR = whiteCirleSize /2;

EF = bigProSize = proWidth;

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas); 
    //中心点
    centerX = getWidth() / 2;
    centerY = getHeight() / 2;

    //proPadding 是圆形和布局的 padding 值
    bgCirleSize = getWidth() - proPadding;
    //proWidth 是进度条的宽度
    whiteCirleSize = bgCirleSize - proWidth;
    bigProSize = bgCirleSize / 2 - whiteCirleSize / 2;

    //大背景圆画笔
    greyPaint = new Paint();
    greyPaint.setColor(Color.parseColor("#E9E9E9"));

    //中间白圆画笔
    whitePaint = new Paint();
    whitePaint.setColor(Color.WHITE);
    
    //值文字画笔
    valueTextPaint = new Paint();
    valueTextPaint.setColor(valueTextColor);

    //提示文字画笔
    hintTextPaint = new Paint();
    hintTextPaint.setColor(hintTextColor);

    //设置字体大小
    hintTextPaint.setTextSize(DensityUtil.dip2px(getContext(), hintTextSize));
    valueTextPaint.setTextSize(DensityUtil.dip2px(getContext(), valueTextSize));

    //画背景圆
    canvas.drawCircle(centerX, centerY, bgCirleSize / 2, greyPaint);
    //画中心圆
    canvas.drawCircle(centerX, centerY, whiteCirleSize / 2, whitePaint);
    //提示文字
    String sevenText = hideText;
    //百分比文字
    String valueText = value + "%";

    //计算提示文字和数值文字的高度宽度
    float valueTextHight = measureTextHeight(valueTextPaint);
    float textPadding = DensityUtil.dip2px(getContext(), 8);
    float sevenTextWeight = getTextWidth(hintTextPaint, sevenText);
    float valueTextWeight = getTextWidth(valueTextPaint, valueText);
    //画实时充电量文字
    canvas.drawText(sevenText, centerX - sevenTextWeight / 2,
                centerY - valueTextHight / 2, hintTextPaint);
    //画值文字
    canvas.drawText(valueText, centerX - valueTextWeight / 2,
                centerY + textPadding + valueTextHight / 2, valueTextPaint);
    
}
/**
 * 测量文字高度
 *
 * @param paint 画笔
 * @return
 */
public static float measureTextHeight(Paint paint) {
    Paint.FontMetrics fontMetrics = paint.getFontMetrics();
    return (Math.abs(fontMetrics.ascent) - fontMetrics.descent);
}

/**
 * 测量文字宽度
 *
 * @param paint 画笔
 * @param str   文字
 * @return
 */
public static int getTextWidth(Paint paint, String str) {
    int iRet = 0;
    if (str != null && str.length() > 0) {
        int len = str.length();
        float[] widths = new float[len];
        paint.getTextWidths(str, widths);
        for (int j = 0; j < len; j++) {
            iRet += (int) Math.ceil(widths[j]);
        }
    }
    return iRet;
}

画出来的 View 是这样的

（2）画小预进度条和大进度条

其实小预设进度条和大进度条包括后面的小圆点的中心圆颜色都是同一个渐变色模块，其实这里对小预进度条没需求直接不用加（其实加了好像也没多好看。。。），圆形角度渐变我们要说一下 SweepGradient 这个类其实是 Shader（着色器）的子类。SweepGraient 提供两个构造方法分别是

方法1：SweepGradient(float cx, float cy,@NonNull @ColorInt int colors[], @Nullable float positions[])

方法2：SweepGradient(float cx, float cy, @ColorInt int color0, @ColorInt int color1)

方法1可以设置多个渐变颜色，而方法二只能设置两个渐变颜色。我们在这里要用到的是方法1

这个 colors[] 明显是放颜色的 int 值的，那这个 float[] 放的又是什么值呢？这个 positions[] 放的是对应颜色的界值，并且里面的值属于[ 0.0f, 1.0f ] 这个区间内，这样说有点难理解，其实就是我把我的渐变背景色均分成 n 份，然后就存在这第 n / postions[i] 份的颜色 = color[i] 的颜色这样的定律。当然这里postions[i] =0 的时候的颜色 color[0] ，毕竟分母不能为0...

然后这里还有一个关键点，如果你直接用 SweepGradient 你会发现，渐变效果是从3点钟方向顺时针进行渐变，那如果我们不是要3点钟方向的话我们就需要引入 Matrix , 通过 sweepGradient.setLocalMatrix(matrix); 设置渐变矩阵。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //.... 前面的其他代码
    //渐变颜色
    proColor = new int[]{Color.parseColor("#E66B00"), Color.parseColor("#FAD061"),
                Color.parseColor("#4AB84F")};
    //渐变范围
    proFloat = new float[]{0f, 0.5f, 1f};
    //设置渐变颜色
    SweepGradient sweepGradient = new SweepGradient(centerX, centerY, proColor,proFloat);
    //将颜色的起始位置调到正下方
    Matrix matrix = new Matrix();
    matrix.setRotate(90, centerX, centerX);
    sweepGradient.setLocalMatrix(matrix);

    //小进度条
    smallProPaint = new Paint();
    smallProPaint.setStyle(Paint.Style.STROKE);
    smallProPaint.setStrokeWidth(DensityUtil.dip2px(getContext(), 1));
    smallProPaint.setShader(sweepGradient);
    //计算位置
    float leftAndTop = (bgCirleSize / 2 - whiteCirleSize / 2) +
                (centerX - bgCirleSize / 2);
    float rightAndBottom = (centerX * 2) - ((centerX - bgCirleSize / 2) +
                (bgCirleSize / 2 - whiteCirleSize / 2));
    //设置弧的上下左右的点
    smallRectF = new RectF(leftAndTop, leftAndTop, rightAndBottom, rightAndBottom);

    //大进度条
    bigProPaint = new Paint();
    //描边
    bigProPaint.setStyle(Paint.Style.STROKE);
    //开启抗锯齿
    bigProPaint.setAntiAlias(true);
    //大进度条的粗细
    bigProPaint.setStrokeWidth(bigProSize);
    //设置进度条颜色
    bigProPaint.setShader(sweepGradient);
    //设置弧的上下左右的点
    bigRectF = new RectF(leftAndTop - bigProSize / 2, leftAndTop - bigProSize / 2,
                rightAndBottom + bigProSize / 2, rightAndBottom + bigProSize / 2);
    
    //画小进度条 maxUseValue 是可用的最大进度条值
    canvas.drawArc(smallRectF, 92, (float) (maxUseValue * 3.6), false, smallProPaint);
    //画大进度条
    canvas.drawArc(bigRectF, 90, (float) (value * 3.6), false, bigProPaint);


}

这里再补充说明一下 RectF 类和 canvas.drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) 方法。

我们通过 RectF 类的 RectF(float left, float top, float right, float bottom) 这个构造方法来确定我们的圆弧的对应的外切圆的4个切点，我们画的圆弧的宽度的中点就在这些外切圆的点上，这一点要注意，容易出错。

anvas.drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter, @NonNull Paint paint) 方法

第一个参数就是我们前面说的 RectF

第二个参数：float startAngle 画圆弧的起始位置（按照360°来画的，顺时针走的，0是X粥的正半轴方向，所以我们这里应该是90°）

第三个参数：float sweepAngle 这个参数是我们圆弧走的角度 0°-360°

第四个参数：Paint paint 就是我们的画笔了，我们要什么样式就是在这里设置的

效果如下

（3）画小圆点（难点）

我们画小圆点最难的就是找到小圆点的坐标位置

计算小圆点的坐标位置

这里我们直接上个图来讲解（注：centerX = getWight()/2 centerY = getHight()/2）

计算出位置我们就可以开始画圆了，在画圆的时候要注意我们要画的阴影

画阴影其实是画一个圆，这个圆的颜色是圆形向外渐变，圆心颜色通过 ArgbEvaluator 这个类和我们当前的进度条值（value）以及颜色区间获取到，然后设置渐变这里用到的是RadialGradient 这个类，一样是 Shader (着色器）的子类，该类提供了两个构造方法：

方法1： RadialGradient(float centerX, float centerY, float radius, @NonNull @ColorInt int colors[], @Nullable float stops[], @NonNull TileMode tileMode)

方法2：RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode)

其实这个类的构造方法和上面的 SweepGradient 类的构造方法的入参差不多，唯一的区别就是最后一个参数 TileMode 类型的参数，这个 TileMode 其实是一个枚举类，有三个值分别是 CLAMP (从中心点渐变出去) , PEPEAT （水平方向和垂直重复渐变色） , MIRROR（水平和垂直渐变交替）。符合我们的明显是 CLIAMP。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //...前面的代码

    //计算出小圆点的x轴y轴
    double childCenterX;
    double childCenterY;
    //这里的角度没有+90 是因为小圆点是圆的 在渐变色里面会出现小圆点里有两个颜色 在这里进行调整
    if (value < (maxValue * 2) / 3) {
         childCenterX = centerX + ((bgCirleSize / 2) - (bgCirleSize - whiteCirleSize) / 2 + bigProSize / 2)
         * Math.cos(Math.toRadians(96 + (float) (value * 3.6)));
         childCenterY = centerY + ((bgCirleSize / 2) - (bgCirleSize - whiteCirleSize) / 2 + bigProSize / 2) 
         * Math.sin(Math.toRadians(96 + (float) (value * 3.6)));
     } else {
         childCenterX = centerX + ((bgCirleSize / 2) - (bgCirleSize - whiteCirleSize) / 2 + bigProSize / 2)
         * Math.cos(Math.toRadians(84 + (float) (value * 3.6)));
         childCenterY = centerY + ((bgCirleSize / 2) - (bgCirleSize - whiteCirleSize) / 2 +bigProSize / 2)
         * Math.sin(Math.toRadians(84 + (float) (value * 3.6)));
     }

    //计算阴影的颜色
    ArgbEvaluator argbEvaluator = new ArgbEvaluator();
    int pointColor;
    if (nowValue <= 50) {
        pointColor = (int) argbEvaluator.evaluate((float) nowValue / 100, proColor[0], proColor[1]);
    } else
        pointColor = (int) argbEvaluator.evaluate((float) nowValue / 100, proColor[1], proColor[2]);

    //阴影渐变颜色
    RadialGradient radialGradient = new RadialGradient((float) childCenterX, (float) childCenterY, bigProSize + 
            DensityUtil.dip2px(getContext(), 5),new int[]{pointColor, Color.TRANSPARENT},
            new float[]{0.5f, 1f}, Shader.TileMode.CLAMP);
    shadePonitPaint.setShader(radialGradient);
    //画阴影
    canvas.drawCircle((float) childCenterX, (float) childCenterY, bigProSize +     
          DensityUtil.dip2px(getContext(), 5), shadePonitPaint);
    //小圆点外面的白环 （其实是一个圆）
    canvas.drawCircle((float) childCenterX, (float) childCenterY, bigProSize + DensityUtil.dip2px(getContext(), 1), whitePaint);
    //画小圆点
    canvas.drawCircle((float) childCenterX, (float) childCenterY, bigProSize, pointPaint);
    


}

效果如下

（4）加上动画

写累了，你们来吧

三、代码链接

附上代码下载链接：https://download.csdn.net/download/weixin_38293206/11343617

四、欢迎吐槽

欢迎吐槽交流~~~

cassie_7579

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Android自定义圆形进度条

前话最近因为项目的一个需求，自定义了一个百分比进度条的 View，话不多说直接上图。这就我们自定义出来的ui的效果图了，接下来我们来细细说我们是如何一步一步做成这个的，本文章关于 Canvas 和 Paint 就不再赘述了。一、绘图1. 绘图思路在绘图前我们先把我们的绘图思路捋清楚，大致思路如下图：2. 开始绘图（1）画背景圆，中间白色的圆，中间的文字画背景...
复制链接

扫一扫