自定义View实战：汽车速度仪表盘
什么，已经周一了？是的，当你阅读这篇文章的时候，新的一周已经开始了。今天这篇文章来自 小可_luo 的投稿，代码虽然简单，但是个人觉得这个小项目还是挺有意思的。希望大家在轻松阅读之余，会有一个信心爆表的状态。
小可_luo的博客地址：http://blog.****.net/lxk_1993
废话不多说 ，先上效果图：
是不是很酷炫?
看起来觉得有点复杂？ 其实不难 ， 实现起来很容易。绘制逻辑如下：
1. 绘制一个实心的圆做仪表盘背景：
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(0xFF343434);
canvas.drawCircle(pointX, pointY, raduis, mPaint);
2. 绘制外面的两个圆环 和 里面的 两个圆环：
//外圈2个圆
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(0xBF3F6AB5);
mPaint.setStrokeWidth(4 * mDensityDpi);
canvas.drawCircle(pointX, pointY, raduis, mPaint);
mPaint.setStrokeWidth(3 * mDensityDpi);
canvas.drawCircle(pointX, pointY, raduis - 10 * mDensityDpi, mPaint);
//内圈2个圆
mPaint.setStrokeWidth(5 * mDensityDpi);
mPaint.setColor(0xE73F51B5);
canvas.drawCircle(pointX, pointY, raduis / 2, mPaint);
mPaint.setColor(0x7E3F51B5);
canvas.drawCircle(pointX, pointY, raduis / 2 + 5 * mDensityDpi, mPaint);
mPaint.setStrokeWidth(3 * mDensityDpi);
3. 绘制仪表盘的刻度：
/**
* 绘制刻度
*/
private void drawScale(Canvas canvas) {
for (int i = 0; i < 60; i++) {
if (i % 6 == 0) {
canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 50 * mDensityDpi, pointY, mPaint);
} else {
canvas.drawLine(pointX - raduis + 10 * mDensityDpi, pointY, pointX - raduis + 30 * mDensityDpi, pointY, mPaint);
}
canvas.rotate(6, pointX, pointY);
}
}
4. 绘制 “仪表盘的速度标识 、中间的速度与单位”文字：
/**
* 绘制速度标识文字
*/
private void drawText(Canvas canvas, int value) {
String TEXT = String.valueOf(value);
switch (value) {
case 0:
// 计算Baseline绘制的起点X轴坐标
baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textPaint.measureText(TEXT) / 2 + textScale / 2);
// 计算Baseline绘制的Y坐标
baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) + textScale / 2);
break;
case 30:
baseX = (int) (pointX - raduis + 50 + textPaint.measureText(TEXT) / 2);
baseY = (int) (pointY + textScale);
break;
case 60:
baseX = (int) (pointX - sRaduis * Math.cos(Math.PI / 5) + textScale);
baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
break;
case 90:
baseX = (int) (pointX - sRaduis * Math.cos(2 * Math.PI / 5) - textScale / 2);
baseY = (int) (pointY - sRaduis * Math.sin(2 * Math.PI / 5) + 2 * textScale);
break;
case 120:
baseX = (int) (pointX + sRaduis * Math.sin(Math.PI / 10) - textPaint.measureText(TEXT) / 2);
baseY = (int) (pointY - sRaduis * Math.cos(Math.PI / 10) + 2 * textScale);
break;
case 150:
baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
baseY = (int) (pointY - sRaduis * Math.sin(Math.PI / 5) + textScale * 2);
break;
case 180:
baseX = (int) (pointX + sRaduis - textPaint.measureText(TEXT) - textScale / 2);
baseY = (int) (pointY + textScale);
break;
case 210:
baseX = (int) (pointX + sRaduis * Math.cos(Math.PI / 5) - textPaint.measureText(TEXT) - textScale / 2);
baseY = (int) (pointY + sRaduis * Math.sin(Math.PI / 5) - textScale / 2);
break;
}
canvas.drawText(TEXT, baseX, baseY, textPaint);
}
/**
* 绘制中间内容
*/
private void drawCenter(Canvas canvas) {
//速度
textPaint.setTextSize(60);
float tw = textPaint.measureText(String.valueOf(speed));
baseX = (int) (pointX - tw / 2);
baseY = (int) (pointY + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
canvas.drawText(String.valueOf(speed), baseX, baseY, textPaint);
//单位
textPaint.setTextSize(20);
tw = textPaint.measureText("km/h");
baseX = (int) (pointX - tw / 2);
baseY = (int) (pointY + raduis / 4 + Math.abs(textPaint.descent() + textPaint.ascent()) / 4);
canvas.drawText("km/h", baseX, baseY, textPaint);
}
5. 绘制速度范围的扇形区域：
/**
* 绘制速度区域扇形
*/
private void drawSpeedArea(Canvas canvas) {
int degree;
if (speed < 210) {
degree = speed * 36 / 30;
} else {
degree = 210 * 36 / 30;
}
canvas.drawArc(speedRectF, 144, degree, true, speedAreaPaint);
//不显示中间的内圈的扇形区域
mPaint.setColor(0xFF343434);
mPaint.setStyle(Paint.Style.FILL);
canvas.drawArc(speedRectFInner, 144, degree, true, mPaint);
mPaint.setStyle(Paint.Style.STROKE);
}
6. 实现点击让 速度动起来。实现runnable 接口：
@Override
public void run() {
int speedChange;
while (start) {
switch (type) {
case 1://油门
speedChange = 3;
break;
case 2://刹车
speedChange = -5;
break;
case 3://手刹
speed = 0;
default:
speedChange = -1;
break;
}
speed += speedChange;
if (speed < 1) {
speed = 0;
}
try {
Thread.sleep(50);
setSpeed(speed);
} catch (InterruptedException e) {
e.printStackTrace();
break;
}
}
}
7. 在activity中启动线程，设置监听：
//设置监听
speedUp.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//按下的时候加速 speedControlView.setType(1);
break;
case MotionEvent.ACTION_UP: //松开做自然减速 speedControlView.setType(0);
break;
}
return true; } });
speedDown.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: //按下的时候减速 speedControlView.setType(2);
break;
case MotionEvent.ACTION_UP: //松开做自然减速 speedControlView.setType(0);
break; }
return true; } });
shutDown.setOnTouchListener(new View.OnTouchListener() {
@Override public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: //按下的时候拉手刹 speedControlView.setType(3);
break;
case MotionEvent.ACTION_UP: //松开做自然减速 speedControlView.setType(0);
break; }
return true; } }); @Override
protected void onResume() {
super.onResume();
if (speedControlView != null) { speedControlView.setSpeed(0); speedControlView.setStart(true); }
new Thread(speedControlView).start(); }
搞定！看，是不是很简单。
由于本篇文章代码比较多，因此只贴出了一些最核心的代码，完整代码请点击下方 阅读原文 进行下载。另外预告一下，明天将会分享我自己写的文章，敬请期待。
如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。
欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：