搜索
Android自定义控件-体温走势图声明：本文只介绍开发思路，并不提供完整的源代码，若说的有不对之处，还请各位看官见谅！本人菜鸟一枚，以前一直做c#的WinForm、WPF的前端开发，近来随着公司业务发展需要开始慢慢接触android，最近在做一个项目需要使用一些图表控件，刚开开始在网上找了几个开源图库，虽然功能很强大，但并能完全满足开发需求。故开始尝试自定义控件的不归之路一、图表需求1）曲线图要求1、不同温度值，用不同颜色区分，如：正常为绿色、发烧为橙色、高烧为红色；2、自适应屏幕分页展示；3、根据需要动态控制是否标志最高温；2）列表展示要求1、类似余额宝收益效果图二、效果展示温度计+曲线走势图（一）温度计+曲线走势图（二）曲线走势图-分页展示（分页中）曲线走势图（最后一页）列表展示图三、设计思路1）体温计体温计主要分为两部分，即：1、上半部：矩形+刻度线，用于展示温度数值2、下半部：圆形使用技术，canvas里的drawRect、drawLine、drawText设计思路：1、温度数据展示部分，首先画一个实心矩形（高度满屏），来作为背景色，第二步：再画一个矩形来标注温度值（高度根据温度值动态计算），第三步绘制刻度线及刻度值。注：颜色效果，根据温度值的不同来设置画笔颜色即可。2、底部圆形，可通过画圆或直接使用图片。2）列表展示这个简单，只需用到一个空心矩形（外），加一个实心矩形（内）即可。设计思路同上，就不展开了。3）体温曲线需要用的相关的知识：1）几何数学1、X/Y二维坐标系。2、相似三角形计算。2）Canvas1、drawCirclet，通过画实心圆来标记点。2、drawPath,来完成复杂图形的绘制(如梯形、三角形等)3、drawLine、drawText;设计思路：1、Y轴，用于标注刻度线，及刻度值（需数学计算）2、X轴，用于标注各个时间点（根据队列顺序依次绘制即可）3、分页效果，通过改变数据源的方式来实现。注意事项：1、自适应屏幕，动态变化最大显示的数据量（即显示数据点的最大值）；四、相关源码1、获取屏幕分辨率，并计算图表显示的最大点数。//获取屏幕分辨率DisplayMetricsdm=newDisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);AppInstance.windowsWith=dm.widthPixels;/***计算文字长度**/privatestaticfloatmeasureTextLength(Stringtext){PaintpaintLine=newPaint();paintLine.setAntiAlias(true);paintLine.setColor(Color.parseColor(#333333));paintLine.setTextSize(20);paintLine.setStrokeWidth(3f);returnpaintLine.measureText(text);}/***图表显示的最多点数**/publicstaticintgetChartLineMaxPointCount(){floatlinetextLength=measureTextLength(15:45:34)+5;floatmarginleft=measureTextLength(41+℃)+15;floatmarginRight=50+45/2;return(int)((AppInstance.windowsWith-marginleft-marginRight)/linetextLength);}/***获取温度参考值*@return1:正常2：发烧3：高烧**/publicstaticintgetTemperatureLevel(floatvalue){intlevel=1;if(value37.3&&value=38){level=2;}elseif(value38){level=3;}else{level=1;}returnlevel;}2、温度计实现importcc.ewell.irdc.thermometer.tools.Tools;importandroid.content.Context;importandroid.graphics.Canvas;importandroid.graphics.Color;importandroid.graphics.Paint;importandroid.util.AttributeSet;importandroid.view.View;publicclassThermometerViewextendsView{//体温值privatefloattempture=35f;//正常值privatePaintpaintNormal;//发烧privatePaintpatintFever;//高烧privatePaintpatintWarn;//无值privatePaintpaintHasNoValue;//刻度privatePaintpaintLine;privateintcount=10;privatevoidintalPaint(){paintNormal=newPaint();paintNormal.setColor(Color.parseColor(#8BC846));patintFever=newPaint();patintFever.setColor(Color.parseColor(#FF7A32));patintWarn=newPaint();patintWarn.setColor(Color.parseColor(#FF3A3A));paintHasNoValue=newPaint();paintHasNoValue.setColor(Color.rgb(180,184,192));paintLine=newPaint();paintLine.setColor(Color.rgb(118,123,126));}/***设置温度值颜色**/publicvoidSetColorHasValue(intcolor){paintNormal.setColor(color);}/***设置无温度值颜色**/publicvoidSetColorHasNoValue(intcolor){paintHasNoValue.setColor(color);}/***设置刻度线颜色**/publicvoidSetLineValue(intcolor){paintLine.setColor(color);}/**settheThermometervalue**/publicvoidsetValue(floatvalue){this.tempture=value;this.invalidate();}publicvoidsetShowCount(intcount){if(count5){count=5;}this.count=count;}/***获取当前温度计上显示的温度**/publicfloatgetCurrentTemperature(){returnthis.tempture;}publicThermometerView(Contextcontext){super(context);//TODOAuto-generatedconstructorstubintalPaint();}publicThermometerView(Contextcontext,AttributeSetattrs){super(context,attrs);//TODOAuto-generatedconstructorstubintalPaint();}publicThermometerView(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);//TODOAuto-generatedconstructorstubintalPaint();}@OverrideprotectedvoidonDraw(Canvascanvas){//TODOAuto-generatedmethodstubsuper.onDraw(canvas);intmaxWith=this.getWidth();intmaxHeight=this.getHeight();intlineHeight=(int)(maxHeight*1.0/count);introwHeight=(int)(lineHeight*1.0/10);intbottom=maxHeight;intstarty=maxHeight-lineHeight;inttop=lineHeight*2;intleft=(int)((maxWith-40)*1.0/2);intright=left+40;intlevel=Tools.getTemperatureLevel(tempture);Paintpaint=level==1?paintNormal:level==2?patintFever:patintWarn;inty=starty-(int)((tempture-35)*lineHeight);canvas.drawRect(left,top,right,bottom,paintHasNoValue);canvas.drawRect(left,y,right,bottom,paint);intydegree=starty;inttem=35;while(ydegreetop){canvas.drawLine(right+5,ydegree,right+25,ydegree,paintLine);if(ydegree%lineHeight==0){canvas.drawLine(right+5,ydegree,right+45,ydegree,paintLine);canvas.drawText(tem+,right+42,ydegree+4,paintLine);tem++;}ydegree=ydegree-rowHeight;}}}3、列表控件importandroid.graphics.RectF;importcc.ewell.irdc.thermometer.tools.Tools;importjava.util.ArrayList;importjava.util.List;importandroid.graphics.Canvas;importcc.ewell.irdc.thermometer.model.bean.TemperatureInfo;importandroid.graphics.Color;importandroid.graphics.Paint;importandroid.annotation.SuppressLint;importandroid.content.Context;importandroid.util.AttributeSet;importandroid.view.View;publicclassTemperatureListChartextendsView{/***数据**/privateTemperatureInfotem;/***正常数据线条颜色**/privatePaintpaintNormalLine;publicTemperatureInfogetTem(){returntem;}publicvoidsetTem(TemperatureInfotem){this.tem=tem;this.invalidate();}/***正常数据背景颜色**/privatePaintpaintNormalBack;/***发烧数据线条颜色**/privatePaintpai