Android开发如何自定义View实现圆弧进度效果

news2024/9/23 5:25:19

在Android开发中，通过自定义View实现自己想要的效果是作为android开发程序员的一项必备技能，自定义View对于android开发来说也是比较难的一项技术。

涉及到的知识Canvas（画布）,Paint（画笔），自定义控件等有三种：一个是直接从View继承，完全的自定义；二是对原有控件进行改造，达到想要的效果；还有一种自定义的组合控件，根据自己的需要将已有的控件组合起来达到效果。我对自定义视图也略知一二，就简单记录一下自己对自定义视图的学习吧（继承自View）过程，方便日后阅读。
​在这里插入图片描述
技术实现
1.ArcView继承自View
2.Canvas（画布）
3.Paint（画笔）
效果图：类似于QQ的计步效果
在这里插入图片描述

1.继承自View

重写3个构造方法（新的API中的构造方法是4个）

public ArcView(Context context) {
 this(context,null);
 }
public ArcView(Context context, @Nullable AttributeSet attrs) {
 this(context, attrs,0);
 }
 public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr); //init();
 }

重写View的OnDraw方法

@SuppressLint("DrawAllocation") 
@Override protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
  centerX=getWidth()/2;
  centerY=getHeight()/2;
 //初始化paint
 initPaint();
 //绘制弧度
 drawArc(canvas);
 //绘制文本
 drawText(canvas);
 }
注：这里的paint初始化我放在了onDraw方法中进行的，当然你也可以放在有三个参数的构造方法中初始化。

2.Paint初始化

圆弧的画笔mArcPaint

//圆弧的paint
 mArcPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
 //抗锯齿
 mArcPaint.setAntiAlias(true);
 mArcPaint.setColor(Color.parseColor("#666666"));
 //设置透明度（数值为0-255）
 mArcPaint.setAlpha(100);
 //设置画笔的画出的形状
 mArcPaint.setStrokeJoin(Paint.Join.ROUND);
 mArcPaint.setStrokeCap(Paint.Cap.ROUND);
 //设置画笔类型
 mArcPaint.setStyle(Paint.Style.STROKE);
 mArcPaint.setStrokeWidth(dp2px(mStrokeWith));

文字的画笔mTextPaint

//中心文字的paint
mTextPaint=new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#FF4A40"));
//设置文本的对齐方式
mTextPaint.setTextAlign(Paint.Align.CENTER);
//mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.dp_12));
mTextPaint.setTextSize(dp2px(25));

3.Canvas绘制

圆弧的绘制

/**
  * 绘制圆弧
  * @param canvas
  */
 private void drawArc(Canvas canvas) {
 //绘制圆弧背景
  RectF mRectF=new RectF(mStrokeWith+dp2px(5),mStrokeWith+dp2px(5),getWidth()-mStrokeWith-dp2px(5),getHeight()-mStrokeWith);
  canvas.drawArc(mRectF,startAngle,mAngle,false,mArcPaint);
 //绘制当前数值对应的圆弧
  mArcPaint.setColor(Color.parseColor("#FF4A40"));
 //根据当前数据绘制对应的圆弧
  canvas.drawArc(mRectF,startAngle,mIncludedAngle,false,mArcPaint);
 }

文本的绘制

/**
  * 绘制文本
  * @param canvas
  */
 private void drawText(Canvas canvas) {
  Rect mRect=new Rect();
  String mValue=String.valueOf(mAnimatorValue);
 //绘制中心的数值
  mTextPaint.getTextBounds(mValue,0,mValue.length(),mRect);
  canvas.drawText(String.valueOf(mAnimatorValue),centerX,centerY+mRect.height(),mTextPaint);
 //绘制中心文字描述
  mTextPaint.setColor(Color.parseColor("#999999"));
  mTextPaint.setTextSize(dp2px(12));
  mTextPaint.getTextBounds(mDes,0,mDes.length(),mRect);
  canvas.drawText(mDes,centerX,centerY+2*mRect.height()+dp2px(10),mTextPaint);
 //绘制最小值
  String minValue=String.valueOf(mMinValue);
  String maxValue=String.valueOf(mMaxValue);
  mTextPaint.setTextSize(dp2px(18));
  mTextPaint.getTextBounds(minValue,0,minValue.length(),mRect);
  canvas.drawText(minValue, (float) (centerX-0.6*centerX-dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
 //绘制最大值  mTextPaint.getTextBounds(maxValue,0,maxValue.length(),mRect);
  canvas.drawText(maxValue, (float) (centerX+0.6*centerX+dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
 }

4.添加动画效果及数据

动画效果

/**
  * 为绘制弧度及数据设置动画
  *
  * @param startAngle 开始的弧度
  * @param currentAngle 需要绘制的弧度
  * @param currentValue 需要绘制的数据
  * @param time 动画执行的时长
  */
 private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
 //绘制当前数据对应的圆弧的动画效果
  ValueAnimator progressAnimator = ValueAnimator.ofFloat(startAngle, currentAngle);
  progressAnimator.setDuration(time);
  progressAnimator.setTarget(mIncludedAngle);
  progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
   @Override
   public void onAnimationUpdate(ValueAnimator animation) {
    mIncludedAngle = (float) animation.getAnimatedValue();
 //重新绘制，不然不会出现效果
 postInvalidate();
 }
 }); 
//开始执行动画
  progressAnimator.start();
 //中心数据的动画效果
  ValueAnimator valueAnimator = ValueAnimator.ofInt(mAnimatorValue, currentValue);
  valueAnimator.setDuration(2500);
  valueAnimator.setInterpolator(new LinearInterpolator());
  valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
   public void onAnimationUpdate(ValueAnimator valueAnimator) {
     mAnimatorValue = (int) valueAnimator.getAnimatedValue();
 postInvalidate();
 }
 });
  valueAnimator.start();
 }

数据添加

/**
  * 设置数据
  * @param minValue 最小值
  * @param maxValue 最大值
  * @param currentValue 当前绘制的值
  * @param des 描述信息
  */
 public void setValues(int minValue,int maxValue, int currentValue,String des) {
  mDes=des;
  mMaxValue=maxValue;
  mMinValue=minValue;
 //完全覆盖背景弧度
 if (currentValue   maxValue) {
   currentValue = maxValue;
 } //计算弧度比重
  float scale = (float) currentValue / maxValue;
 //计算弧度
  float currentAngle = scale * mAngle;
 //开始执行动画
 setAnimation(0, currentAngle, currentValue,2500);

完整代码：

/**
* Created by ruancw on 2018/6/13.
* 自定义的圆弧形view
*/
public class ArcView extends View {
//根据数据显示的圆弧Paint
private Paint mArcPaint;
//文字描述的paint
private Paint mTextPaint;
//圆弧开始的角度
private float startAngle=135;
//圆弧结束的角度
private float endAngle=45;
//圆弧背景的开始和结束间的夹角大小
private float mAngle=270;
//当前进度夹角大小
private float mIncludedAngle=0;
//圆弧的画笔的宽度
private float mStrokeWith=10;
//中心的文字描述
private String mDes="";
//动画效果的数据及最大/小值
private int mAnimatorValue,mMinValue,mMaxValue;
//中心点的XY坐标
private float centerX,centerY;
public ArcView(Context context) {
this(context,null);
}
public ArcView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//init();
}
private void initPaint() {
//圆弧的paint
mArcPaint=new Paint(Paint.ANTI_ALIAS_FLAG);
//抗锯齿
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(Color.parseColor("#666666"));
//设置透明度（数值为0-255）
mArcPaint.setAlpha(100);
//设置画笔的画出的形状
mArcPaint.setStrokeJoin(Paint.Join.ROUND);
mArcPaint.setStrokeCap(Paint.Cap.ROUND);
//设置画笔类型
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth(dp2px(mStrokeWith));
//中心文字的paint
mTextPaint=new Paint();
mTextPaint.setAntiAlias(true);
mTextPaint.setColor(Color.parseColor("#FF4A40"));
//设置文本的对齐方式
mTextPaint.setTextAlign(Paint.Align.CENTER);
//mTextPaint.setTextSize(getResources().getDimensionPixelSize(R.dimen.dp_12));
mTextPaint.setTextSize(dp2px(25));
}
@SuppressLint("DrawAllocation")
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
centerX=getWidth()/2;
centerY=getHeight()/2;
//初始化paint
initPaint();
//绘制弧度
drawArc(canvas);
//绘制文本
drawText(canvas);
}
/**
* 绘制文本
* @param canvas
*/
private void drawText(Canvas canvas) {
Rect mRect=new Rect();
String mValue=String.valueOf(mAnimatorValue);
//绘制中心的数值
mTextPaint.getTextBounds(mValue,0,mValue.length(),mRect);
canvas.drawText(String.valueOf(mAnimatorValue),centerX,centerY+mRect.height(),mTextPaint);
//绘制中心文字描述
mTextPaint.setColor(Color.parseColor("#999999"));
mTextPaint.setTextSize(dp2px(12));
mTextPaint.getTextBounds(mDes,0,mDes.length(),mRect);
canvas.drawText(mDes,centerX,centerY+2*mRect.height()+dp2px(10),mTextPaint);
//绘制最小值
String minValue=String.valueOf(mMinValue);
String maxValue=String.valueOf(mMaxValue);
mTextPaint.setTextSize(dp2px(18));
mTextPaint.getTextBounds(minValue,0,minValue.length(),mRect);
canvas.drawText(minValue, (float) (centerX-0.6*centerX-dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
//绘制最大指
mTextPaint.getTextBounds(maxValue,0,maxValue.length(),mRect);
canvas.drawText(maxValue, (float) (centerX+0.6*centerX+dp2px(5)), (float) (centerY+0.75*centerY+mRect.height()+dp2px(5)),mTextPaint);
}
/**
* 绘制当前的圆弧
* @param canvas
*/
private void drawArc(Canvas canvas) {
//绘制圆弧背景
RectF mRectF=new RectF(mStrokeWith+dp2px(5),mStrokeWith+dp2px(5),getWidth()-mStrokeWith-dp2px(5),getHeight()-mStrokeWith);
canvas.drawArc(mRectF,startAngle,mAngle,false,mArcPaint);
//绘制当前数值对应的圆弧
mArcPaint.setColor(Color.parseColor("#FF4A40"));
//根据当前数据绘制对应的圆弧
canvas.drawArc(mRectF,startAngle,mIncludedAngle,false,mArcPaint);
}
/**
* 为绘制弧度及数据设置动画
*
* @param startAngle 开始的弧度
* @param currentAngle 需要绘制的弧度
* @param currentValue 需要绘制的数据
* @param time 动画执行的时长
*/
private void setAnimation(float startAngle, float currentAngle,int currentValue, int time) {
//绘制当前数据对应的圆弧的动画效果
ValueAnimator progressAnimator = ValueAnimator.ofFloat(startAngle, currentAngle);
progressAnimator.setDuration(time);
progressAnimator.setTarget(mIncludedAngle);
progressAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
mIncludedAngle = (float) animation.getAnimatedValue();
//重新绘制，不然不会出现效果
postInvalidate();
}
});
//开始执行动画
progressAnimator.start();
//中心数据的动画效果
ValueAnimator valueAnimator = ValueAnimator.ofInt(mAnimatorValue, currentValue);
valueAnimator.setDuration(2500);
valueAnimator.setInterpolator(new LinearInterpolator());
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
mAnimatorValue = (int) valueAnimator.getAnimatedValue();
postInvalidate();
}
});
valueAnimator.start();
}
/**
* 设置数据
* @param minValue 最小值
* @param maxValue 最大值
* @param currentValue 当前绘制的值
* @param des 描述信息
*/
public void setValues(int minValue,int maxValue, int currentValue,String des) {
mDes=des;
mMaxValue=maxValue;
mMinValue=minValue;
//完全覆盖
if (currentValue   maxValue) {
currentValue = maxValue;
}
//计算弧度比重
float scale = (float) currentValue / maxValue;
//计算弧度
float currentAngle = scale * mAngle;
//开始执行动画
setAnimation(0, currentAngle, currentValue,2500);
}
public float dp2px(float dp) {
DisplayMetrics metrics = Resources.getSystem().getDisplayMetrics();
return dp * metrics.density;
}
}

总结：设置Paint的画笔形状（Cap和Join设置为弧形）；使用Canvas的drawArc方法绘制圆弧及drawText绘制文本信息等；ValueAnimator设置数据及当前圆弧进度的动画效果。
以上就是本文的全部内容，希望对大家的学习有所帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/383214.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

​35岁+的年龄不仅能进入大厂，还能年收入百万+，原来吃透这些才是关键

​35岁+的年龄不仅能进入大厂，还能年收入百万+，原来吃透这些才是关键

本人985院校毕业，华为工作10年，创业3年，现在另一大厂，年收入百万 华为期间岗位从测试工程师，到测试经理，再到项目经理，现35岁的年龄进入另一个大厂。这期间面试过上千人，也管理过几…
阅读更多...
Qt QMessageBox详解

Qt QMessageBox详解

文章目录一.QMessageBox介绍枚举属性函数二.QMessageBox的用法1.导入QMessage库2.弹窗提示3.提供选项的弹窗提示4.作为提示，报警，报错提示窗口一.QMessageBox介绍 文本消息显示框(message box)向用户发出情况警报信息并进一步解释警报或向用户提问&…
阅读更多...
Git学习：IDEA项目上传到码云

Git学习：IDEA项目上传到码云

5分钟学习创建项目上传到git服务器 文章目录前言一、gitee创建项目？1、gitee创建项目2、IDEA在本地创建项目3、找到git下载好git程序4、 找到git安装目录 bin目录下的 git.exe 文件5、进行操作（提交代码到Gitee）6、 上传成功（刷新…
阅读更多...
vue 解决问题：Webpack安装不成功，webpack -v无法正常显示版本号

vue 解决问题：Webpack安装不成功，webpack -v无法正常显示版本号

目录 一、解决问题：Webpack安装不成功，webpack -v无法正常显示版本号 二、解决问题： ERROR Error: Cannot find module webpack-log 三、 解决报错：error:03000086:digital envelope routines::initialization error 四、解决…
阅读更多...
Java设计模式笔记——七大设计原则

Java设计模式笔记——七大设计原则

系列文章目录 第一章 Java 设计模式之七大设计原则 文章目录系列文章目录前言一、单一职责原则1.案例分析2.改进二、开闭原则1.案例分析2.改进三、里氏替换原则1.案例分析2.改进四、依赖倒转原则五、接口隔离原则1.案例分析2.改进六、合成复用原则1.案例分析2.改进七、迪米特原…
阅读更多...
PythonWeb Django PostgreSQL创建Web项目(三)

PythonWeb Django PostgreSQL创建Web项目(三)

了解Django框架下如何配置数据库链接与创建模型和应用 使用Django创建web项目，首先需要了解生成的项目文件结构，以及对应文件功能用途方可开始web项目页面创建，下方先介绍文件功能，之后再配置数据库连接以及管理创建模型与应用&a…
阅读更多...
招生咨询｜浙江大学MPA项目2023年招生问答与通知

招生咨询｜浙江大学MPA项目2023年招生问答与通知

问：报考浙江大学MPA的基本流程是怎么样的？ 答：第一阶段为网上报名与确认。MPA考生须参加全国管理类联考，网上报名时间一般为10月初开始、10月下旬截止，错过网上报名时间后不能补报。确认时间一般为11月上旬&#xff0c…
阅读更多...
如何提高软件测试效率 降低开发成本？

如何提高软件测试效率 降低开发成本？

1、单元测试以开发人员为主 测试分工需根据测试人员的特点进行，而单元测试应以开发人员为主，以保障每个单元能够完成设计的功能。集成测试也可以以开发人员为主进行。当软件体系结构完成后，独立测试人员应尽量选择比较熟悉相关领域的人员。​…
阅读更多...
三、Spring的入门程序

三、Spring的入门程序

第一个Spring程序 创建新的空工程spring6 设置JDK版本17&#xff0c;编译器版本17 设置IDEA的Maven&#xff1a;关联自己的maven 在空的工程spring6中创建第一个maven模块&#xff1a;spring6-001-first 在pom.xml添加spring context依赖和junit依赖&#xff0c; <?x…
阅读更多...
基于轻量级YOLO开发构建中国象棋目标检测识别分析系统

基于轻量级YOLO开发构建中国象棋目标检测识别分析系统

关于棋类相关的项目在我之前的博文里面都有做过&#xff0c;如下&#xff1a;《yolov5s融合SPD-Conv用于提升小目标和低分辨率图像检测性能实践五子棋检测识别》《YOLOV5融合SE注意力机制和SwinTransformer模块开发实践的中国象棋检测识别分析系统》《基于yolov5s实践国际象棋目…
阅读更多...
第七章.集成学习(Ensemble Learning)—袋装(bagging),随机森林(Random Forest)

第七章.集成学习(Ensemble Learning)—袋装(bagging),随机森林(Random Forest)

第七章.集成学习 (Ensemble Learning) 7.1 集成学习—袋装(bagging),随机森林(Random Forest) 集成学习就是组合多个学习器&#xff0c;最后得到一个更好的学习器。 1.常见的4种集成学习算法 个体学习器之间不存在强依赖关系&#xff0c;袋装&#xff08;bagging&#xff09;…
阅读更多...
智慧厕所智能卫生间系统有哪些功能

智慧厕所智能卫生间系统有哪些功能

南宁北站智能厕所主要功能有哪些&#xff1f;1、卫生间环境空气监测男厕、女厕环境空气监测系统包括对厕所内的温度、湿度、氨气、硫化氢、PM2.5、烟雾等气体数据的实时监测。2、卫生间厕位状态监测系统实时监测厕位内目前的使用状态(有人或无人&#xff09;&#xff0c;数据信…
阅读更多...
SQLyog图形化界面工具【超详细讲解】

SQLyog图形化界面工具【超详细讲解】

目录 一、SQLyog 介绍 二、SQLyog 社区版下载 三、SQLyog 安装 1、选择Chinese后点击OK 2、点击“下一步” 3、选择“我接受”后点击“下一步” 4、点击“下一步” 5、修改安装位置&#xff08;尽量不要安装在C盘&#xff09;&#xff0c;点击“安装” 6、安装后点击“…
阅读更多...
无线WiFi安全渗透与攻防(三)之Windows扫描wifi和破解WiFi密码

无线WiFi安全渗透与攻防(三)之Windows扫描wifi和破解WiFi密码

系列文章 无线WiFi安全渗透与攻防(一)之无线安全环境搭建 无线WiFi安全渗透与攻防(二)之打造专属字典 windows下wifi进行扫描和破解 1.wifi扫描 &#xff08;1&#xff09;.软件介绍 WirelessMon是一款无线网络扫描工具&#xff0c;它可以帮助用户扫描附近的无线信号&…
阅读更多...
操作系统——14.调度算法的评价指标

操作系统——14.调度算法的评价指标

这篇文章我们来讲一下算法调度的评价指标&#xff0c;为后面讲调度算法做下铺垫 目录 1.概述 1.CPU的利用率 2.系统吞吐量 3.周转时间 4.等待时间 5.响应时间 6.小结 1.概述 首先&#xff0c;我们来看一下这节内容的大体框架 1.CPU的利用率 由于早期的CPU造价极其昂贵…
阅读更多...
1.flink简介与重要概念

1.flink简介与重要概念

Introduction 简介 Apache Flink是一个框架和分布式处理引擎&#xff0c;用于在无界和有界数据流上进行有状态计算。Flink可以运行在常见集群环境如YARN Kubernetes Mesos,内存级别的速度和任意的扩展 Unbounded streams 无界数据流 无界数据流有开始但是没有结束,需要持续不断…
阅读更多...
JavaSe第4次笔记

JavaSe第4次笔记

1.转义字符和编程语言无关。 2.斜杠(\)需要转义&#xff0c;反斜杠(/)不需要转义。 3.不能做switch的参数的数据类型&#xff1a;long float double boolean( String可以)。 4.输入的写法&#xff1a;Scanner(回车自动带头文件(import java.util.Scanner;)) Scanner scan …
阅读更多...
软件测试（linux命令篇-01文件操作命令）

软件测试（linux命令篇-01文件操作命令）

linux文件篇命令linux系统常用文件操作命令1、查看目录内容及常用参数&#xff1a;ls2、目录切换&#xff1a;cd 3、创建文件&#xff1a;touch 4、创建目录 &#xff1a;mkdir5、 删除文件或目录&#xff1a;rm6、文件或目录的复制&#xff1a;cp7、文件或目录的移动&#xff…
阅读更多...
TMS Sphinx crack

TMS Sphinx crack

TMS Sphinx crack 用于身份访问管理的TMS Sphinx Delphi框架&#xff0c;包括授权和身份验证。 TMS Sphinx允许您为多个应用程序实现单点登录(SSO)&#xff1a;web、本机、移动或机器到机器API通信。它可用于通过登录表单、类似的用户界面和基于服务的身份验证来验证实际用户&a…
阅读更多...
如何制作一个自定义的winpe?

如何制作一个自定义的winpe?

winpe制作过程 获取相关资源 https://www.aliyundrive.com/s/MP58JbRsm76 文件存放位置 将压缩包存放在一个全英文目录下了,我这里选择了D:/winpe目录 解压文件 将三个压缩包进行解压到当前目录,如下图所示 创建一个mount目录,并在mount目录下分别创建boot和install目…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023