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

概述View仿华为圆形加载进度条效果图实现思路可以看出该View可分为三个部分来实现

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

实现思路

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

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

中间显示的文字进度，需要让文字在VIEw中居中显示

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

具体实现

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

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

<resources> <!-- 仿华为圆形加载进度条 --> <declare-styleable name="CircleLoading">  <attr name="indexcolor" format="color"/>  <attr name="basecolor" format="color"/>  <attr name="dotcolor" format="color"/>  <attr name="textSize" format="dimension"/>  <attr name="textcolor" format="color"/> </declare-styleable></resources>

各个属性的作用：

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,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,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,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,mHeight / 2);  canvas.drawCircle(mWIDth / 2,10) + DensityUtil.dip2px(mContext,5),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,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,mHeight / 2);  }  canvas.restore(); } /**  * 画内部数值  */ private voID drawTextValue(Canvas canvas) {  canvas.save();  String showValue = String.valueOf(progress);  Rect textBound = new Rect();  mTextPaint.getTextBounds(showValue,mTextPaint);  canvas.restore(); } /**  * 画旋转小圆点  */ private voID drawRotateDot(final Canvas canvas) {  canvas.save();  canvas.rotate(mDotProgress * 3.6f,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,mHeight); }}

总结

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

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

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

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

总结

以上是内存溢出为你收集整理的Android自定义View仿华为圆形加载进度条全部内容，希望文章能够帮你解决Android自定义View仿华为圆形加载进度条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。