自定义View之刻度盘

转载请注明出处：http://blog.csdn.net/Myleike/article/details/50776680

很多时候android原生的控件都不能满足我们的需求，比如说我们要实现下面这个内存清理按钮：
![这里写图片描述](https://img-blog.csdn.net/20160302230442994)
这时就需要我们自定义一个控件了。

自定义控件共需完成下面四个步骤：

定义控件属性

在代码中获取属性值

重写onMeasure()方法(不是必须)

重写onDraw()方法

废话不多说，直接上代码

一、定义控件属性

res/values/attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="DialView">
<attr name="padding" format="float"/>
<attr name="out_oval_color" format="color"/>
<attr name="bar_color" format="color"/>
<attr name="bar_background_color" format="color"/>
<attr name="graduation_color" format="color"/>
<attr name="progress" format="integer"/>
<attr name="context" format="string"/>
<attr name="min_size" format="string"/>
<attr name="max_size" format="string"/>
<attr name="text_color" format="color"/>
</declare-styleable>
</resources>

二、在代码中获取属性值

public DialView(Context context, AttributeSet attrs, int defStyle){
super(context, attrs, defStyle);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DialView, defStyle, 0);
padding = typedArray.getFloat(R.styleable.DialView_padding, 10);
outOvalColor = typedArray.getColor(R.styleable.DialView_out_oval_color, Color.WHITE);
barColor = typedArray.getColor(R.styleable.DialView_bar_color, Color.WHITE);
barBackgroundColor = typedArray.getColor(R.styleable.DialView_bar_background_color, 0x60ffffff);
graduationColor = typedArray.getColor(R.styleable.DialView_graduation_color, Color.WHITE);
progress = typedArray.getInt(R.styleable.DialView_progress, 0);
barContext = typedArray.getString(R.styleable.DialView_context);
minSize = typedArray.getString(R.styleable.DialView_min_size);
maxSize = typedArray.getString(R.styleable.DialView_max_size);
textColor = typedArray.getColor(R.styleable.DialView_text_color, Color.WHITE);
}

三、重写onMeasure()方法计算控件大小

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//计算控件宽度
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
//计算控件高度
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
this.w = sizeWidth-padding*2;
this.h = sizeHeight - padding*2;
this.radius = w / 2 < h / 2 ? w / 2 : h / 2; // 计算半径
this.center = new Point(sizeWidth/2, sizeHeight/2);//计算圆心

this.outRadius = radius / 31 * 30.5F;//外圆半径
this.barRadius = radius / 31 * 28;//进度条半径
this.inRadius = radius / 31 * 26F;//内圆半径
initView();
}

初始化画笔

private void initView(){
Paint basePaint = new Paint();
basePaint.setAntiAlias(true);
basePaint.setStyle(Paint.Style.STROKE);

outOvalPaint = new Paint(basePaint);
outOvalPaint.setColor(outOvalColor);
outOvalPaint.setStrokeWidth(2);

barPaint = new Paint(basePaint);
barPaint.setColor(barColor);
//设置圆弧为圆端
barPaint.setStrokeCap(Paint.Cap.ROUND);
barPaint.setStrokeWidth(radius / 31 * 3);

graduationPaint = new Paint(basePaint);
graduationPaint.setColor(graduationColor);
graduationPaint.setStrokeWidth(2);

textPaint = new Paint(basePaint);
textPaint.setColor(textColor);
}

四、重写onDraw()方法绘制控件

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Point liftStart = CustomViewMath.getPoint(center, outRadius, 315.0);
Point rightStart = CustomViewMath.getPoint(center, outRadius, 45.0);
// 绘制外圆弧
canvas.drawArc(creatRectF(outRadius), 135, 270, false, outOvalPaint);
//  绘制横线
canvas.drawLine(liftStart.x, liftStart.y, liftStart.x - 10,
liftStart.y, outOvalPaint);
canvas.drawLine(rightStart.x, rightStart.y, rightStart.x + 10,
rightStart.y, outOvalPaint);
//绘制进度条
barPaint.setColor(barColor);
canvas.drawArc(creatRectF(barRadius), 135, 270 * progress / 100,false,barPaint);
barPaint.setColor(barBackgroundColor);
canvas.drawArc(creatRectF(barRadius), 135, 270,false,barPaint);

// 绘制内圆弧
canvas.drawArc(creatRectF(inRadius), 135, 270, false, graduationPaint);
int length;
for (int i = 0; i < 101; i++) {
if (i % 10 == 0)
length = 12;
else if (i % 5 == 0)
length = 9;
else
length = 5;
Point start = CustomViewMath.getPoint(center, inRadius, (double) (315 - i * space));
Point stop = CustomViewMath.getPoint(center, inRadius - length, (double)(315 - i * space));
canvas.drawLine(start.x, start.y, stop.x, stop.y, graduationPaint);
}
/** 绘制百分比 */
textPaint.setTextSize(radius / 3 * 2);
float l = textPaint.measureText(progress + "");
canvas.drawText(progress + "", (getWidth() - l) / 2, getHeight() / 2, textPaint);

textPaint.setTextSize(radius / 9 * 2);
canvas.drawText("%", (getWidth() - l) / 2 + l, getHeight() / 2, textPaint);
/**绘制信息*/
if(barContext!=null&&!barContext.equals("")){
textPaint.setTextSize(radius / 13 * 2);
Paint.FontMetrics fm1 = textPaint.getFontMetrics();
float tl = textPaint.measureText(barContext);
canvas.drawText(barContext, (getWidth() - tl) / 2, getHeight() / 2 + (fm1.bottom-fm1.top)*2, textPaint);
}
//绘制数值范围
Point liftPoint = CustomViewMath.getPoint(center, barRadius, 315.0);
Point rightPoint = CustomViewMath.getPoint(center, barRadius, 45.0);
textPaint.setTextSize(radius / 15 * 2);
float minl = textPaint.measureText(minSize);
float maxl = textPaint.measureText(maxSize);
canvas.drawText(minSize, liftPoint.x - minl / 2, liftPoint.y + minl / 3
* 2, textPaint);
canvas.drawText(maxSize, rightPoint.x - maxl / 2, rightPoint.y + maxl
/ 3 * 2, textPaint);
}

我们还可以为他添加点击事件——重写onTouchEvent()

@Override
public boolean onTouchEvent(MotionEvent event) {
RectF rectF = creatRectF(radius);
if(isDown)  return true;
if (event.getX() > rectF.left && event.getX() < rectF.right && event.getY() > rectF.top && event.getY() < rectF.bottom) {
if (event.getAction() == MotionEvent.ACTION_UP) {
isDown = true;
//这里是一个回掉接口，我们可以通过实现他来做我们的操作
if (listener != null)
listener.onClick();
new Thread(new Runnable() {
@Override
public void run() {
Random random = new Random();
int n = random.nextInt(100)+1;
try {
while (progress > 0) {
progress--;
Thread.sleep(20);
Message msg = new Message();
msg.what = 1;
mhandler.sendMessage(msg);
}
while (progress < n) {
progress++;
Thread.sleep(20);
Message msg = new Message();
msg.what = 1;
mhandler.sendMessage(msg);
}
isDown = false;
}catch (Exception e){}
}
}).start();
}
}
return  true;
}

由于篇幅原因，这里只贴主要代码。要查看源码，请点击下载

转载请注明出处：http://blog.csdn.net/Myleike/article/details/50776680