Dashboard View
自定义仪表盘
写的第一篇博客，代码有点乱，单元测试的包名都忘了修改。附上效果图dashboard_view.png。
自定义view, 简单一些的可以直接继承ViewGroup(LinearLayout, RelativeLayout等)，根据xml布局来简单实现一些控件组合或者一些view属性修改。如果设计的时候是一些复杂的，还带一些特殊效果的，一般继承View，然后重写onDraw()和onMeasure()方法。
其中onDraw()主要用来控制画布显示，onMeasure()控制显示区域，上下左右边距等
我这次这个view有一个大的和一个小的仪表，一个显示车速 油量百分比，一个显示温度和转速。view基本一样，所以可以先画一个，第二个在根据画好的调整一下大小即可。
其实通过画布来自定义view，主要分两步：1. 分层，将需要实现的效果拆分，先画最底层的圆或者效果，在继续往上，由外网内一步步画；2. 特殊效果，先自己预言，写个简单demo，再复写进来，省的代码太乱，不耐看。
像现在这个仪表盘，由外往内依次如下：
最外层的油耗百分比 ----> 往内一层的渐变白色圆弧 ----> 两个外圆边框 ----> 刻度盘 ----> 圆弧渐变效果 ----> 文字刻盘 ---->间隔圆 ----> 实心圆弧 ----> 值和单位圆
但是我在实现的时候，刻度盘放在两个外圆边框前画了，这样的好处是就刻盘在圆弧下面，即使计算有一点点偏差，也不会影响效果。
在画之前，首先要确定圆心点x和y，在这基础上再继续扩散。画的过程中，有下面几点一起分享下，其他的通过paint画圆和文字，圆弧随便百度，都会。
1. 圆弧渐变效果,在view的outsideCircleGradinent()中：
通过SweepGradient实现，主要是颜色的渐变，然后通过Paint.setShader()设置shader。
但是注意，画完记得将paint的shader重置为null，不然接下来你的其他view也还会有渐变效果。。。
2. 根据圆的圆心坐标和圆弧度数计算出圆弧上的坐标点，在view的getCoordinatePoint()方法：
哈哈，看方法之前，请先回忆下上学学过的三角函数，sin、cos等，是不是都还给老师了。
其实这个方法，主要就是根据圆心，角度组成一个直角三角型，根据sin，cos和半径，得到圆弧的点，具体见方法；
3. 画刻盘线条和数字
刻盘线条（在代码drawPonitValue1()方法）：这个其实就是用第2点的方法，得到圆弧上的坐标x和y，然后根据R减去想画的刻盘长度得到一个新的半径，在根据第二点的方法得到一个新的圆弧坐标x1和y1，然后画一条直线canvas.drawLine(x,y,x1,y1,mPaint);
画数字（在代码drawPonitValue()方法）：其实原理类似，只是要判断下角度，设置下Paint的文字居左居右属性即可，这个需要在自己绘画中稍微细调一下。
其他的细节个人感觉，按分层一步步画即可，主要还是一些基本的图形组合，画圆，圆弧，直线，文字，图片，把基本的按照拆分的画在对应的位子，图形自然就出来了。不过话虽如此，实现起来还是很头疼的，哈哈，始终坚信，只要相信自己，问题就有解决的一天，虽然过程很痛苦，但解决完的那份喜悦，相信我们程序猿都能懂得。。。
再此特别感谢luoxiaoke和woxingxiao两位大神，借鉴了两位很多代码方法，万分感谢。我的第一篇博客，欢迎大家下载，有问题也欢迎大家能够多沟通，代码写的不好，大家见谅，也欢迎大家纠正其中不足和错误，谢谢。
网友评论