Android 自定义仪表盘

最近需要写一个用到各种图表的项目，比较过后决定用hellocharts框架，感觉足够简洁，后来发现这框架里没有仪表盘这个控件，但又不想换其他框架，于是在网上搜索一番，找到一个仪表盘学习demo，尝试后初步改成了所需样式。界面如下：

因为为demo，界面比较丑陋，需要再美化。另代码设计也有很大改进精简空间，待正式项目中再进行修改，此为学习所用。

所参考文章：http://blog.csdn.net/qq_26411333/article/details/52399831

原文是可以触摸改变指针指向，因需求不同，将此功能删除了。

改动后的view不同的是可以设置初始值和终点值，可以设置需要的刻度段数，可以通过设置改变指针指向，当然所有可变量都可抽出设置方法，可跟需求改动。

代码改动过程中，有若干点需要注意：

1、在分多种颜色绘制时，总是出现最后一个颜色覆盖掉之前不同的颜色，查询才知道

canvas.drawPath(linePath, linePaint)中path是包含从绘制起所有路径，所以在最后改变时，也会将之前所有路径改为同一风格，换成其他draw方法即可。

2、绘制过程中，会用到一些三角函数公式，此坐标是以指针起点固定点为原点，水平向右为x轴正方向，竖直向下为y轴正方向，所以第一二三四象限是顺时针定义的。因为外圆内院半径固定，可由任何角度根据三角函数公式获取所需值。PathMeasure等类也有所封装。

全部代码：

package xr.hellochartsdemo.ui.activity.dashboard;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.renderscript.Sampler;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;

import java.math.BigDecimal;

import static android.R.attr.x;
import static android.R.attr.y;

/**
* Created by wxy .
* 仪表盘
*/
public class DashboardView extends View {

private int width;
private int height;

private Paint outerCirclePaint;//外层圆的画笔
private Paint outerCirclePaint2;//外层圆的画笔2
private Paint outerCirclePaint3;//外层圆的画笔3
private Paint innerCirclePaint;//内层圆的画笔
private Paint linePaint;//线段画笔
private Paint arrowPaint;//指针画笔
private Paint textPaint;//标注文字
private Paint textPaint2;//目标指针文字

private Path outerCirclePath;//外层圆的Path
private Path innerCirclePath;//内层圆的Path
private Path linePath;//线段的Path
private Path arrowPath;//指针的Path
private Path measureArrowPath;//arrowPath借助该Path来保持一定的长度

private RectF outRectF;//用于绘制外层圆   通过四个坐标参数来确定一个矩形的区域。
private RectF innerRectF;//用于绘制内层圆

private int count = 10;//画count根线
private static int outerR = 100;//外部圆环的半径
private static int innerR = (int) (outerR * 0.9f);//内部圆环的半径
private int shortageAngle = 60;//缺失的部分的角度
private int startAngle;//开始的角度
private int sweepAngle;//扫过的角度
private int endAngle;

private float[] leftEndPoint;//左侧边界的坐标
private float[] rightEndPoint;//右侧边界的坐标
private float leftEndTan;//左侧边界的tan值
private float rightEndTan;//右侧边界的tan值

private float nowX = 0;//触摸位置的横坐标
private float nowY = 0;//触摸位置的纵坐标
private static float percent = 0.9f;//指针与内层圆的比值
private float arrowLength = innerR * percent;//指针的长度

double aimSweepAngel = 0;//起始角度 起点
float startValue = 0;//默认起始值
float endValue = 100;//默认终止值
private int textCount = count;//标注文字个数 默认

private PathMeasure arrowMeasure;//用于指针的测量
private boolean isColorful = true;
private double aimValue = startValue;

public DashboardView(Context context) {
super(context);
initPaint();
initAngle();
}

public DashboardView(Context context, AttributeSet attrs) {
super(context, attrs);
initPaint();
initAngle();
}

public DashboardView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initPaint();
initAngle();
}

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
width = w;
height = h;
//让指针一开始指向正上方
nowX = 0;
nowY = -1;
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.translate(width / 2, height / 2);
drawOuterCircle(canvas);
drawInnerCircle();
drawLine(canvas);
drawArrow(canvas);
drawText(canvas);
drawAimText(canvas);
}

/**
* 外层圆圈
*/
private void drawOuterCircle(Canvas canvas) {
//一般绘制圆圈的方法，不做介绍了
outerCirclePath = new Path();
if (outRectF == null) {
outRectF = new RectF(-outerR, -outerR, outerR, outerR);
}
outerCirclePath.addArc(outRectF, startAngle, sweepAngle);
canvas.drawArc(outRectF, startAngle, sweepAngle, false, outerCirclePaint);
if (isColorful) {//是否要表盘是彩色的
canvas.drawArc(outRectF, startAngle, sweepAngle / 5, false, outerCirclePaint);
canvas.drawArc(outRectF, startAngle + sweepAngle / 5, 3 * sweepAngle / 5, false, outerCirclePaint2);
canvas.drawArc(outRectF, startAngle + sweepAngle / 5 + 3 * sweepAngle / 5, sweepAngle / 5, false, outerCirclePaint3);
}
}

/**
* 内层圆圈
*/
private void drawInnerCircle() {
//一般绘制圆圈的方法，不做介绍了
innerCirclePath = new Path();
if (innerRectF == null) {
innerRectF = new RectF(-innerR, -innerR, innerR, innerR);
}
innerCirclePath.addArc(innerRectF, startAngle, sweepAngle);
}

/**
* 画直线，组成一个类似于弧形的形状
*
* @param canvas
*/
private void drawLine(Canvas canvas) {
linePath = new Path();
//用于外层圆的测量
//PathMeasure是一个用来测量Path的类
//创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。
PathMeasure outMeasure = new PathMeasure(outerCirclePath, false);
float outlength = outMeasure.getLength();
float[] outPos = new float[2];

//用于内层圆的测量
PathMeasure inMeasure = new PathMeasure(innerCirclePath, false);
float inlength = inMeasure.getLength();
float[] inPos = new float[2];

//确定左侧末尾的坐标以及tan值
if (leftEndPoint == null) {
leftEndPoint = new float[2];
//通过getPosTan拿到内层圆的左侧末尾坐标
inMeasure.getPosTan(0, leftEndPoint, null);
//因为指针要短一点;所以x,y都乘以percent才是指针真正的左侧末尾坐标
leftEndPoint[0] = leftEndPoint[0] * percent;
leftEndPoint[1] = leftEndPoint[1] * percent;
//确定指针在左侧末尾时的tan值
leftEndTan = leftEndPoint[1] / leftEndPoint[0];
}

//确定右侧末尾的坐标以及tan值
if (rightEndPoint == null) {
rightEndPoint = new float[2];
//通过getPosTan拿到内层圆的右侧末尾坐标
inMeasure.getPosTan(inlength, rightEndPoint, null);
//因为指针要短一点;所以x,y都乘以percent才是指针真正的右侧末尾坐标
rightEndPoint[0] = rightEndPoint[0] * percent;
rightEndPoint[1] = rightEndPoint[1] * percent;
//确定指针在右侧末尾时的tan值
rightEndTan = rightEndPoint[1] / rightEndPoint[0];
}

//用来画多条线段，组成弧形
for (int i = 0; i <= count; i++) {
//外层圆当前的弧长
float outNowLength = outlength * i / (count * 1.0f);
//当前弧长下对应的坐标outPos
outMeasure.getPosTan(outNowLength, outPos, null);

//内层圆当前的弧长
float inNowLength = inlength * i / (count * 1.0f);
//当前弧长下对应的坐标inPos
inMeasure.getPosTan(inNowLength, inPos, null);

//moveTo到内层圆弧上的点
linePath.moveTo(outPos[0], outPos[1]);
//lineTo到外层圆弧上的点
linePath.lineTo(inPos[0], inPos[1]);

if (isColorful) {
if (i <= count / 5) {
linePaint.setColor(Color.GREEN);
} else if (i >= count - count / 5) {
linePaint.setColor(Color.RED);
} else {
linePaint.setColor(Color.BLUE);
}
}
//问题:最后的颜色 会覆盖掉之前的颜色？？
//分析：在此循环中 linePath一直在添加直线路径 当i=9时 已经包含所有路径
//证明：把canvas.drawPath(linePath, linePaint); 放循环外 亦可绘制全部小刻标
//结论：所以此方法只要求得outPos、inPos坐标即可 不必此方法
//Path主要用于绘制复杂的图形轮廓，比如折线，圆弧以及各种复杂图案
//          canvas.drawPath(linePath, linePaint);
canvas.drawLine(outPos[0], outPos[1], inPos[0], inPos[1], linePaint);
}
//      canvas.drawPath(linePath, linePaint);
}

/**
* 绘制指针
*
* @param canvas
*/
private void drawArrow(Canvas canvas) {

//      double f = Math.toRadians(aimSweepAngel + shortageAngle / 2 - 90);
double f = Math.toRadians(aimSweepAngel + startAngle);
nowX = (float) Math.cos(f) * arrowLength;
nowY = (float) Math.sin(f) * arrowLength;

arrowPath = new Path();
arrowPath.reset();
//这时，指针的末尾位置最终确定了，可以绘制了
arrowPath.moveTo(0, 0);
arrowPath.lineTo(nowX, nowY);
canvas.drawPath(arrowPath, arrowPaint);
}
/**
* 显示指针指向的值
* @param canvas
*/
private void drawAimText(Canvas canvas) {
//中心点下
canvas.drawText(formatDouble(aimValue)+ "", -10 , outerR , textPaint2);
}

/**
* 设置仪表刻度个数
* @param n
*/
public void setTextCount(int n) {
textCount = n;
}

/**
* 显示仪表刻度值
* @param canvas
*/
public void drawText(Canvas canvas) {
float angle = startAngle;
double value = startValue;
for (int i = 0; i <= textCount; i++) {
angle = startAngle + i * sweepAngle / textCount;
value = startValue + i * formatFloat((endValue - startValue) / textCount);

if (isColorful) {
if (i <= textCount / 5) {
textPaint.setColor(Color.GREEN);
} else if (i >= textCount - textCount / 5) {
textPaint.setColor(Color.RED);
} else {
textPaint.setColor(Color.BLUE);
}
}
drawtext(canvas, angle, value + "");
}
}

//float处理
private float formatFloat(float f) {
BigDecimal bigDecimal = new BigDecimal(f);
return bigDecimal.setScale(2, BigDecimal.ROUND_HALF_UP).floatValue();
}
private double formatDouble(double d) {
BigDecimal bigDecimal = new BigDecimal(d);
return bigDecimal.setScale(2, BigDecimal.ROUND_HALF_UP).doubleValue();
}

private void drawtext(Canvas canvas, double angle, String value) {
double f = Math.toRadians(angle);
float x1 = (float) Math.cos(f) * (innerR - 5);
if (x1 > 0) {
x1 -= 26;
} else if (x1 == 0) {
x1 -= 10;
}
float y1 = (float) Math.sin(f) * (innerR - 5);
canvas.drawText(value + "", x1, y1, textPaint);
}

public void setArrowData(double f) {//根据值转换成角度 再转换成坐标
aimValue = f;
double percent = (aimValue - startValue) / (endValue - startValue);
double angel = percent * sweepAngle;
aimSweepAngel = angel; //0 -> sweepAngle
}

public void setStartingValue(float startingValue) {
this.startValue = startingValue;
}

public void setEndValue(float endValue) {
this.endValue = endValue;
}

/**
* 初始化画笔
*/
private void initPaint() {
if (outerCirclePaint == null) {
outerCirclePaint = new Paint();
outerCirclePaint.setStyle(Paint.Style.STROKE);
outerCirclePaint.setStrokeWidth(4);
outerCirclePaint.setColor(Color.GREEN);
outerCirclePaint.setAntiAlias(true);//抗锯齿
}
if (outerCirclePaint2 == null) {
outerCirclePaint2 = new Paint();
outerCirclePaint2.setStyle(Paint.Style.STROKE);
outerCirclePaint2.setStrokeWidth(4);
outerCirclePaint2.setColor(Color.BLUE);//blue
outerCirclePaint2.setAntiAlias(true);//抗锯齿
}
if (outerCirclePaint3 == null) {
outerCirclePaint3 = new Paint();
outerCirclePaint3.setStyle(Paint.Style.STROKE);
outerCirclePaint3.setStrokeWidth(4);
outerCirclePaint3.setColor(Color.RED);//
outerCirclePaint3.setAntiAlias(true);//抗锯齿
}
if (innerCirclePaint == null) {
innerCirclePaint = new Paint();
innerCirclePaint.setStyle(Paint.Style.STROKE);
//          outerCirclePaint.setColor(Color.BLACK);
innerCirclePaint.setColor(Color.BLUE);
innerCirclePaint.setAntiAlias(true);//抗锯齿
}
if (linePaint == null) {
linePaint = new Paint();
linePaint.setStyle(Paint.Style.STROKE);
linePaint.setStrokeWidth(2);
linePaint.setColor(0xff1d8ffe);
linePaint.setAntiAlias(true);
}
if (arrowPaint == null) {
arrowPaint = new Paint();
arrowPaint.setStyle(Paint.Style.FILL_AND_STROKE);
arrowPaint.setColor(Color.BLUE);
arrowPaint.setStrokeWidth(2);
arrowPaint.setAntiAlias(true);
}
if (textPaint == null) {
textPaint = new Paint();
textPaint.setStyle(Paint.Style.STROKE);
textPaint.setColor(Color.BLACK);
textPaint.setTextSize(12);
textPaint.setStrokeWidth(1);
textPaint.setAntiAlias(true);
}
if (textPaint2 == null) {
textPaint2 = new Paint();
textPaint2.setStyle(Paint.Style.STROKE);
textPaint2.setColor(Color.CYAN);
textPaint2.setTextSize(18);
textPaint2.setStrokeWidth(1);
textPaint2.setAntiAlias(true);
}
}

/**
* 根据shortageAngle来调整圆弧的角度
*/
private void initAngle() {
sweepAngle = 360 - shortageAngle;
startAngle = 90 + shortageAngle / 2;
endAngle = 90 - shortageAngle / 2;
}
}

调用代码：

dashboardView = (DashboardView) findViewById(R.id.dashboardView);
btn_next = (Button) findViewById(R.id.btn_next);
dashboardView.setStartingValue(0);
dashboardView.setEndValue(10);
dashboardView.setTextCount(5);
dashboardView.invalidate();
btn_next.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//随机
new Handler().post(new Runnable() {
@Override
public void run() {
d = Math.random() * 10;
dashboardView.setArrowData(d);
dashboardView.invalidate();
}
});
}

});