本文介一个简单的自定义加载圈的实现
先看看效果:
继承View,和一系列的自定义属性在画布上实现的Loading的效果
效果总共三中:
1.弧度Loading
2.圆Loading
3.可以设置1-100的数字,表示百分比,并在Loading上表示相应的百分比效果
属性文件和属性的意义:
outer_width 外圈的宽
outer_color 外圈的颜色
inner_width 内圈的宽
inner_color 内圈的颜色
inner_rotaing_speed 内圈的速度
mode 模式,arc:弧形的Loading,circle:圆形的Loading,custom:可以设置百分比度数的circle loading
inner_circle_speed 当mode=circle时有效,内圈的速度
inner_custom_degree 当mode=custom时有效,内圈的度数,百分比,1-100之间
LoadingView.java
/**
* 自定义的一个LoadingView
*
* @author mingwei
*/
public class LoadingView extends View {
private final String TAG = "LoadingView";
private Paint mTestPaint;
private Paint mOuterPaint;
private RectF mOuterRectF;
private Paint mInnerPaint;
private RectF mInnerRectF;
/**
* mStart 起始值 弧度 mSweep 终点值 弧度
*/
int mStart = 0;
int mSweep = 90;
int mWidth, mHeight;
int mArcLenght = 60;
/**
* outer width
*/
int mOuterWidth;
/**
* inner width
*/
int mInnerWidth;
/**
* outer color
*/
int mOuterColor;
/**
* inner color
*/
int mInnerColor;
/**
* inner rotating speed
*/
int mInnerRotatingSpeed = 1;
/**
* loading的模式
*/
LoadingMode mLoadingMode = LoadingMode.ARC;
/**
* Circle degree
*/
int mCircle = 0;
/**
* Circle speed,only mode==circle
*/
int mCircleSpeed = 1;
/**
* custom degree,only mode==custom
*/
int mCustomDegree = 0;
enum LoadingMode {
ARC, CIRCLE, CUSTOM;
}
public LoadingView(Context context) {
this(context, null);
}
public LoadingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public LoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initAttr(context, attrs);
}
private void setBounds() {
mOuterRectF = new RectF(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getHeight()
- getPaddingBottom());
mInnerRectF = new RectF(mOuterRectF);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
setBounds();
initPaint();
}
private void initPaint() {
mOuterPaint = new Paint();
mOuterPaint.setAntiAlias(true);
mOuterPaint.setColor(mOuterColor);
mOuterPaint.setStyle(Style.STROKE);
mOuterPaint.setStrokeWidth(mOuterWidth);
//
mInnerPaint = new Paint();
mInnerPaint.setAntiAlias(true);
mInnerPaint.setColor(mInnerColor);
mInnerPaint.setStyle(Style.STROKE);
mInnerPaint.setStrokeWidth(mInnerWidth);
//
mTestPaint = new Paint();
mTestPaint.setAntiAlias(true);
mTestPaint.setColor(Color.BLACK);
mTestPaint.setStyle(Style.STROKE);
}
private void initAttr(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.Loading);
mOuterWidth = array.getDimensionPixelOffset(R.styleable.Loading_outer_width, 0);
mOuterColor = array.getColor(R.styleable.Loading_outer_color, Color.GRAY);
mInnerWidth = array.getDimensionPixelOffset(R.styleable.Loading_inner_width, R.styleable.Loading_inner_width);
mInnerColor = array.getColor(R.styleable.Loading_inner_color, Color.BLACK);
mInnerRotatingSpeed = array.getInt(R.styleable.Loading_inner_rotating_speed, 1);
if (array.getInt(R.styleable.Loading_mode, 0) == 1) {
mLoadingMode = LoadingMode.ARC;
} else if (array.getInt(R.styleable.Loading_mode, 0) == 2) {
mLoadingMode = LoadingMode.CIRCLE;
mCircleSpeed = array.getInt(R.styleable.Loading_inner_circle_speed, 1);
} else if (array.getInt(R.styleable.Loading_mode, 0) == 3) {
mLoadingMode = LoadingMode.CUSTOM;
mCustomDegree = array.getInt(R.styleable.Loading_inner_custom_degree, 1);
}
array.recycle();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// canvas.drawRect(mOuterRectF, mTestPaint);
canvas.drawArc(mOuterRectF, 360, 360, false, mOuterPaint);
if (mLoadingMode == LoadingMode.ARC) {
canvas.drawArc(mInnerRectF, mStart, mSweep + 2, false, mInnerPaint);
// int d = mRandom.nextInt(8);
mStart += mInnerRotatingSpeed;
if (mStart > 360) {
mStart -= 360;
}
invalidate();
} else if (mLoadingMode == LoadingMode.CIRCLE) {
canvas.drawArc(mInnerRectF, mStart, mCircle, false, mInnerPaint);
mCircle += mCircleSpeed;
if (mCircle > 360) {
mCircle -= 360;
}
invalidate();
} else if (mLoadingMode == LoadingMode.CUSTOM) {
float f = (float) mCustomDegree / 100f;
canvas.drawArc(mInnerRectF, mStart, 360f * f, false, mInnerPaint);
}
}
}