圆环百分比自定义View

Android自定义View的学习是初级开发到中级开发的一个重要学习内容。今天就自己做一个自定义小控件。该控件为圆环百分比显示，并显示绘画的过程动画。

自定义View开发步骤：

①自定义View的属性；
②在View的构造方法中构造我们的自定义View;
③重写onMeasure();
④重写onDraw();

⑤其他外部接口方法。

①自定义View的属性：创建res/values/attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="firstColor" format="color" />
<attr name="circleWidth" format="dimension" />
<attr name="speed" format="integer" />

<declare-styleable name="CustomProgressBar">
<attr name="firstColor" />
<attr name="circleWidth" />
<attr name="speed" />
</declare-styleable>

</resources>

②在View的构造方法中构造我们的自定义View

public class PercentProgressBar extends View {
private final String TAG = "PercentProgressBar";
//画笔
private  Paint mPaint;
//动画速度
private  int mSpeed;
//圆环宽度
private  int mCircleWidth;
//默认基体颜色
private  int mFirstColor;
//进度
private int mProgress;
//各部分所占角度
private int[] percents;
//各部分的颜色
private int[] colors;
//判断是否开始动画
private boolean start = false;

public PercentProgressBar(Context context) {
this(context, null);
}

public PercentProgressBar(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public PercentProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);

TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CustomProgressBar, defStyleAttr, 0);
int n = a.getIndexCount();

for(int i=0; i<n; i++){
int attr = a.getIndex(i);
switch (attr){
case R.styleable.CustomProgressBar_firstColor:
mFirstColor = a.getColor(attr, Color.GREEN);
break;
case R.styleable.CustomProgressBar_circleWidth:
mCircleWidth = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
break;
case R.styleable.CustomProgressBar_speed:
mSpeed = a.getInt(attr, 20);
break;
}
}
a.recycle();
mPaint = new Paint();
colors = new int[]{Color.YELLOW, Color.GREEN, Color.BLUE};
}
...
}

③重新onMeasure():（本自定义View未处理）。

④重写onDraw()

@Override
protected void onDraw(Canvas canvas) {

int center = getWidth()/2;
int radius = center - mCircleWidth/2;
mPaint.setStrokeWidth(mCircleWidth);
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
RectF oval = new RectF(center - radius, center - radius, center + radius, center + radius);

mPaint.setColor(mFirstColor);
canvas.drawCircle(center, center, radius, mPaint);

if(!start) return;

if(mProgress < percents[0]){
mPaint.setColor(colors[0]);
canvas.drawArc(oval, 0, mProgress, false, mPaint);
}else if(mProgress < percents[1]+percents[0]){
mPaint.setColor(colors[0]);
canvas.drawArc(oval, 0, percents[0], false, mPaint);
mPaint.setColor(colors[1]);
canvas.drawArc(oval, percents[0], mProgress-percents[0], false, mPaint);
}else {
mPaint.setColor(colors[0]);
canvas.drawArc(oval, 0, percents[0], false, mPaint);
mPaint.setColor(colors[1]);
canvas.drawArc(oval, percents[0], percents[1], false, mPaint);
mPaint.setColor(colors[2]);
canvas.drawArc(oval, percents[0]+percents[1], mProgress-percents[1]-percents[0], false, mPaint);
}
}

⑤接口方法：

/**
* 开始各部分百分比绘画
*/
public void start(){
start = true;
new Thread(){
@Override
public void run() {
mProgress = 0;
while (mProgress <=360 ){
mProgress++;
postInvalidate();
try {
this.sleep(mSpeed);
}catch (Exception e){
e.printStackTrace();
}
}
}
}.start();
}

/**
* @param values 设置各部分的值
*/
public void setPercent(float[] values){
float sum = 0f;
for(float value : values){
sum += value;
}
percents = new int[values.length];
for(int i=0; i<values.length; i++){
percents[i] = (int) (values[i]/sum*360);
}
Log.i(TAG, percents[0]+","+percents[1] +","+ percents[2]);
}

/**
* @param colors 设置自定义各部分颜色
*/
public void setDifColor(int[] colors){
this.colors = colors;
Log.i(TAG, colors[0]+","+colors[1] +","+ colors[2]);
}

在Activity中使用(布局文件比较简单，就不贴了)：

mPercentProgressBar = (PercentProgressBar)findViewById(R.id.progress_bar);
mPercentProgressBar.setPercent(new float[]{120, 56, 180});
mPercentProgressBar.setDifColor(new int[]{0xffff0000, 0xff00ff00,0xff0000ff});

mPercentProgressBar.start();