简单的自定义圆弧加载框。比较简单,勿喷。
res/下的文件:
<resources>
<attr name="firstcolor" format="color" />
<attr name="firststroke" format="dimension" />
<attr name="secondcolor" format="color" />
<attr name="secondstroke" format="dimension" />
<attr name="threecolor" format="color" />
<attr name="radious" format="dimension" />
<declare-styleable name="DefineProgress">
<attr name="firstcolor" />
<attr name="firststroke" />
<attr name="secondcolor" />
<attr name="secondstroke" />
<attr name="threecolor" />
<attr name="radious"/>
</declare-styleable>
</resources>
获取相应的属性:
/**
* 第一个圆的颜色
*/
private int firstcolor;
/**
* 第二个圆的颜色
*/
private int secondcolor;
/**
* 第三个圆的颜色
*/
private int threecolor;
/**
* 第一个圆的宽度
*/
private int firststroke;
/**
* 第二个圆的宽度
*/
private int secondstroke;
/**
* 第三个圆的宽度
*/
private int threestroke;
/**
* 画笔
*/
private Paint mPaint;
/**
* 矩形
*/
private RectF rect;
/**
* 设置加载的度数
*/
private int progress;
public DefineProgress(Context context) {
this(context, null);
}
public DefineProgress(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public DefineProgress(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DefineProgress, defStyleAttr, 0);
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int arr = array.getIndex(i);
switch (arr) {
case R.styleable.DefineProgress_firstcolor:
firstcolor = array.getColor(arr, Color.BLUE);
break;
case R.styleable.DefineProgress_secondcolor:
secondcolor = array.getColor(arr, Color.RED);
break;
case R.styleable.DefineProgress_threecolor:
threecolor = array.getColor(arr, Color.WHITE);
break;
case R.styleable.DefineProgress_firststroke:
firststroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
break;
case R.styleable.DefineProgress_secondstroke:
secondstroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
break;
case R.styleable.DefineProgress_radious:
threestroke = array.getDimensionPixelSize(arr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 15, getResources().getDisplayMetrics()));
break;
}
}
array.recycle();
init();
}
private void init() {
mPaint = new Paint();
rect = new RectF();
}
然后重写onMeasure方法:
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int width = 0;
int height = 0;
if (widthMode == MeasureSpec.EXACTLY) {
width = widthSize;
} else {
width = 200;
}
if (heightMode == MeasureSpec.EXACTLY) {
height = heightSize;
} else {
height = 200;
}
setMeasuredDimension(width, height);
在onDraw()方法里面画圆:
mPaint.setColor(firstcolor);
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(firststroke);
mPaint.setStyle(Paint.Style.STROKE);
int center = getWidth() / 2;
final int radious = center - secondstroke / 2;
canvas.drawCircle(getMeasuredHeight() / 2, getMeasuredWidth() / 2, radious, mPaint);
rect.left = center - radious;
rect.top = center - radious;
rect.bottom = center + radious;
rect.right = center + radious;
mPaint.setColor(secondcolor);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(secondstroke);
mPaint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawArc(rect, 270, progress, false, mPaint);
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(threecolor);
canvas.drawCircle(center, secondstroke / 2, threestroke, mPaint);
为了使圆弧可以随着设置的值画出,设置了一个方法:
public void setUpdateAngle(final int angle) {
new Thread() {
@Override
public void run() {
while (true) {
if (progress <= angle) {
progress++;
try {
sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
postInvalidate();
}
}
}
}.start();
}
最后在MainActivity设置进度值:
setContentView(R.layout.activity_main);
DefineProgress progress = (DefineProgress) findViewById(R.id.progress);
progress.setUpdateAngle(90);
源码链接:源码