温度监控器

Android 打造温度监控器

                                                                                                  2016/9/913:01:34 

1概述

最近看到一个别人做的效果觉得很不错，自己尝试做了下，秉着不重复造轮子的原则，简单看了下别人的代码,完全继承自View，来打造我们自己的温度监控器。

说了那么多废话。来来来，先看下效果图

2效果图

1先看下运行效果

2接下来来张截图看下

3思路

通过观察效果图我们知道有以下几个部分需要绘制

1. 整个背景京图（可有可无）
2. 进度弧(3段，绿黄红)
3. 进度弧上的文字(正常，警告，预警)
4. 刻度弧
5. 刻度
6. 中间的原
7. 指针
8. 当前温度

3.1自定义属性

values/attrs.xml

3.2获取我们的定义属性

接下来就是自定义控件的老套路了

1测量onMeasure

2**各位看官，现在到我们的重点戏了，绘制我们的图形，别急，别急，一步步来（由于是自定义view我们也就没必要去重写onLayout了）**

绘制开始

1绘制背景圆

2绘制进度弧

整个进度弧是从150度的位置开始到30度为止，也就是说整个进度弧所占的角度为240度。将它分为40份（也就是最高40度的意思），所以刚好每份是6度。我们用path存储我们的弧形，是为了后面方便在弧线上绘制文字

3绘制进度弧上的文字

因为要保证绘制的文字在弧形的中央，我们需要控制的就是drawTextOnPath(text,xoffset,Yoffset,paint)xoffset，Yoffset的值，Yoffset很简单我们直接取弧形宽度的一半则可(根据情况，自己调整)，xoffset的值经过测试发现当我取值是0的时候他在弧形的最左端，取弧形长的时候是在最又端，根据我们的要求我们取弧形长的一半则可(根据情况，自己调整)

4绘制刻度弧

首先绘制的内圈的刻度弧，没什么好说的，接下来就是绘制我们的刻度了，我们总共需要绘制40条刻度，占据240度角，我们在绘制刻度时要判断是否5的倍数，是5的倍数我们绘制长刻度和文字

先贴一张图接下来在分析，图片比较丑，凑合着看吧。

根据图和我们的效果图,我们可以看成是绘制是有两个部分的（左边，又边）
在我们绘制刻度的时候有一个点需要我们把握当恰好在左边和右边临界点的时候，首先需要旋转我们所不需要的刻度范围，接下来我们需要单独绘制一个零刻度，0刻度在我们的循环中是没有算进去的，当我们绘制文字时也要按照左边和右边进行区分，看绘制的文字是多少

5绘制中间的圆

不要急，不要级，马上就结束了，容我慢慢道来

6绘制指针

绘制指针就比较简单了，首先绘制了指针的中间圆圈，重点就是Path的moveTo,lineTo相关方法的应用，为了让指针可以动，我们只需要在不同的角度进行绘制即可

      currentTemp当前的温度，*6.0f是因为我们总共绘制了240度，40个刻度，每个刻度也就是6度了      float angle = currentTemp * 6.0f;      canvas.rotate(angle, 0, 0);

我们现在已经完成了View的绘制了，其实自定义view我自认为就是要多练习

4总结

如果我们想要我们的自定义view可以动，我认为可以不断的改变我们的画布的角度和焦点，我们不妨可以想下，我们在绘制表盘的时候我们的绘制参数并没有改变，改变的只是我们画布的角度，试想下如果我们绘制的表盘只需要绘制1个，然后在不同的角度绘制，是不是其实就是我们运动的效果了

改变画布的角度canvas.rotate(角度)达到运动的状态，主要是针对这些不是规则的图形，如表盘。

对于那种规则的图形如，中间一个按钮进行抽奖，外部环绕一个正方形的奖品框，点击抽奖，上面一个矩形就在我们的奖品框里面运动，可以用改变焦点的中心点的方式canvas.translate(x,y)来达到运动效果，想下，是不是可以

最后了就是祝大家周末愉快。哈哈哈哈。第一次写文章，有写的不好的欢迎大家指出。

# 源码点击下载 #