当前位置： 首页 > news >正文

重学 Android 自定义 View 系列(六)：环形进度条

news 2025/6/27 4:14:09

目标

自定义一个环形进度条，可以自定义其最大值、当前进度、背景色、进度色，宽度等信息。

最终效果如下（GIF展示纯色有点问题）：
在这里插入图片描述

1. 结构分析

  • 背景圆环：表示进度条的背景。
  • 进度圆环：表示当前进度，根据进度值动态绘制圆环。
  • 进度值文本：在圆环中间展示进度。

2. 实现思路

  1. 定义自定义属性：在 res/values/attrs.xml 中定义自定义属性，以便通过 XML 配置自定义的视图样式。
  2. 初始化视图元素：在构造函数中，根据传入的属性初始化各种画笔、尺寸和视图元素。
  3. 绘制视图内容：重写 onDraw 方法，使用画笔绘制背景圆环、进度圆环和文本。
  4. 支持动态更新进度：提供 setProgress 方法，允许外部动态设置进度，触发视图重绘。

3. 关键技术点解析

我们首先要知道，画圆的基础是有个正方形，或者说有一个正方形的坐标，还要考虑到画笔的宽度，所以我们首先就要确定矩形的大小：

    @Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);int padding = circleWidth / 2;rectF.set(padding, padding, w - padding, h - padding);}

circleWidth 为圆环的宽，也为圆环画笔的宽。

canvas.drawArc是用于绘制弧形（圆弧）的一种方法，具体参数在前几篇文章已介绍，再次不做赘述。这里主要自定义了进度开始的角度，即 startAngle 属性。

textPaint.setTextAlign(Paint.Align.CENTER)

重点关注下文本画笔的这个属性，在前几篇文章中都是通过计算基线的方式确保文本水平居中的，本篇文章的实现方式不同，先来看下setTextAlign 的作用：

textPaint.setTextAlign(Paint.Align.CENTER) 是 Paint 类中的一个设置文本对齐方式的方法。它用于控制文本在指定位置绘制时的对齐方式，具体来说，它影响了绘制文本时文本的起始点（x，y 坐标）如何被确定。

作用：

Paint.Align 是一个枚举，定义了文本绘制时如何对齐相对于给定的 x 和 y 坐标。常用的对齐方式有三个选项：

  1. Paint.Align.LEFT：

    • 文本绘制时，文本的起始位置在 x 坐标上。
    • 也就是说，文本的左边缘会对齐到 x 坐标。

  2. Paint.Align.CENTER：

    • 文本绘制时，文本的中心位置与 x 坐标对齐。
    • 这意味着文本的中点（水平中心）会与 x 坐标对齐，从而实现水平居中。

  3. Paint.Align.RIGHT：

    • 文本绘制时，文本的右边缘会对齐到 x 坐标。
    • 也就是说，文本的右边缘会对齐到指定的 x 坐标，x 坐标即为文本的终点。

所以说现在我们不用计算基线，而是给drawText一个中心的 x 坐标，文字就能做到水平居中了！

4. 定义自定义属性

  <declare-styleable name="CircularProgressBar"><!-- 进度条的最大值 --><attr name="maxProgress" format="integer"/><!-- 当前进度 --><attr name="progress" format="integer"/><!-- 环形进度条的背景色 --><attr name="circleBackgroundColor" format="color"/><!-- 进度条的颜色 --><attr name="progressColor" format="color"/><!-- 进度条的宽度 --><attr name="circleWidth" format="dimension"/><!-- 显示进度文本 --><attr name="showProgressText" format="boolean"/><!-- 进度文本的颜色 --><attr name="progressTextColor" format="color"/><!-- 进度文本的大小 --><attr name="progressTextSize" format="dimension"/><!-- 开始角度 --><attr name="startAngle" format="enum"><enum name="angle0" value="0"/><enum name="angle90" value="90"/><enum name="angle180" value="180"/><enum name="angle270" value="270"/></attr></declare-styleable>

5. 完整代码

public class CircularProgressBar extends View {private Paint backgroundPaint;private Paint progressPaint;private Paint textPaint;private RectF rectF;private int maxProgress = 100;private int progress = 0;private int circleBackgroundColor = Color.GRAY;private int progressColor = Color.GREEN;private int circleWidth = 20;private boolean showProgressText = true;private int progressTextColor = Color.BLACK;private int progressTextSize = 50;private int startAngle = 0; // 起始角度，默认从0开始public CircularProgressBar(Context context) {this(context, null);}public CircularProgressBar(Context context, AttributeSet attrs) {this(context, attrs, 0);}public CircularProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);// 初始化自定义属性if (attrs != null) {TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs,R.styleable.CircularProgressBar,0, 0);try {maxProgress = typedArray.getInt(R.styleable.CircularProgressBar_maxProgress, 100);progress = typedArray.getInt(R.styleable.CircularProgressBar_progress, 0);circleBackgroundColor = typedArray.getColor(R.styleable.CircularProgressBar_circleBackgroundColor, Color.GRAY);progressColor = typedArray.getColor(R.styleable.CircularProgressBar_progressColor, Color.GREEN);circleWidth = typedArray.getDimensionPixelSize(R.styleable.CircularProgressBar_circleWidth, 20);showProgressText = typedArray.getBoolean(R.styleable.CircularProgressBar_showProgressText, true);progressTextColor = typedArray.getColor(R.styleable.CircularProgressBar_progressTextColor, Color.BLACK);progressTextSize = typedArray.getDimensionPixelSize(R.styleable.CircularProgressBar_progressTextSize, 50);// 获取自定义的起始角度int angleValue = typedArray.getInt(R.styleable.CircularProgressBar_startAngle, 0);switch (angleValue) {case 90:startAngle = 90;break;case 180:startAngle = 180;break;case 270:startAngle = 270;break;default:startAngle = 0;break;}} finally {typedArray.recycle();}}// 设置画笔属性backgroundPaint = new Paint();backgroundPaint.setColor(circleBackgroundColor);backgroundPaint.setStyle(Paint.Style.STROKE);backgroundPaint.setStrokeWidth(circleWidth);backgroundPaint.setAntiAlias(true);progressPaint = new Paint();progressPaint.setColor(progressColor);progressPaint.setStyle(Paint.Style.STROKE);progressPaint.setStrokeWidth(circleWidth);progressPaint.setStrokeCap(Paint.Cap.ROUND);//圆角progressPaint.setAntiAlias(true);textPaint = new Paint();textPaint.setColor(progressTextColor);textPaint.setTextSize(progressTextSize);textPaint.setTextAlign(Paint.Align.CENTER);//文本对齐方式textPaint.setAntiAlias(true);rectF = new RectF();}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);int padding = circleWidth / 2;rectF.set(padding, padding, w - padding, h - padding);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 绘制背景圆环canvas.drawArc(rectF, 0f, 360f, false, backgroundPaint);// 绘制进度圆环float sweepAngle = 360f * progress / (float) maxProgress;// 根据起始角度调整起始位置float adjustedStartAngle = 0f;switch (startAngle) {case 90:adjustedStartAngle = 0f;break;case 180:adjustedStartAngle = 90f;break;case 270:adjustedStartAngle = 180f;break;default:adjustedStartAngle = -90f; // 默认从0度（顶部）开始break;}canvas.drawArc(rectF, adjustedStartAngle, sweepAngle, false, progressPaint);// 绘制进度文本if (showProgressText) {String progressText = progress + "%";// 使用视图的中心来计算x和y坐标float x = getWidth() / 2f;float y = getHeight() / 2f - (textPaint.descent() + textPaint.ascent()) / 2f;// 绘制文本canvas.drawText(progressText, x, y, textPaint);}}// 设置进度public void setProgress(int progress) {if (progress > maxProgress) {this.progress = maxProgress;} else {this.progress = Math.max(progress, 0);}invalidate(); // 重新绘制}// 获取当前进度public int getProgress() {return progress;}
}

6. 使用示例

xml：

<com.xaye.example.CircularProgressBarandroid:id="@+id/circularProgressBar"android:layout_width="140dp"android:layout_height="140dp"app:maxProgress="100"app:circleBackgroundColor="#DDDDDD"app:progressColor="#00B8D4"app:circleWidth="15dp"app:showProgressText="true"app:progressTextColor="#000000"app:progressTextSize="30sp"app:startAngle="angle0"/>

Activity：

val animator = ValueAnimator.ofInt(0, 80)animator.setDuration(2000)animator.interpolator = LinearInterpolator()animator.addUpdateListener { animation ->val value = animation.animatedValue as IntmBind.circularProgressBar.setProgress(value)}animator.start()

7. 最后

本篇没什么难度，主要是介绍点新的东西，再熟悉熟悉手感，再会。

另外给喜欢记笔记的同学安利一款好用的云笔记软件，对比大部分国内的这个算还不错的，免费好用：wolai

http://www.lryc.cn/news/483217.html

相关文章：

  • nodejs 020: React语法规则 props和state
  • STM32问题集
  • SwiftUI（十二）- 容器组件 布局与结构的基石
  • 想租用显卡训练自己的网络？AutoDL保姆级使用教程（PyCharm版）
  • LeetCode【0039】组合总和
  • AscendC从入门到精通系列（一）初步感知AscendC
  • PostgreSQL中的COPY命令：高效数据导入与导出
  • 【HAL库】STM32F105VCTx多通道ADC+DMA方式的【STM32CubeMX】配置及代码实现
  • [SaaS] 数禾科技 AIGC生成营销素材
  • vue3中查找字典列表中某个元素的值对应的列表索引值
  • 爱普生机器人EPSON RC
  • Linux探秘坊-------1.系统核心的低语：基础指令的奥秘解析（1）
  • ❤React-JSX语法认识和使用
  • 51单片机应用开发（进阶）---定时器应用（电子时钟）
  • JavaScript中的对象-栈内存和堆内存以及this指向的两种情况(后续会出进阶)
  • shell脚本使用curl上传FTP
  • 【漏洞分析】Fastjson最新版本RCE漏洞
  • 【项目开发 | 跨域认证】JSON Web Token（JWT）
  • 杨中科 .Net Core 笔记 DI 依赖注入2
  • 微信版产品目录如何制作？
  • 使用HTML、CSS和JavaScript创建动态圣诞树
  • 机器学习-35-提取时间序列信号的特征
  • 【软件测试】设计测试用例的万能公式
  • 【MySQL 保姆级教学】事务的自动提交和手动提交（重点）--上（13）
  • CUDA 核心与科学计算 ：NVIDIA 计算核心在计算服务器的价值
  • 架构师之路-学渣到学霸历程-58
  • qq相册为啥越来越糊
  • ＜有毒？！＞ 诺顿检测：这篇 CSDN 文章有病毒
  • matlab实现主成分分析方法图像压缩和传输重建
  • 18.UE5怪物视野、AI感知、攻击范围、散弹技能