赞
踩
在app监测系统中,经常要查看监测曲线,那么曲线怎么生成呢?可以用Android自带的graphics来实现这个功能。今天这个例程,先简化一下功能,从txt读取数据,来模拟从服务器上读取数据。txt文件里的数据是y值,x值为时间,间隔一致。生成的图如图1所示,曲线图中包含了x、y坐标轴,x、y轴物理量标签、箭头和分格值,以及y随时间的曲线。下边来进行介绍具体的操作步骤。
目录
- <?xml version="1.0" encoding="utf-8"?>
- <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
-
- tools:context="com.example.mydrawline.DrawActivity">
-
- <LinearLayout
-
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_marginTop="20dp"
- android:layout_marginBottom="200dp"
- android:layout_marginLeft="10dp"
- android:layout_marginRight="10dp"
- android:orientation="vertical"
- android:gravity="center"
- tools:ignore="MissingConstraints">
- <TextView
- android:id="@+id/title"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
-
- android:layout_marginTop="10dp"
- app:layout_constraintBottom_toBottomOf="parent"
- android:gravity="center"
- android:textColor="@color/colorPrimaryDark"
- android:textSize="30dp"
- android:text="监测分析曲线"
-
- />
-
- <com.example.mydrawline.LineView
- android:id="@+id/line"
- android:padding="2dp"
- android:layout_marginTop="10dp"
- android:background="@color/gray"
- android:src="@drawable/background"
- android:layout_width="match_parent"
- android:layout_height="60dp"
- android:layout_weight="0.6"
- tools:ignore="MissingConstraints" />
-
- </LinearLayout>
-
- </androidx.constraintlayout.widget.ConstraintLayout>
这是曲线的背景设置。
- <?xml version="1.0" encoding="UTF-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <stroke
- android:width="2dp"
- android:color="@color/gray"
- android:shape="rectangle"
- android:bottom="1dp"
- android:left="1dp"
- android:right="1dp"
- android:top="1dp"
- />
-
- </shape>
定义的颜色变量。
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <color name="splitLine">#e9e9e9</color>
- <color name="navigationBarColor">#aaaaaa</color>
- <color name="navigationPressed">#dddddd</color>
- <color name="colorPrimary">#008577</color>
- <color name="devicename">#A9A9A9</color> <!--暗灰色 -->
- <color name="colorPrimaryDark">#00574B</color>
- <color name="colorAccent">#D81B60</color>
- <color name="white">#FFFFFF</color> <!--白色 -->
- <color name="ivory">#FFFFF0</color> <!--象牙色 -->
- <color name="lightyellow">#FFFFE0</color> <!--亮黄色 -->
- <color name="yellow">#FFFF00</color> <!--黄色 -->
- <color name="snow">#FFFAFA</color> <!--雪白色 -->
- <color name="floralwhite">#FFFAF0</color> <!--花白色 -->
- <color name="lemonchiffon">#FFFACD</color> <!--柠檬绸色 -->
- <color name="cornsilk">#FFF8DC</color> <!--米绸色 -->
- <color name="seashell">#FFF5EE</color> <!--海贝色 -->
- <color name="lavenderblush">#FFF0F5</color> <!--淡紫红 -->
- <color name="papayawhip">#FFEFD5</color> <!--番木色 -->
- <color name="blanchedalmond">#FFEBCD</color> <!--白杏色 -->
- <color name="mistyrose">#FFE4E1</color> <!--浅玫瑰色 -->
- <color name="bisque">#FFE4C4</color> <!--桔黄色 -->
- <color name="moccasin">#FFE4B5</color> <!--鹿皮色 -->
- <color name="navajowhite">#FFDEAD</color> <!--纳瓦白 -->
- <color name="peachpuff">#FFDAB9</color> <!--桃色 -->
- <color name="gold">#FFD700</color> <!--金色 -->
- <color name="pink">#FFC0CB</color> <!--粉红色 -->
- <color name="lightpink">#FFB6C1</color> <!--亮粉红色 -->
- <color name="orange">#FFA500</color> <!--橙色 -->
- <color name="lightsalmon">#FFA07A</color> <!--亮肉色 -->
- <color name="darkorange">#FF8C00</color> <!--暗桔黄色 -->
- <color name="coral">#FF7F50</color> <!--珊瑚色 -->
- <color name="hotpink">#FF69B4</color> <!--热粉红色 -->
- <color name="tomato">#FF6347</color> <!--西红柿色 -->
- <color name="orangered">#FF4500</color> <!--红橙色 -->
- <color name="deeppink">#FF1493</color> <!--深粉红色 -->
- <color name="fuchsia">#FF00FF</color> <!--紫红色 -->
- <color name="magenta">#FF00FF</color> <!--红紫色 -->
- <color name="red">#FF0000</color> <!--红色 -->
- <color name="oldlace">#FDF5E6</color> <!--老花色 -->
- <color name="lightgoldenrodyellow">#FAFAD2</color> <!--亮金黄色 -->
- <color name="linen">#FAF0E6</color> <!--亚麻色 -->
- <color name="antiquewhite">#FAEBD7</color> <!--古董白 -->
- <color name="salmon">#FA8072</color> <!--鲜肉色 -->
- <color name="ghostwhite">#F8F8FF</color> <!--幽灵白 -->
- <color name="mintcream">#F5FFFA</color> <!--薄荷色 -->
- <color name="whitesmoke">#F5F5F5</color> <!--烟白色 -->
- <color name="beige">#F5F5DC</color> <!--米色 -->
- <color name="wheat">#F5DEB3</color> <!--浅黄色 -->
- <color name="sandybrown">#F4A460</color> <!--沙褐色 -->
- <color name="azure">#F0FFFF</color> <!--天蓝色 -->
- <color name="honeydew">#F0FFF0</color> <!--蜜色 -->
- <color name="aliceblue">#F0F8FF</color> <!--艾利斯兰 -->
- <color name="khaki">#F0E68C</color> <!--黄褐色 -->
- <color name="lightcoral">#F08080</color> <!--亮珊瑚色 -->
- <color name="palegoldenrod">#EEE8AA</color> <!--苍麒麟色 -->
- <color name="violet">#EE82EE</color> <!--紫罗兰色 -->
- <color name="darksalmon">#E9967A</color> <!--暗肉色 -->
- <color name="lavender">#E6E6FA</color> <!--淡紫色 -->
- <color name="lightcyan">#E0FFFF</color> <!--亮青色 -->
- <color name="burlywood">#DEB887</color> <!--实木色 -->
- <color name="plum">#DDA0DD</color> <!--洋李色 -->
- <color name="gainsboro">#DCDCDC</color> <!--淡灰色 -->
- <color name="crimson">#DC143C</color> <!--暗深红色 -->
- <color name="palevioletred">#DB7093</color> <!--苍紫罗兰色 -->
- <color name="goldenrod">#DAA520</color> <!--金麒麟色 -->
- <color name="orchid">#DA70D6</color> <!--淡紫色 -->
- <color name="thistle">#D8BFD8</color> <!--蓟色 -->
- <color name="lightgray">#D3D3D3</color> <!--亮灰色 -->
- <color name="lightgrey">#D3D3D3</color> <!--亮灰色 -->
- <color name="tan">#D2B48C</color> <!--茶色 -->
- <color name="chocolate">#D2691E</color> <!--巧可力色 -->
- <color name="peru">#CD853F</color> <!--秘鲁色 -->
- <color name="indianred">#CD5C5C</color> <!--印第安红 -->
- <color name="mediumvioletred">#C71585</color> <!--中紫罗兰色 -->
- <color name="silver">#C0C0C0</color> <!--银色 -->
- <color name="darkkhaki">#BDB76B</color> <!--暗黄褐色-->
- <color name="rosybrown">#BC8F8F</color> <!--褐玫瑰红 -->
- <color name="mediumorchid">#BA55D3</color> <!--中粉紫色 -->
- <color name="darkgoldenrod">#B8860B</color> <!--暗金黄色 -->
- <color name="firebrick">#B22222</color> <!--火砖色 -->
- <color name="powderblue">#B0E0E6</color> <!--粉蓝色 -->
- <color name="lightsteelblue">#B0C4DE</color> <!--亮钢兰色-->
- <color name="paleturquoise">#AFEEEE</color> <!--苍宝石绿 -->
- <color name="greenyellow">#ADFF2F</color> <!--黄绿色 -->
- <color name="lightblue">#ADD8E6</color> <!--亮蓝色 -->
- <color name="darkgray">#A9A9A9</color> <!--暗灰色 -->
- <color name="darkgrey">#A9A9A9</color> <!--暗灰色 -->
- <color name="brown">#A52A2A</color> <!--褐色 -->
- <color name="sienna">#A0522D</color> <!--赭色 -->
- <color name="darkorchid">#9932CC</color> <!--暗紫色 -->
- <color name="palegreen">#98FB98</color> <!--苍绿色 -->
- <color name="darkviolet">#9400D3</color> <!--暗紫罗兰色 -->
- <color name="mediumpurple">#9370DB</color> <!--中紫色 -->
- <color name="lightgreen">#90EE90</color> <!--亮绿色 -->
- <color name="darkseagreen">#8FBC8F</color> <!--暗海兰色 -->
- <color name="saddlebrown">#8B4513</color> <!--重褐色 -->
- <color name="darkmagenta">#8B008B</color> <!--暗洋红 -->
- <color name="darkred">#8B0000</color> <!--暗红色 -->
- <color name="blueviolet">#8A2BE2</color> <!--紫罗兰蓝色 -->
- <color name="lightskyblue">#87CEFA</color> <!--亮天蓝色 -->
- <color name="skyblue">#87CEEB</color> <!--天蓝色 -->
- <color name="gray">#808080</color> <!--灰色 -->
- <color name="grey">#808080</color> <!--灰色 -->
- <color name="olive">#808000</color> <!--橄榄色 -->
- <color name="purple">#800080</color> <!--紫色 -->
- <color name="maroon">#800000</color> <!--粟色 -->
- <color name="aquamarine">#7FFFD4</color> <!--碧绿色 -->
- <color name="chartreuse">#7FFF00</color> <!--黄绿色 -->
- <color name="lawngreen">#7CFC00</color> <!--草绿色 -->
- <color name="mediumslateblue">#7B68EE</color> <!--中暗蓝色 -->
- <color name="lightslategray">#778899</color> <!--亮蓝灰 -->
- <color name="lightslategrey">#778899</color> <!--亮蓝灰 -->
- <color name="slategray">#708090</color> <!--灰石色 -->
- <color name="slategrey">#708090</color> <!--灰石色 -->
- <color name="olivedrab">#6B8E23</color> <!--深绿褐色 -->
- <color name="slateblue">#6A5ACD</color> <!--石蓝色 -->
- <color name="dimgray">#696969</color> <!--暗灰色 -->
- <color name="dimgrey">#696969</color> <!--暗灰色 -->
- <color name="mediumaquamarine">#66CDAA</color> <!--中绿色 -->
- <color name="cornflowerblue">#6495ED</color> <!--菊兰色 -->
- <color name="cadetblue">#5F9EA0</color> <!--军兰色 -->
- <color name="darkolivegreen">#556B2F</color> <!--暗橄榄绿-->
- <color name="indigo">#4B0082</color> <!--靛青色 -->
- <color name="mediumturquoise">#48D1CC</color> <!--中绿宝石 -->
- <color name="darkslateblue">#483D8B</color> <!--暗灰蓝色 -->
- <color name="steelblue">#4682B4</color> <!--钢兰色 -->
- <color name="royalblue">#4169E1</color> <!--皇家蓝 -->
- <color name="turquoise">#40E0D0</color> <!--青绿色 -->
- <color name="mediumseagreen">#3CB371</color> <!--中海蓝 -->
- <color name="limegreen">#32CD32</color> <!--橙绿色 -->
- <color name="darkslategray">#2F4F4F</color> <!--暗瓦灰色 -->
- <color name="darkslategrey">#2F4F4F</color> <!--暗瓦灰色 -->
- <color name="seagreen">#2E8B57</color> <!--海绿色 -->
- <color name="forestgreen">#228B22</color> <!--森林绿 -->
- <color name="lightseagreen">#20B2AA</color> <!--亮海蓝色 -->
- <color name="dodgerblue">#1E90FF</color> <!--闪兰色 -->
- <color name="midnightblue">#191970</color> <!--中灰兰色 -->
- <color name="aqua">#00FFFF</color> <!--浅绿色 -->
- <color name="cyan">#00FFFF</color> <!--青色 -->
- <color name="springgreen">#00FF7F</color> <!--春绿色 -->
- <color name="lime">#00FF00</color> <!--酸橙色 -->
- <color name="mediumspringgreen">#00FA9A</color> <!--中春绿色 -->
- <color name="darkturquoise">#00CED1</color> <!--暗宝石绿 -->
- <color name="deepskyblue">#00BFFF</color> <!--深天蓝色 -->
- <color name="darkcyan">#008B8B</color> <!--暗青色 -->
- <color name="teal">#008080</color> <!--水鸭色 -->
- <color name="green">#008000</color> <!--绿色 -->
- <color name="darkgreen">#006400</color> <!--暗绿色 -->
- <color name="blue">#0000FF</color> <!--蓝色 -->
- <color name="mediumblue">#0000CD</color> <!--中兰色 -->
- <color name="darkblue">#00008B</color> <!--暗蓝色 -->
- <color name="navy">#000080</color> <!--海军色 -->
- <color name="black">#000000</color> <!--黑色 -->
-
-
-
- </resources>
这是y值数据,因为数据量较大,本例不在此处贴出,会在本人资源中上传,请需要者自取。亲们也可以用自己的数据来生成曲线。
- package com.example.mydrawline;
-
-
- import android.content.Context;
- import android.graphics.Canvas;
- import android.graphics.Color;
- import android.graphics.Paint;
- import android.graphics.PaintFlagsDrawFilter;
- import android.graphics.Path;
- import android.util.AttributeSet;
- import android.view.View;
-
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
-
-
- public class LineView extends View {
- private final static String X_KEY = "Xpos";
- private final static String Y_KEY = "Ypos";
- int t=120;
- int t2=167;
- int x0=150;
- int y0=500;
- int xp=1020;
- int yp1=100;
- int yp2=1000;
-
-
- private List<Map<String, Integer>> mListPoint = new ArrayList<Map<String, Integer>>();
-
- Paint mPaint = new Paint();
-
- public LineView(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- // TODO Auto-generated constructor stub
- }
-
- public LineView(Context context, AttributeSet attrs) {
- super(context, attrs);
- // TODO Auto-generated constructor stub
- }
-
- public LineView(Context context) {
- super(context);
- // TODO Auto-generated constructor stub
- }
-
- @Override
- protected void onDraw(Canvas canvas) {
- // TODO Auto-generated method stub
- super.onDraw(canvas);
-
-
- Paint p = new Paint();
- p.setStrokeWidth(2);
- p.setColor(Color.BLUE);// 设置红色
- p.setTextAlign(Paint.Align.CENTER);
- p.setTextSize(40);
-
- // 画x轴
- for(int i=0;i<6;i++) {
- canvas.drawText(Integer.toString(i), x0+i*t2, y0+40, p);
-
- }
- canvas.drawText("t/us", xp-40, y0-50, p);//非线性曲线x坐标项目
- canvas.drawText("U/mv", x0+60, yp1+50, p);//非线性曲线x坐标项目
- // 画y轴
- for(int i=0;i<10;i++) {
- canvas.drawText(String.valueOf((float)(i-5)/1000), x0-70, y0-(int)((1*(i-5))*90), p);
- }
-
-
- canvas.drawLine(x0, y0, xp, y0, p);// 画x轴线
- canvas.drawLine(x0, yp1, x0, yp2, p);// 画y轴线
-
- // 画x轴箭头
- Path path = new Path();
- path.moveTo(xp-30, y0+15);// 此点为多边形的起点
- path.lineTo(xp, y0);
- path.lineTo(xp-30, y0-15);
- path.close(); // 使这些点构成封闭的多边形
- canvas.drawPath(path, p);
-
- // 画y轴箭头
- Path path1 = new Path();
- path1.moveTo(x0+15, yp1);// 此点为多边形的起点
- path1.lineTo(x0-15, yp1);
- path1.lineTo(x0, yp1-30);
- path1.close(); // 使这些点构成封闭的多边形
- canvas.drawPath(path1, p);
- mPaint.setColor(Color.YELLOW);
- mPaint.setStrokeWidth(3);
- mPaint.setAntiAlias(true);
-
- for (int index=0; index<mListPoint.size(); index++)
- {
- if (index > 0)
- {
- canvas.drawLine(mListPoint.get(index-1).get(X_KEY), mListPoint.get(index-1).get(Y_KEY),
- mListPoint.get(index).get(X_KEY), mListPoint.get(index).get(Y_KEY), mPaint);
- canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG| Paint.FILTER_BITMAP_FLAG));
- }
- }
- }
- /**
- * @param curX which x position you want to draw.
- * @param curY which y position you want to draw.
- */
- public void setLinePoint(int curX, int curY)
- {
- Map<String, Integer> temp = new HashMap<String, Integer>();
- temp.put(X_KEY, curX);
- temp.put(Y_KEY, curY);
- mListPoint.add(temp);
- invalidate();
- }
- }
- package com.example.mydrawline;
-
- import android.annotation.SuppressLint;
- import android.app.Activity;
- import android.content.res.Resources;
- import android.os.Bundle;
- import android.os.Handler;
- import android.os.Message;
-
- import java.io.InputStream;
- import java.util.Scanner;
-
- public class DrawActivity extends Activity {
- private static final int MSG_DATA_CHANGE = 0x11;
- private LineView mLineView;
-
- private Handler mHandler;
- private int mX =150;
-
- int no;
- Scanner scan;
- @SuppressLint("HandlerLeak")
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.draw);
- final Resources res = super.getResources();//获取资源文件
-
- mLineView = (LineView) this.findViewById(R.id.line);
- InputStream input1 = res.openRawResource(R.raw.data2);
- scan = new Scanner(input1);
-
- mHandler = new Handler(){
- @Override
- public void handleMessage(Message msg) {
- // TODO Auto-generated method stub
- switch (msg.what) {
- case MSG_DATA_CHANGE:
- mLineView.setLinePoint(msg.arg1, msg.arg2);
- break;
-
- default:
- break;
- }
- super.handleMessage(msg);
- }
- };
-
- new Thread(){
- public void run() {
- while(scan.hasNext())
- {
- no++;
- double data= Double.parseDouble(scan.nextLine());
- if(no % 60==0) {
- Message message = new Message();
- message.what = MSG_DATA_CHANGE;
- message.arg1 = mX;
- message.arg2 =500- (int) (data * 100);
- mHandler.sendMessage(message);
- try {
- sleep(1);
- } catch (InterruptedException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
-
- mX += 1;
- }
- }
-
- };
- }.start();
- }
-
-
-
-
- private Handler handler = new Handler();
- private Runnable task = new Runnable() {
- public void run() {
- // TODO Auto-generated method stub
- handler.postDelayed(this,1*2000);//设置循环时间,此处是5秒
- }
- };
- }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。