Android自定义控件-体温走势图(温度计+曲线+列表).docxVIP

AndrOid自定义控件-体温走势图 声明：本文只介绍开发思路，并不提供完整的源代码，若说的有不对之处，还请各位看 官见谅！ 本人菜鸟一枚，以前一直做 c#的WinForm、WPF的前端开发，近来随着公司业务发展 需要开始慢慢接触 an droid ,最近在做一个项目需要使用一些图表控件，刚开开始在网上找 了几个开源图库，虽然功能很强大，但并能完全满足开发需求。故开始尝试自定义控件的不 归之路 一、图表需求 1） 曲线图要求 1、 不同温度值，用不同颜色区分，如：正常为绿色、发烧为橙色、高烧为红色； 2、 自适应屏幕分页展示； 3、 根据需要动态控制是否标志最高温； 2） 列表展示要求 1、类似余额宝收益效果图 、效果展示 温度计+曲线走势图（一） 温度计+曲线走势图（二） 曲线走势图-分页展示（分页中） 1肿锻秽姊饕艸啼 FhL S ∏∕2 babe * 遠叼竽 H JilI ■ 15:22 最高温度37.4? 曲线走势图（最后一页） 列表展示图 三、设计思路 1）体温计 体温计主要分为两部分，即： 1、 上半部：矩形+刻度线，用于展示温度数值 2、 下半部：圆形 使用技术， CanVaS里的 drawRect、drawLine、drawText 设计思路： 1、温度数据展示部分，首先画一个实心矩形（高度满屏） ，来作为背景色，第二步: 再画一个矩形来标注温度值（高度根据温度值动态计算），第三步绘制刻度线及刻度值。 注：颜色效果，根据温度值的不同来设置画笔颜色即可。 2、底部圆形，可通过画圆或直接使用图片。 2） 列表展示 这个简单，只需用到一个空心矩形（外） ，加一个实心矩形（内）即可。 设计思路同上，就不展开了。 3） 体温曲线 需要用的相关的知识： 1）几何数学 1、 X/Y二维坐标系。 2、 相似三角形计算。 2） CanVaS 1、 drawCirclet ,通过画实心圆来标记点。 2、 drawPath,来完成复杂图形的绘制（如梯形、三角形等） 3、 drawLine、drawText; 设计思路： 1、 Y轴，用于标注刻度线，及刻度值（需数学计算）一I 2、 X轴，用于标注各个时间点（根据队列顺序依次绘制即可） 3、 分页效果，通过改变数据源的方式来实现。 注意事项： 1、自适应屏幕，动态变化最大显示的数据量（即显示数据点的最大值） 四、相关源码丨 1、获取屏幕分辨率，并计算图表显示的最大点数。 //获取屏幕分辨率 DiSPIayMetriCS dm = new DiSPIayMetriCS(); getWi ndowMa nager().getDefaultDisplay().getMetrics(dm); APP In Sta nce.WindowsWith = dm. WidthPiXeIS APP In Sta nce. /** 计算文字长度 */ float measureTextLe ngth(Stri ng text)PriVate StatiC float measureTextLe ngth(Stri ng text) new Pain t();true );ParseColor (#333333)); new Pain t(); true ); ParseColor (#333333)); Paint PaintLine = Pai ntLi ne.setA ntiAlias( PaintLin e.setColor(Color. PaintLin e.setTextSize(20); Pai ntLi ne.setStrokeWidth(3f); retur n PaintLin e.measureText(text); /** 图表显示的最多点数 */ PUbIiC StatiC int getChartLineMaxPointCoUnt() + + 5; float Iin etextLe ngth = measureTextLe ngth (15:45:34) float marginleft = measureTextLe ngth (41 + °C) + 15; float margi nRight = 50 + 45 / 2; return ( int )((APPInStance. WindowsWith - marginleft - margi nRight) / li netextLe ngth); } /** 获取温度参考值 @return 1:正常2 :发烧3 :高烧 */ PUbIiC StatiC int getTemperatureLevel( float VaIUe) { int level = 1; if (VaIUe 37.3 value V=