热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android自定义View实现圆环带数字百分比进度条

这篇文章主要为大家详细介绍了Android自定义View实现圆环带数字百分比进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

分享一个自己制作的Android自定义View。是一个圆环形状的反映真实进度的进度条,百分比的进度文字跟随已完成进度的圆弧转动。以下是效果图:

这个自定义View可以根据需要设定圆环的宽度和百分比文字的大小。

先说一下思路:这个View一共分为三部分:第一部分也就是灰色的圆环部分,代表未完成的进度;第二部分是蓝色的圆弧部分,代表已经完成的进度;第三部分是红色的百分比的数字百分比文本,显示当前确切的完成进度。

下面是View的编写思路:

①:定义三个画笔,分别画灰色圆环,蓝色圆弧,红色文字;
②:构造器中初始化数据,设置三个画笔的属性;
③:重写View的onMeasure方法,得到本View的宽度,高度,计算出中心点的坐标;
④:由于这个View是一个圆环形状,所以定义本View宽高中较小者的一半为整个圆环部分(包括圆环和文字)最外侧的半径,这样使用者可以任意指定本View的宽高,圆环可以恰好嵌入其中,不会超出空间,也不会浪费空间;
⑤:绘制圆环需要一个RectF对象,创建一个RectF对象,指定它的左上右下边界均距离View中心为整个圆环部分(包括圆环和文字)最外侧的半径减去圆环画笔宽度和文字高度较大者的一半,这样,整个圆环部分(包括圆环和文字)的边界恰好会与View的边界重合;
⑥:绘制紧贴着圆环的文字,需要一个Path对象来指定文字的路径。给这个Path对象添加一小段圆弧的轨迹,然后在圆弧上面绘制文字。这段圆弧也需要一个RectF对象,但是这个RectF要比上一个RectF小一些,来保证文字恰好在圆环轨迹上;
⑦:然后是最关键的重绘部分,重写onDraw方法。首先画出灰色圆环,这个比较简单,它不需要随进度变化而变化,只是一个圆环;
⑧:其次画出蓝色的圆弧。设定圆弧开始的角度是-90度,也就是圆环顶部。扫过的角度是当前百分比乘以360度一整圈的角度,并且随着progress增加而不断增加,产生动画的效果;
⑨:最难的部分,画文字。在路径上面画文字并不难,但是要精确确定文字的位置,使文字的中央恰好处于蓝色进度条的最前端。在这里我使用了Paint的一个方法:getTextWidths,这个方法可以根据当前需要绘制的文字,返回所有单个字符的宽度组成的一个float型的数组,然后根据这个数组可以得到要绘制文字所占的宽度,进而可以得到需要的Path对象需要的圆弧轨迹的长度,然后根据圆弧长度,得到圆弧角度(width = sweepAngle * 2 * π * R / 360 →sweepAngle = width * 360 / 2 / π / R),然后就可以用这个Path对象去画文字了。
⑩:这里我们给View添加了 一个方法,setProgress,参数为int型的进度,这样外界使用者就可以根据实际进度来指定View的进度来显示当前实际工作完成的百分比。

下面是代码View代码:

public class CircleNumberProgress extends View {
 
  /** 进度条画笔的宽度(dp) */
  private int paintProgressWidth = 3;
 
  /** 文字百分比的字体大小(sp) */
  private int paintTextSize = 20;
 
  /** 未完成进度条的颜色 */
  private int paintUndOneColor= 0xffaaaaaa;
 
  /** 已完成进度条的颜色 */
  private int paintDOneColor= 0xff67aae4;
 
  /** 百分比文字的颜色 */
  private int paintTextColor = 0xffff0077;
 
  /** 设置进度条画笔的宽度(px) */
  private int paintProgressWidthPx;
 
  /** 文字画笔的尺寸(px) */
  private int paintTextSizePx;
  /** Context上下文环境 */
  private Context context;
 
  /** 调用者设置的进程 0 - 100 */
  private int progress;
 
  /** 画未完成进度圆弧的画笔 */
  private Paint paintUndOne= new Paint();
 
  /** 画已经完成进度条的画笔 */
  private Paint paintDOne= new Paint();
 
  /** 画文字的画笔 */
  private Paint paintText = new Paint();
 
  /** 包围进度条圆弧的矩形 */
  private RectF rectF = new RectF();
 
  /** 包围文字所在路径圆弧的矩形,比上一个矩形略小 */
  private RectF rectF2 = new RectF();
 
  /** 进度文字所在的路径 */
  private Path path = new Path();
 
  /** 文字所在路径圆弧的半径 */
  private int radiusText;
 
  /** 是否进行过了测量 */
  private boolean isMeasured = false;
 
  public CircleNumberProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    this.cOntext= context;
    // 构造器中初始化数据
    initData();
  }
 
  /** 初始化数据 */
  private void initData() {
 
    // 设置进度条画笔的宽度
    paintProgressWidthPx = Utils.dip2px(context, paintProgressWidth);
 
    // 设置文字画笔的尺寸(px)
    paintTextSizePx = Utils.sp2px(context, paintTextSize);
 
    // 未完成进度圆环的画笔的属性
    paintUndone.setColor(paintUndoneColor);
    paintUndone.setStrokeWidth(paintProgressWidthPx);
    paintUndone.setAntiAlias(true);
    paintUndone.setStyle(Paint.Style.STROKE);
 
    // 已经完成进度条的画笔的属性
    paintDone.setColor(paintDoneColor);
    paintDone.setStrokeWidth(paintProgressWidthPx);
    paintDone.setAntiAlias(true);
    paintDone.setStyle(Paint.Style.STROKE);
 
    // 文字的画笔的属性
    paintText.setColor(paintTextColor);
    paintText.setTextSize(paintTextSizePx);
    paintText.setAntiAlias(true);
    paintText.setStyle(Paint.Style.STROKE);
    paintText.setTypeface(Typeface.DEFAULT_BOLD);
 
  }
 
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (!isMeasured) {
      getWidthAndHeight();
      isMeasured = true;
    }
  }
 
  /** 得到视图等的高度宽度尺寸数据 */
  private void getWidthAndHeight() {
 
    // 得到自定义视图的高度
    int viewHeight;
 
    // 得到自定义视图的宽度
    int viewWidth;
 
    // 得到自定义视图的X轴中心点
    int viewCenterX;
 
    // 得到自定义视图的Y轴中心点
    int viewCenterY;
 
    viewHeight = getMeasuredHeight();
    viewWidth = getMeasuredWidth();
    viewCenterX = viewWidth / 2;
    viewCenterY = viewHeight / 2;
 
    // 取本View长宽较小者的一半为整个圆环部分(包括圆环和文字)最外侧的半径
    int minLenth = viewHeight > viewWidth ? viewWidth / 2 : viewHeight / 2;
 
    // 比较文字高度和圆环宽度,如果文字高度较大,那么文字将突破圆环,否则,圆环会把文字包裹在内部
    Rect rect = new Rect();
    paintText.getTextBounds("100%", 0, "100%".length(), rect);
    int textHeight = rect.height();
 
    // 得到圆环的中间半径(外径和内径平均值)
    int radiusArc = minLenth - (paintProgressWidthPx > textHeight ? paintProgressWidthPx / 2 : textHeight / 2);
    rectF.left = viewCenterX - radiusArc;
    rectF.top = viewCenterY - radiusArc;
    rectF.right = viewCenterX + radiusArc;
    rectF.bottom = viewCenterY + radiusArc;
 
    // 文字所依赖路径圆弧的半径
    radiusText = radiusArc - textHeight / 2;
    rectF2.left = viewCenterX - radiusText;
    rectF2.top = viewCenterY - radiusText;
    rectF2.right = viewCenterX + radiusText;
    rectF2.bottom = viewCenterY + radiusText;
 
  }
 
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
 
    // 画未完成进度的圆环
    canvas.drawArc(rectF, 0, 360, false, paintUndone);
 
    // 画已经完成进度的圆弧 从-90度开始,即从圆环顶部开始
    canvas.drawArc(rectF, -90, progress / 100.0f * 360, false, paintDone);
 
    // 为文字所在路径添加一段圆弧轨迹,进度为0%-9%时应该最短,进度为10%-99%时应该边长,进度为100%时应该最长
    // 这样才能保证文字和圆弧的进度一致,不会出现超前或者滞后的情况
 
    // 要画的文字
    String text = progress + "%";
 
    // 存储字符所有字符所占宽度的数组
    float[] widths = new float[text.length()];
 
    // 得到所有字符所占的宽度
    paintText.getTextWidths(text, 0, text.length(), widths);
 
    // 所有字符所占宽度之和
    float textWidth = 0;
    for (float f : widths) {
      textWidth += f;
    }
 
    // 根据长度得到路径对应的扫过的角度
    // width = sweepAngle * 2 * π * R / 360 ; sweepAngle = width * 360 / 2 /
    // π / R
    float sweepAngle = (float) (textWidth * 360 / 2 / Math.PI / radiusText);
 
    // 添加路径
    path.addArc(rectF2, progress * 3.6f - 90.0f - sweepAngle / 2.0f, sweepAngle);
 
    // 绘制进度的文字
    canvas.drawTextOnPath(text, path, 0, 0, paintText);
 
    // 重置路径
    path.reset();
  }
 
  /**
   * @param progress 外部传进来的当前进度,强制重绘
   */
  public void setProgress(int progress) {
    this.progress = progress;
    invalidate();
  }
}

调用者Activity代码:

public class NumberProgressBarActivity extends Activity {
 
  /** handler消息标识 */
  protected static final int WHAT_INCREASE = 1;
 
  /** 圆形带数字的进度条 */
  private CircleNumberProgress cnp_citcleNumberProgress;
 
  /** 指定给进度条的进程 */
  private int progress;
 
  private Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {
      progress++;
      cnp_citcleNumberProgress.setProgress(progress);
      handler.sendEmptyMessageDelayed(WHAT_INCREASE, getRadomNumber(50, 300));
      if (progress >= 100) {
        handler.removeMessages(WHAT_INCREASE);
      }
    }
 
  };
 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_number_progress_bar);
    cnp_citcleNumberProgress = (CircleNumberProgress) findViewById(R.id.cnp_citcleNumberProgress);
    Button btn_numberProgressBar = (Button) findViewById(R.id.btn_numberProgressBar);
    btn_numberProgressBar.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        increase();
      }
    });
  }
 
  private void increase() {
    progress = 0;
    handler.removeMessages(WHAT_INCREASE);
    handler.sendEmptyMessage(WHAT_INCREASE);
  }
 
  /**
   * 得到两个整数之间的一个随机数
   *
   * @param start 较小的数
   * @param end  较大的数
   * @return 随机整数
   */
  public int getRadomNumber(int start, int end) {
    return (int) (start + Math.random() * (end - start));
  }
}

布局:


 
  
 
  

还有几个方法是dp,px,sp相互转换的也一并贴出来:

/**
 * 将px值转换为dip或dp值,保证尺寸大小不变
 */
public static int px2dip(Context context, float pxValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (pxValue / scale + 0.5f);
}
 
/**
 * 将dip或dp值转换为px值,保证尺寸大小不变
 */
public static int dip2px(Context context, float dipValue) {
  final float scale = context.getResources().getDisplayMetrics().density;
  return (int) (dipValue * scale + 0.5f);
}
 
/**
 * 将px值转换为sp值,保证文字大小不变
 */
public static int px2sp(Context context, float pxValue) {
  final float fOntScale= context.getResources().getDisplayMetrics().scaledDensity;
  return (int) (pxValue / fontScale + 0.5f);
}
 
/**
 * 将sp值转换为px值,保证文字大小不变
 */
public static int sp2px(Context context, float spValue) {
  final float fOntScale= context.getResources().getDisplayMetrics().scaledDensity;
  return (int) (spValue * fontScale + 0.5f);
}

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


推荐阅读
  • 本文介绍了使用kotlin实现动画效果的方法,包括上下移动、放大缩小、旋转等功能。通过代码示例演示了如何使用ObjectAnimator和AnimatorSet来实现动画效果,并提供了实现抖动效果的代码。同时还介绍了如何使用translationY和translationX来实现上下和左右移动的效果。最后还提供了一个anim_small.xml文件的代码示例,可以用来实现放大缩小的效果。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 本文讲述了如何通过代码在Android中更改Recycler视图项的背景颜色。通过在onBindViewHolder方法中设置条件判断,可以实现根据条件改变背景颜色的效果。同时,还介绍了如何修改底部边框颜色以及提供了RecyclerView Fragment layout.xml和项目布局文件的示例代码。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤,包括在application.properties配置文件中添加thymeleaf的配置信息,引入thymeleaf的jar包,以及创建PageController并添加index方法。 ... [详细]
  • XML介绍与使用的概述及标签规则
    本文介绍了XML的基本概念和用途,包括XML的可扩展性和标签的自定义特性。同时还详细解释了XML标签的规则,包括标签的尖括号和合法标识符的组成,标签必须成对出现的原则以及特殊标签的使用方法。通过本文的阅读,读者可以对XML的基本知识有一个全面的了解。 ... [详细]
  • Java验证码——kaptcha的使用配置及样式
    本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]
  • Android系统移植与调试之如何修改Android设备状态条上音量加减键在横竖屏切换的时候的显示于隐藏
    本文介绍了如何修改Android设备状态条上音量加减键在横竖屏切换时的显示与隐藏。通过修改系统文件system_bar.xml实现了该功能,并分享了解决思路和经验。 ... [详细]
  • 本文介绍了Android 7的学习笔记总结,包括最新的移动架构视频、大厂安卓面试真题和项目实战源码讲义。同时还分享了开源的完整内容,并提醒读者在使用FileProvider适配时要注意不同模块的AndroidManfiest.xml中配置的xml文件名必须不同,否则会出现问题。 ... [详细]
  • Android开发实现的计时器功能示例
    本文分享了Android开发实现的计时器功能示例,包括效果图、布局和按钮的使用。通过使用Chronometer控件,可以实现计时器功能。该示例适用于Android平台,供开发者参考。 ... [详细]
  • HDFS2.x新特性
    一、集群间数据拷贝scp实现两个远程主机之间的文件复制scp-rhello.txtroothadoop103:useratguiguhello.txt推pushscp-rr ... [详细]
  • flowable工作流 流程变量_信也科技工作流平台的技术实践
    1背景随着公司业务发展及内部业务流程诉求的增长,目前信息化系统不能够很好满足期望,主要体现如下:目前OA流程引擎无法满足企业特定业务流程需求,且移动端体 ... [详细]
  • 本文介绍了在使用MSXML解析XML文件时出现DTD禁用问题的解决方案。通过代码示例和错误信息获取方法,解释了默认情况下DTD是禁用的,以及如何启用DTD的方法。此外,还提到了网上关于该问题的信息相对较少,因此本文提供了解决方案以供参考。 ... [详细]
  • 在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板
    本文介绍了在Xamarin XAML语言中如何在页面级别构建ControlTemplate控件模板的方法和步骤,包括将ResourceDictionary添加到页面中以及在ResourceDictionary中实现模板的构建。通过本文的阅读,读者可以了解到在Xamarin XAML语言中构建控件模板的具体操作步骤和语法形式。 ... [详细]
author-avatar
UP向日葵氵于磊Z
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有