1、需求
这次要实现一个显示温湿度的view.开始打算用两个仪表盘来显示.原因是这个已经有很多轮子了(偷懒ing)。后来一想，已经有那么多轮子了，还是自己写一个吧，顺便复习一下自定义view的相关用法。
2、效果
最后实现的效果就是这个样子了。
效果图
3、实现前的分析和思路
想要用同一个控件同事显示两个进度值，这里用指针就指向数值就不太合适了，还是用两个嵌套在一起的仪表盘比较好。那么要先做什么，再做什么呢？我从两个仪表盘开始，从仪表盘向两边辐射去画图。
- 1、画内部温度的仪表盘；
- 2、画温度里边的刻度数值；
- 3、画外部湿度的仪表盘；
- 4、这里要在湿度仪表盘的左右两边画一个小圆，这样边上才不会是平的；
- 5、画仪表盘上的小圆形代表当前值
- 6、画湿度仪表盘外边的刻度值
- 7、画底部的描述
思路分析到这里，然后去动手一步一步实现吧。
4、实现
4.1 提前装备
这里初始化一些变量，以及画笔颜色等等
**
* 控件宽
*/
private int mWidth;
/**
* 控件高
*/
private int mHeight;
private String mTempTitle = "温度(℃)";
private String mHumTitle = "湿度(%)";
/**
* 刻度高 短针
*/
private int mScaleHeight = dp2px(10);
/**
* 刻度高 长针
*/
private int mScaleHeight1 = dp2px(15);
/**
* 刻度盘/
*/
private Paint mDialPaint;
/**
* 文本画笔
*/
private Paint mTitlePaint;
/**
* 画湿度圆环的画笔
*/
private Paint mHumCirclePaint;
/**
* 当前湿度值的小圆点
*/
private Paint mHumValueCirclePaint;
/**
* 湿度圆环左边和右边的小圆点画笔
*/
private Paint mHumLeftCirclePaint;
private Paint mHumRightCirclePaint;
/**
* 当前温度
*/
private int mTemperature = 15;
//
/**
* 最低温度
*/
private int mMinTemp = -30;
/**
* 最高温度
*/
private int mMaxTemp = 50;
/**
* 当前湿度
*/
private int mHumidity = 100;
/**
* 最低湿度
*/
private int mMinHum = 0;
/**
* 最高湿度
*/
private int mMaxHum = 100;
/**
* 温度每份的角度
*/
private float mAngleOneTem = (float) 270 / (mMaxTemp - mMinTemp);
/**
* 湿度每份的角度
*/
private float mAngleOneHum = (float) 270 / (mMaxHum - mMinHum);
/**
* 温度，刻度的半径
*/
private int mTemDialRadius;
/**
* 湿度，内圈半径
*/
private int mHumInSideRadius;
/**
* 湿度，圆环宽度
*/
private int mHumCriWidth = dp2px(15);
/**
* 刻度和文字颜色
*/
private String mTextColor = "#666666";
/**
* 未达到的温度
*/
private String mDialBackGroundColor = "#666666";
/**
* 已经达到的温度
*/
private String mDialForegroundColor = "#1FC8A2";
/**
* 湿度圆环背景色
*/
private String mHumCriBackground = "#666666";
/**
* 湿度圆环前景色
*/
private String mHumCriForeground = "#1FC8A2";
/**
* 当前湿度的小圆点颜色
*/
private String mHumCriValue = "#eeeeee";
/**
* 当前湿度的小圆点的背景色
*/
private String mHumCriValueBackGround = "#30333333";
......
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 控件宽、高
mWidth = mHeight = Math.min(h, w);
// 温度，刻度的半径
mTemDialRadius = mWidth / 2 - dp2px(70);
// 湿度，内圈半径=刻度的内圈+最长刻度+15像素
mHumInSideRadius = mTemDialRadius + mScaleHeight1 + dp2px(15);
}
......
4.2 要去画了
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画温度刻度盘和内的刻度
drawTempDial(canvas);
//画湿度圆弧
drawHumArc(canvas);
//画左边和左边的小圆点
drwaHumArcLeftAndRight(canvas);
//当前湿度值
drawHumValueArc(canvas);
//湿度外边的刻度
drawHumText(canvas);
//画温湿度标题文字
drawTemText(canvas);
}
4.3 画温度刻度盘和圈内文字
这里去遍历一次就好了，有些人先遍历去画底部的背景，然后又遍历画前景，又遍历一次画刻度。这就造成了资源的浪费。
/**
* 画温度刻度 和温度内圈文字
*/
private void drawTempDial(Canvas canvas) {
canvas.save();
canvas.translate(getWidth() / 2, getHeight() / 2);
// 顺时针旋转135度
canvas.rotate(-135);
for (int i = mMinTemp; i <= mMaxTemp; i++) {
if (i <= mTemperature) {
mDialPaint.setColor(Color.parseColor(mDialForegroundColor));
} else {
mDialPaint.setColor(Color.parseColor(mDialBackGroundColor));
}
if (i % 5 == 0) {
//从刻度的内圈开始，往外画
canvas.drawLine(0, -mTemDialRadius, 0, -mTemDialRadius - mScaleHeight1, mDialPaint);
if (i % 10 == 0) {
float tempWidth = mDialPaint.measureText(i + "");
canvas.drawText(i + "", 0 - tempWidth / 2, -mTemDialRadius + dp2px(20), mTitlePaint);
}
} else {
canvas.drawLine(0, -mTemDialRadius, 0, -mTemDialRadius - mScaleHeight, mDialPaint);
}
canvas.rotate(mAngleOneTem);
}
canvas.restore();
}
4.4 画外围湿度，代表当前值的小圆点
这里呢，想去画一个阴影的背景，半径比前边的大一点点，然后在画一个前边的小白圆圈。这样有一点小阴影更漂亮。
/**
* 画当前湿度值的小圆点
*/
private void drawHumValueArc(Canvas canvas) {
canvas.save();
canvas.translate(getWidth() / 2, getHeight() / 2);
//旋转到0，再旋转到当前湿度值
canvas.rotate(-135 + mAngleOneHum * mHumidity);
//画背景
mHumValueCirclePaint.setColor(Color.parseColor(mHumCriValueBackGround));
canvas.drawCircle(0, -mHumInSideRadius, (mHumCriWidth + dp2px(10)) / 2, mHumValueCirclePaint);
//画前景
mHumValueCirclePaint.setColor(Color.parseColor(mHumCriValue));
canvas.drawCircle(0, -mHumInSideRadius, (mHumCriWidth + dp2px(7)) / 2, mHumValueCirclePaint);
canvas.restore();
}
4.5 画外围湿度，左边和右边的小圆点
先看看没有小圆点的效果
test
这样两边是平的，没有突出的效果，比较丑。在两边都画一个和圆环宽度一样宽的小圆圈，就有了突出的效果了。
/**
* 左边右边分别画一个小圆点
*
* @param canvas
*/
private void drwaHumArcLeftAndRight(Canvas canvas) {
canvas.save();
canvas.translate(getWidth() / 2, getHeight() / 2);
//旋转到0
canvas.rotate(-135);
canvas.drawCircle(0, -mHumInSideRadius, mHumCriWidth / 2, mHumLeftCirclePaint);
canvas.rotate(270);
canvas.drawCircle(0, -mHumInSideRadius, mHumCriWidth / 2, mHumRightCirclePaint);
canvas.restore();
}
后边的方法就不一一罗列出来了，可以去看一下源码。
传送门
