在学习本篇之前，你首先需要了解如下知识点：
- 自定义属性
- 自定义view中常用的绘图函数
- 最好能先学习上篇 自定义view之圆形进度条
实现效果图：
支付宝动画.gif
实现步骤：
- 绘制圆形
- 绘制对号的左边部分
- 绘制对号右边的部分
是不是感觉说了和没说一样，但思路就是这样
我们先创建一个LoadingView继承自view类，并在构造函数中加载自定义的属性值，对于LoadingView 自定义的属性只有2个，一个是圆的宽度，一个是颜色。
public class LoadingView extends View {
private int mWidth; //宽度
private int mHeight;//高度
private int mPrecent;//圆形进度
private float mLeftStep;//对号 左边进度
private float mRightStep;//对号 右边进度
private boolean endFlag;//绘制结束标记
private int mStripeWidth;//原的宽度
private int mColor;//绘制颜色
public LoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
endFlag = false;
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LoadingView);
mStripeWidth = (int) typedArray.getDimension(R.styleable.LoadingView_strokeWidth, 10);
mColor = typedArray.getColor(R.styleable.LoadingView_backColor, Color.WHITE);
}
为了能有动画效果，其实需要不停的调用
this.postInvalidateDelayed(100);
这个函数表示：在指定的时间后如100s后通知view进行重绘即重新进行ondraw()方法，所以可以设置进度来控制绘制效果看起来像动态变化。
- 绘制圆形
@Override
protected void onDraw(Canvas canvas) {
Paint p = new Paint();
p.setColor(mColor);
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(mStripeWidth);
p.setAntiAlias(true);
if (mPrecent < 100) {
mPrecent += 5;
drawCicle(canvas, p);
}
if (!endFlag) {
this.postInvalidateDelayed(20);
}
}
/**
* 画原形
* @param canvas
* @param p
*/
private void drawCicle(Canvas canvas, Paint p) {
int endAngle = (int) (mPrecent * 3.6);
RectF rectF = new RectF(mStripeWidth, mStripeWidth, mWidth - mStripeWidth, mHeight - mStripeWidth);
canvas.drawArc(rectF, 270, endAngle, false, p);
}
- 画对号左边
其实要画对号左边，必须实在圆形已经绘制完成的基础上进行。
if (mPrecent < 100) {
mPrecent += 5;
drawCicle(canvas, p);
} else {
drawCicle(canvas, p);
if (mLeftStep < 1.0) {
mLeftStep += 0.1;
drawLeft(canvas, p);
}
}
这里多做了一个动作，就是进度达到100了，在绘制左边的对号之前，肯定还要再绘制一次圆形，不然就不会显示，要清楚重绘是把上次绘制的全部擦除再重新用新的画布去绘制。
/**
* 画对号左边部分
*
* @param canvas
* @param p
*/
private void drawLeft(Canvas canvas, Paint p) {
Path path = new Path();
path.moveTo(mWidth * 0.25f, mHeight * 0.5f );
path.lineTo(mWidth * 0.25f + mWidth * 0.25f * mLeftStep, mHeight * 0.5f + mHeight * 0.25f * mLeftStep );
canvas.drawPath(path, p);
}
- 画右边对号
原理和左边相同，在绘制对号右边之前，先把圆形和对号左边绘制出来。
@Override
protected void onDraw(Canvas canvas) {
Paint p = new Paint();
p.setColor(mColor);
p.setStyle(Paint.Style.STROKE);
p.setStrokeWidth(mStripeWidth);
p.setAntiAlias(true);
if (mPrecent < 100) {
mPrecent += 5;
drawCicle(canvas, p);
} else {
drawCicle(canvas, p);
if (mLeftStep < 1.0) {
mLeftStep += 0.1;
drawLeft(canvas, p);
} else {
drawLeft(canvas, p);
if (mRightStep < 1.0) {
mRightStep += 0.1;
drawRight(canvas, p);
} else {
endFlag = true;
drawRight(canvas, p);
}
}
}
}
/**
* 画对号右边部分
*
* @param canvas
* @param p
*/
private void drawRight(Canvas canvas, Paint p) {
Path path = new Path();
path.moveTo(mWidth * 0.5f - mStripeWidth / 2, mHeight * 0.75f);
path.lineTo(mWidth * 0.5f- mStripeWidth / 2 + mWidth * 0.25f * mRightStep, mHeight * 0.75f - mHeight * 0.5f * mRightStep );
canvas.drawPath(path, p);
}
需要注意的是，如果绘制全部完成了，就不用再发送重绘消息通知了,反之亦然。
if (!endFlag) {
this.postInvalidateDelayed(20);
}
- 最后就是调用，我把loadingView放到一个对话框上去显示
btLoad.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
new AlertDialog.Builder(MainActivity.this).setView(R.layout.layout).setNegativeButton("OK", null).create().show();
}
});
代码下载：
https://yunpan.cn/c6RQHNdFbmgE9 （提取码：4e66）
网友评论