Android自定义控件-体温走势图(温度计+曲线+列表)详细分解.docVIP

Android 自定义控件-体温走势图 声明：本文只介绍开发思路，并不提供完整的源代码，若说的有不对之处，还请各位看官见谅！ 本人菜鸟一枚，以前一直做c#的WinForm、WPF的前端开发，近来随着公司业务发展需要开始慢慢接触android，最近在做一个项目需要使用一些图表控件，刚开开始在网上找了几个开源图库，虽然功能很强大，但并能完全满足开发需求。故开始尝试自定义控件的不归之路 一、图表需求 1）曲线图要求 不同温度值，用不同颜色区分，如：正常为绿色、发烧为橙色、高烧为红色； 自适应屏幕分页展示； 根据需要动态控制是否标志最高温； 2）列表展示要求 1、类似余额宝收益效果图 效果展示 温度计+曲线走势图（一） 温度计+曲线走势图（二） 曲线走势图-分页展示（分页中） 曲线走势图（最后一页） 列表展示图 设计思路 体温计 体温计主要分为两部分，即： 上半部：矩形+刻度线，用于展示温度数值 下半部：圆形 使用技术，canvas里的 drawRect、drawLine、drawText 设计思路： 1、温度数据展示部分，首先画一个实心矩形（高度满屏），来作为背景色，第二步： 再画一个矩形来标注温度值（高度根据温度值动态计算），第三步绘制刻度线及刻度值。 注：颜色效果，根据温度值的不同来设置画笔颜色即可。 底部圆形，可通过画圆或直接使用图片。 列表展示 这个简单，只需用到一个空心矩形（外），加一个实心矩形（内）即可。 设计思路同上，就不展开了。 体温曲线 需要用的相关的知识： 1）几何数学 X/Y二维坐标系。 相似三角形计算。 Canvas 1、drawCirclet，通过画实心圆来标记点。 drawPath,来完成复杂图形的绘制(如梯形、三角形等) drawLine、drawText; 设计思路： 1、Y轴，用于标注刻度线，及刻度值（需数学计算） 2、X轴，用于标注各个时间点（根据队列顺序依次绘制即可） 3、分页效果，通过改变数据源的方式来实现。 注意事项： 1、自适应屏幕，动态变化最大显示的数据量（即显示数据点的最大值）； 四、相关源码 获取屏幕分辨率，并计算图表显示的最大点数。 //获取屏幕分辨率 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); AppInstance.windowsWith = dm.widthPixels; /** * 计算文字长度 * */ private static float measureTextLength(String text) { Paint paintLine = new Paint(); paintLine.setAntiAlias(true); paintLine.setColor(Color.parseColor(#333333)); paintLine.setTextSize(20); paintLine.setStrokeWidth(3f); return paintLine.measureText(text); } /** * 图表显示的最多点数 * */ public static int getChartLineMaxPointCount() { float linetextLength = measureTextLength(15:45:34) + 5; float marginleft = measureTextLength(41 + ℃) + 15; float marginRight = 50 + 45 / 2; return (int)((AppInstance.windowsWith - marginleft - marginRight) / linetextLength); } /** * 获取温度参考值 * @return 1:正常 2：发烧 3：高烧 * */ public static int getTemperatureLevel(float value) { int level = 1; if (value 37.3 value = 38) {