Android 自定义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, 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绘制流程还不熟悉的同学，可以先去了解下具体的绘制流程

http://blog.csdn.net/zhuwentao2150/article/details/53494760

重写

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

方法来处理各种复杂的动画效果。