android 自定义酷炫进度条动画

2401_84558590

于 2024-04-29 03:01:43 发布

阅读量301

点赞数 5

分类专栏：程序员文章标签： android

本文链接：https://blog.csdn.net/2401_84558590/article/details/138297694

版权

程序员专栏收录该内容

173 篇文章

订阅专栏

本文详细介绍了如何在Android中实现自定义的酷炫进度条动画，包括抗锯齿、防抖动效果，以及圆环和文字的绘制。通过`onDraw()`方法绘制圆弧和圆，并使用`Shader`进行颜色渐变。还提供了更新进度的逻辑和文字居中绘制的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

mPaint.setShader(null);

mPaint.setAntiAlias(); // 抗锯齿

mPaint.setDither(); // 防抖动

// 半径，这里减去40是将半径缩小40

outerRadius = (getWidth() < getHeight() ? getWidth() : getHeight()) / 2f-40;

centerX = getWidth() / 2f;

centerY = getHeight() / 2f;

mPaint.setStyle(Paint.Style.FILL);

int count = 0;

int des = (int) TypedValue.applyDimension(

TypedValue.COMPLEX_UNIT_DIP, 6, getResources().getDisplayMetrics());

while(count++ < 50) {

canvas.drawRect(centerX-3,centerY-outerRadius,centerX+3,centerY-outerRadius+des,

mPaint);

canvas.rotate(10.0f, centerX, centerY);

}

第三部分

1.绘制圆环和圆，绘制文字这几个是放到一个View处理的，因为不用涉及到旋转，所以可以放到一起绘制。这部分是参考了另外一篇博客，有兴趣的读者也可以享用自定义进度条

2.画圆这个比较简单不说，圆环的话，其实就是画圆弧，画圆弧的时候会先确定一个外接矩形，设置画笔类型为描边circlePaint.setStyle(Paint.Style.STROKE);同时不包含圆心，就可以了。具体的可以看下这篇博客 drawArc画圆弧介绍，这里不便展开。

private void drawCircle(Canvas canvas, int center, int radius)

{

//画一个简单的圆

firstPaint.setShader(null); // 清除上一次的shader

firstPaint.setColor(firstColor); // 设置底部圆环的颜色，这里使用第一种颜色

firstPaint.setStyle(Paint.Style.STROKE); // 设置绘制的圆为空心

canvas.drawCircle(center, center, radius+40, firstPaint);

//画一个圆环

RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);

circlePaint.setShader(null);

// 绘制颜色渐变圆环

// shader类是Android在图形变换中非常重要的一个类。Shader在三维软件中我们称之为着色器，其作用是来给图像着色。

LinearGradient linearGradient = new LinearGradient(circleWidth, circleWidth, getMeasuredWidth()

circleWidth, getMeasuredHeight() - circleWidth, colorArray, null, Shader.TileMode.MIRROR);

circlePaint.setShader(linearGradient);

//这里注意设置为描边类型

circlePaint.setStyle(Paint.Style.STROKE);

circlePaint.setShadowLayer(10, 10, 10, Color.RED);

circlePaint.setColor(secondColor); // 设置圆弧的颜色

circlePaint.setStrokeCap(Paint.Cap.ROUND); // 把每段圆弧改成圆角的

// 计算每次画圆弧时扫过的角度，这里计算要注意分母要转为类型，否则alphaAngle永远为0

alphaAngle = currentValue * 360.0f / maxValue * 1.0f;

canvas.drawArc(oval, -90, alphaAngle, , circlePaint);

}

3.可以看到绘制圆环的时候,用到alphaAngle，这个是扫过的角度，根据currentValue当前的进度值，得出当前扫过的角度。maxValue是100最大进度值。更新进度的时候会调用以下这个方法进行更新，在invalidate()被调用后，View会进行重绘，回调onDraw()方法，得出新的alphaAngle角度值，绘制出对应进度的圆环。

Progress(int progress)

{

int percent = progress * maxValue / 100;

if(percent < 0)

{

percent = 0;

}

if(percent > 100)

{

percent = 100;

}

this.currentValue = percent;

//更新View

invalidate();

}

4.绘制文字也是同样的道理，通过setProgress()方法来更新currentValue值。这里绘制文字有个注意的地方：文字的绘制位置居中。drawText()方法的第二三个参数分别是Text文字x,y坐标，这里为什么设置为center和baseline这两个值是有原因的，墙裂推荐这篇博客了解原因：

private void drawText(Canvas canvas, int center, int radius)

{

result = (currentValue * 100.0f / maxValue * 1.0f); // 计算进度

String percent = String.format(;

textPaint.setTextAlign(Paint.Align.CENTER); // 设置文字居中，文字的x坐标要注意

textPaint.setColor(textColor); // 设置文字颜色

textPaint.setTextSize(40); // 设置要绘制的文字大小

textPaint.setStrokeWidth(0); // 注意此处一定要重新设置宽度为0,否则绘制的文字会重叠

Rect bounds = new Rect(); // 文字边框

textPaint.getTextBounds(percent, 0, percent.length(), bounds); // 获得绘制文字的边界矩形

Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt(); // 获取绘制Text时的四条线

int baseline = center + (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;