当前位置: 开发笔记 > Android > 正文

Android自定义View实现圆弧进度效果

作者：小程序员 | 来源：互联网 | 2022-08-02 13:16

这篇文章主要为大家详细介绍了Android自定义View实现圆弧进度效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

前言：Android开发中，自定义View实现自己想要的效果已成为一项必备的技能，当然自定义View也是Android开发中比较难的部分，涉及到的知识有Canvas（画布）,Paint（画笔）等，自定义控件分为三种：一是直接继承自View，完全的自定义；二是在原有控件的基础上进行改造，达到自己想要的效果；还有一种就是自定义组合控件，将已有的控件根据自己的需要进行组合实现的效果。本人对自定义View也是一知半解，简单记录下自己学习自定义View（继承自View）的过程，方便日后翻阅。

技术实现

1.ArcView继承自View

2.Canvas（画布）

3.Paint（画笔）

效果图：类似于QQ的计步效果

1.继承自View

（1）重写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();
}

（2）重写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初始化

（1）圆弧的画笔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));

（2）文字的画笔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绘制

（1）圆弧的绘制

/**
 * 绘制圆弧
 * @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);
}

（2）文本的绘制

/**
 * 绘制文本
 * @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.添加动画效果及数据

（1）动画效果

/**
 * 为绘制弧度及数据设置动画
 *
 * @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();
}

（2）数据添加

/**
 * 设置数据
 * @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设置数据及当前圆弧进度的动画效果。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

android

推荐阅读

android
2023 ARM嵌入式系统全国技术巡讲

2023 ARM嵌入式系统全国技术巡讲旨在分享ARM公司在半导体知识产权(IP)领域的最新进展。作为全球领先的IP提供商，ARM在嵌入式处理器市场占据主导地位，其产品广泛应用于90%以上的嵌入式设备中。此次巡讲将邀请来自ARM、飞思卡尔以及华清远见教育集团的行业专家，共同探讨当前嵌入式系统的前沿技术和应用。 ... [详细]

蜡笔小新 2024-12-28 11:58:48
android
Android 九宫格布局详解及实现：人人网应用示例

本文深入探讨了人人网Android应用中独特的九宫格布局设计，解析其背后的GridView实现原理，并提供详细的代码示例。这种布局方式不仅美观大方，而且在现代Android应用中较为少见，值得开发者借鉴。 ... [详细]

蜡笔小新 2024-12-28 11:23:01
android
CSS 布局：液态三栏混合宽度布局

本文介绍了如何使用 CSS 实现液态的三栏布局，其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性，可以实现灵活且响应式的网页设计。 ... [详细]

蜡笔小新 2024-12-28 02:40:28
android
Linux 系统启动故障排除指南：MBR 和 GRUB 问题

本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]

蜡笔小新 2024-12-27 20:40:29
android
通过类型和标签选择元素

本文介绍了如何使用jQuery根据元素的类型（如复选框）和标签名（如段落）来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]

蜡笔小新 2024-12-27 19:44:14
android
如何在剪映中进行视频镜像处理

本文将详细介绍如何使用剪映应用中的镜像功能，帮助用户轻松实现视频的镜像效果。通过简单的步骤，您可以快速掌握这一实用技巧。 ... [详细]

蜡笔小新 2024-12-27 18:56:09
android
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
android
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新 2024-12-27 17:52:34
android
Linux 自动化安装脚本详解

本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]

蜡笔小新 2024-12-27 16:33:32
android
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
android
Android 渐变圆环加载控件实现

本文介绍了如何在 Android 中创建一个自定义的渐变圆环加载控件，该控件已在多个知名应用中使用。我们将详细探讨其工作原理和实现方法。 ... [详细]

蜡笔小新 2024-12-27 13:34:19
android
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新 2024-12-27 12:34:14
android
Ionic 5 APK打包与QRScanner插件优化：常见问题及解决方案

本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题，特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法，帮助开发者顺利打包并优化应用性能。 ... [详细]

蜡笔小新 2024-12-27 12:10:17
android
存储器层次结构、随机访问存储器与数据存取机制

理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]

蜡笔小新 2024-12-27 12:06:47
android
360SRC安全应急响应：从漏洞提交到修复的全过程

本文详细介绍了360SRC平台处理一起关键安全事件的过程，涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例，展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]

蜡笔小新 2024-12-27 11:10:05

小程序员

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章