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

Android自定义View仿华为圆形加载进度条

这篇文章主要为大家详细介绍了Android自定义View仿华为圆形加载进度条,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

View仿华为圆形加载进度条效果图

实现思路

可以看出该View可分为三个部分来实现

最外围的圆,该部分需要区分进度圆和底部的刻度圆,进度部分的刻度需要和底色刻度区分开来

中间显示的文字进度,需要让文字在View中居中显示

旋转的小圆点,小圆点需要模拟小球下落运动时的加速度效果,开始下落的时候慢,到最底部时最快,上来时速度再逐渐减慢

具体实现

先具体细分讲解,博客最后面给出全部源码

(1)首先为View创建自定义的xml属性
在工程的values目录下新建attrs.xml文件


 
 
 
 
 
 
 
 

各个属性的作用:

indexColor:进度圆的颜色
baseColor:刻度圆底色
dotColor:小圆点颜色
textSize:文字大小
textColor:文字颜色

(2)新建CircleLoadingView类继承View类,重写它的三个构造方法,获取用户设置的属性,同时指定默认值

public CircleLoadingView(Context context) {
 this(context, null);
 }

 public CircleLoadingView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 // 获取用户配置属性
 TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
 baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
 indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
 textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
 dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
 textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
 tya.recycle();

 initUI();
 }

我们从View绘制的第一步开始

(3)测量onMeasure,首先需要测量出View的宽和高,并指定View在wrap_content时的最小范围,对于View绘制流程还不熟悉的同学,可以先去了解下具体的绘制流程

浅谈Android View绘制三大流程探索及常见问题

重写onMeasure方法,其中我们要考虑当View的宽高被指定为wrap_content时的情况,如果我们不对wrap_content的情况进行处理,那么当使用者指定View的宽高为wrap_content时将无法正常显示出View

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
 int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
 int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
 int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

 // 获取宽
 if (myWidthSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mWidth = myWidthSpecSize;
 } else {
  // wrap_content
  mWidth = DensityUtil.dip2px(mContext, 120);
 }

 // 获取高
 if (myHeightSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mHeight = myHeightSpecSize;
 } else {
  // wrap_content
  mHeight = DensityUtil.dip2px(mContext, 120);
 }

 // 设置该view的宽高
 setMeasuredDimension(mWidth, mHeight);
 }

MeasureSpec的状态分为三种EXACTLY、AT_MOST、UNSPECIFIED,这里只要单独指定非精确值EXACTLY之外的情况就好了。

本文中使用到的DensityUtil类,是为了将dp转换为px来使用,以便适配不同的屏幕显示效果

public static int dip2px(Context context, float dpValue) {
 final float scale = context.getResources().getDisplayMetrics().density;
 return (int) (dpValue * scale + 0.5f);
 }

(4)重写onDraw,绘制需要显示的内容

因为做的是单纯的View而不是ViewGroup,内部没有子控件需要确定位置,所以可直接跳过onLayout方法,直接开始对View进行绘制
分为三个部分绘制,绘制刻度圆,绘制文字值,绘制旋转小圆点

@Override
 protected void onDraw(Canvas canvas) {
 drawArcScale(canvas);
 drawTextValue(canvas);
 drawRotateDot(canvas);
 }

绘制刻度圆

先画一个小竖线,通过canvas.rotate()方法每次旋转3.6度(总共360度,用100/360=3.6)得到一个刻度为100的圆,然后通过progress参数,得到要显示的进度数,并把小于progress的刻度变成进度圆的颜色

 /**
 * 画刻度
 */
 private void drawArcScale(Canvas canvas) {
 canvas.save();

 for (int i = 0; i <100; i++) {
  if (progress > i) {
  mScalePaint.setColor(indexColor);
  } else {
  mScalePaint.setColor(baseColor);
  }
  canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
  // 旋转的度数 = 100 / 360
  canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
 }

 canvas.restore();
 }

绘制中间文字

文字绘制的坐标是以文字的左下角开始绘制的,所以需要先通过把文字装载到一个矩形Rect,通过画笔的getTextBounds方法取得字符串的长度和宽度,通过动态计算,来使文字居中显示

 /**
 * 画内部数值
 */
 private void drawTextValue(Canvas canvas) {
 canvas.save();

 String showValue = String.valueOf(progress);
 Rect textBound = new Rect();
 mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 获取文字的矩形范围
 float textWidth = textBound.right - textBound.left; // 获得文字宽
 float textHeight = textBound.bottom - textBound.top; // 获得文字高
 canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);

 canvas.restore();
 }

绘制旋转小圆点

这个小圆点就是简单的绘制一个填充的圆形就好

 /**
 * 画旋转小圆点
 */
 private void drawRotateDot(final Canvas canvas) {
 canvas.save();

 canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
 canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);

 canvas.restore();
 }

让它自己动起来可以通过两种方式,一种是开一个线程,在线程中改变mDotProgress的数值,并通过postInvalidate方法跨线程刷新View的显示效果

 new Thread() {
  @Override
  public void run() {
  while (true) {
   mDotProgress++;
   if (mDotProgress == 100) {
   mDotProgress = 0;
   }
   postInvalidate();
   try {
   Thread.sleep(50);
   } catch (InterruptedException e) {
   e.printStackTrace();
   }
  }
  }
 }.start();

开线程的方式不推荐使用,这是没必要的开销,而且线程不好控制,要实现让小圆点在运行过程中开始和结束时慢,运动到中间时加快这种效果不好实现,所以最好的方式是使用属性动画,需要让小圆点动起来时,调用以下方法就好了

 /**
 * 启动小圆点旋转动画
 */
 public void startDotAnimator() {
 animator = ValueAnimator.ofFloat(0, 100);
 animator.setDuration(1500);
 animator.setRepeatCount(ValueAnimator.INFINITE);
 animator.setRepeatMode(ValueAnimator.RESTART);
 animator.setInterpolator(new AccelerateDecelerateInterpolator());
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  // 设置小圆点的进度,并通知界面重绘
  mDotProgress = (Float) animation.getAnimatedValue();
  invalidate();
  }
 });
 animator.start();
 }

在属性动画中可以通过setInterpolator方法指定不同的插值器,这里要模拟小球掉下来的重力效果,所以需要使用AccelerateDecelerateInterpolator插值类,该类的效果就是在动画开始时和结束时变慢,中间加快

(5)设置当前进度值

对外提供一个方法,用来更新当前圆的进度

 /**
 * 设置进度
 */
 public void setProgress(int progress) {
 this.progress = progress;
 invalidate();
 }

通过外部调用setProgress方法就可以跟更新当前圆的进度了

源码

/**
 * 仿华为圆形加载进度条
 * Created by zhuwentao on 2017-08-19.
 */
public class CircleLoadingView extends View {

 private Context mContext;

 // 刻度画笔
 private Paint mScalePaint;

 // 小原点画笔
 private Paint mDotPaint;

 // 文字画笔
 private Paint mTextPaint;

 // 当前进度
 private int progress = 0;

 /**
 * 小圆点的当前进度
 */
 public float mDotProgress;

 // View宽
 private int mWidth;

 // View高
 private int mHeight;

 private int indexColor;

 private int baseColor;

 private int dotColor;

 private int textSize;

 private int textColor;

 private ValueAnimator animator;

 public CircleLoadingView(Context context) {
 this(context, null);
 }

 public CircleLoadingView(Context context, AttributeSet attrs) {
 this(context, attrs, 0);
 }

 public CircleLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 // 获取用户配置属性
 TypedArray tya = context.obtainStyledAttributes(attrs, R.styleable.CircleLoading);
 baseColor = tya.getColor(R.styleable.CircleLoading_baseColor, Color.LTGRAY);
 indexColor = tya.getColor(R.styleable.CircleLoading_indexColor, Color.BLUE);
 textColor = tya.getColor(R.styleable.CircleLoading_textColor, Color.BLUE);
 dotColor = tya.getColor(R.styleable.CircleLoading_dotColor, Color.RED);
 textSize = tya.getDimensionPixelSize(R.styleable.CircleLoading_textSize, 36);
 tya.recycle();

 initUI();
 }

 private void initUI() {
 mCOntext= getContext();

 // 刻度画笔
 mScalePaint = new Paint();
 mScalePaint.setAntiAlias(true);
 mScalePaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
 mScalePaint.setStrokeCap(Paint.Cap.ROUND);
 mScalePaint.setColor(baseColor);
 mScalePaint.setStyle(Paint.Style.STROKE);

 // 小圆点画笔
 mDotPaint = new Paint();
 mDotPaint.setAntiAlias(true);
 mDotPaint.setColor(dotColor);
 mDotPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
 mDotPaint.setStyle(Paint.Style.FILL);

 // 文字画笔
 mTextPaint = new Paint();
 mTextPaint.setAntiAlias(true);
 mTextPaint.setColor(textColor);
 mTextPaint.setTextSize(textSize);
 mTextPaint.setStrokeWidth(DensityUtil.dip2px(mContext, 1));
 mTextPaint.setStyle(Paint.Style.FILL);
 }

 @Override
 protected void onDraw(Canvas canvas) {
 drawArcScale(canvas);
 drawTextValue(canvas);
 drawRotateDot(canvas);
 }

 /**
 * 画刻度
 */
 private void drawArcScale(Canvas canvas) {
 canvas.save();

 for (int i = 0; i <100; i++) {
  if (progress > i) {
  mScalePaint.setColor(indexColor);
  } else {
  mScalePaint.setColor(baseColor);
  }
  canvas.drawLine(mWidth / 2, 0, mHeight / 2, DensityUtil.dip2px(mContext, 10), mScalePaint);
  // 旋转的度数 = 100 / 360
  canvas.rotate(3.6f, mWidth / 2, mHeight / 2);
 }

 canvas.restore();
 }

 /**
 * 画内部数值
 */
 private void drawTextValue(Canvas canvas) {
 canvas.save();

 String showValue = String.valueOf(progress);
 Rect textBound = new Rect();
 mTextPaint.getTextBounds(showValue, 0, showValue.length(), textBound); // 获取文字的矩形范围
 float textWidth = textBound.right - textBound.left; // 获得文字宽
 float textHeight = textBound.bottom - textBound.top; // 获得文字高
 canvas.drawText(showValue, mWidth / 2 - textWidth / 2, mHeight / 2 + textHeight / 2, mTextPaint);

 canvas.restore();
 }

 /**
 * 画旋转小圆点
 */
 private void drawRotateDot(final Canvas canvas) {
 canvas.save();

 canvas.rotate(mDotProgress * 3.6f, mWidth / 2, mHeight / 2);
 canvas.drawCircle(mWidth / 2, DensityUtil.dip2px(mContext, 10) + DensityUtil.dip2px(mContext, 5), DensityUtil.dip2px(mContext, 3), mDotPaint);

 canvas.restore();
 }

 /**
 * 启动小圆点旋转动画
 */
 public void startDotAnimator() {
 animator = ValueAnimator.ofFloat(0, 100);
 animator.setDuration(1500);
 animator.setRepeatCount(ValueAnimator.INFINITE);
 animator.setRepeatMode(ValueAnimator.RESTART);
 animator.setInterpolator(new AccelerateDecelerateInterpolator());
 animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
  // 设置小圆点的进度,并通知界面重绘
  mDotProgress = (Float) animation.getAnimatedValue();
  invalidate();
  }
 });
 animator.start();
 }

 /**
 * 设置进度
 */
 public void setProgress(int progress) {
 this.progress = progress;
 invalidate();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);

 int myWidthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
 int myWidthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
 int myHeightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
 int myHeightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

 // 获取宽
 if (myWidthSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mWidth = myWidthSpecSize;
 } else {
  // wrap_content
  mWidth = DensityUtil.dip2px(mContext, 120);
 }

 // 获取高
 if (myHeightSpecMode == MeasureSpec.EXACTLY) {
  // match_parent/精确值
  mHeight = myHeightSpecSize;
 } else {
  // wrap_content
  mHeight = DensityUtil.dip2px(mContext, 120);
 }

 // 设置该view的宽高
 setMeasuredDimension(mWidth, mHeight);
 }
}

总结

在的onDraw方法中需要避免频繁的new对象,所以把一些如初始化画笔Paint的方法放到了最前面的构造方法中进行。

在分多个模块绘制时,应该使用canvas.save()和canvas.restore()的组合,来避免不同模块绘制时的相互干扰,在这两个方法中绘制相当于PS中的图层概念,上一个图层进行的修改不会影响到下一个图层的显示效果。

在需要显示动画效果的地方使用属性动画来处理,可自定义的效果强,在系统提供的插值器类不够用的情况下,我么还可通过继承Animation类,重写它的applyTransformation方法来处理各种复杂的动画效果。

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


推荐阅读
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • Startup 类配置服务和应用的请求管道。Startup类ASP.NETCore应用使用 Startup 类,按照约定命名为 Startup。 Startup 类:可选择性地包括 ... [详细]
  • TechStride 网站
    TechStride 成立于2014年初,致力于互联网前沿技术、产品创意及创业内容的聚合、搜索、学习与展示。我们旨在为互联网从业者提供更高效的新技术搜索、学习、分享和产品推广平台。 ... [详细]
  • 本文将带领读者深入了解Android系统源码在手机中的实际表现,通过详细的步骤和专业的解释,帮助你更好地理解Android系统的底层运作机制。 ... [详细]
  • Qt中QSpinBox与QSlider的联动实现
    本文介绍如何在Qt框架下将QSpinBox和QSlider组件进行联动,使用户在拖动滑块或修改文本框中的数值时,两个组件能同步更新,从而提供更加直观和便捷的用户体验。 ... [详细]
  • 本文探讨了在Windows Server 2008环境下配置Tomcat使用80端口时遇到的问题,包括端口被占用、多项目访问失败等,并提供详细的解决方法和配置建议。 ... [详细]
  • 百度搜索结果链接提取工具 UrlGetter V1.43
    该工具专为获取百度搜索引擎的结果页面中的网址链接而设计,能够解析并转换为原始URL。通过正则表达式匹配技术,精准提取网页链接,并提供详细的使用说明和下载资源。 ... [详细]
  • 本文介绍了如何使用Java中的同步方法和同步代码块来实现两个线程的交替打印。一个线程负责打印1到52的数字,另一个线程负责打印A到Z的字母,确保输出顺序为12A34B...5152Z。 ... [详细]
  • 本文将介绍网易NEC CSS框架的规范及其在实际项目中的应用。通过详细解析其分类和命名规则,探讨如何编写高效、可维护的CSS代码,并分享一些实用的学习心得。 ... [详细]
  • 通过Web界面管理Linux日志的解决方案
    本指南介绍了一种利用rsyslog、MariaDB和LogAnalyzer搭建集中式日志管理平台的方法,使用户可以通过Web界面查看和分析Linux系统的日志记录。此方案不仅适用于服务器环境,还提供了详细的步骤来确保系统的稳定性和安全性。 ... [详细]
  • 本文详细探讨了 Django 的 ORM(对象关系映射)机制,重点介绍了其如何通过 Python 元类技术实现数据库表与 Python 类的映射。此外,文章还分析了 Django 中各种字段类型的继承结构及其与数据库数据类型的对应关系。 ... [详细]
  • 本文详细介绍如何在王者荣耀中设置公屏打字,包括半屏键盘的配置方法和常见问题解决技巧。 ... [详细]
  • 探讨了在有序数列中实现多种查询和修改操作的高效数据结构设计,主要使用线段树与平衡树(Treap)结合的方法。 ... [详细]
  • 深入理解T-SQL中的NULL与三值逻辑
    本文探讨了SQL Server中的三值逻辑,解释了谓词计算结果为TRUE、FALSE和UNKNOWN的规则。通过具体示例,详细说明了如何正确处理NULL值,并探讨了在不同约束条件下的行为。 ... [详细]
  • 创建项目:Visual Studio Online 入门指南
    本文介绍如何使用微软的 Visual Studio Online(VSO)创建和管理开发项目。作为一款基于云计算的开发平台,VSO 提供了丰富的工具和服务,简化了项目的配置和部署流程。 ... [详细]
author-avatar
大布丁
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有