当前位置:   article > 正文

Android 从txt文件读数据生成曲线图_application/x-rar txt数据文件画图形曲线

application/x-rar txt数据文件画图形曲线

在app监测系统中,经常要查看监测曲线,那么曲线怎么生成呢?可以用Android自带的graphics来实现这个功能。今天这个例程,先简化一下功能,从txt读取数据,来模拟从服务器上读取数据。txt文件里的数据是y值,x值为时间,间隔一致。生成的图如图1所示,曲线图中包含了x、y坐标轴,x、y轴物理量标签、箭头和分格值,以及y随时间的曲线。下边来进行介绍具体的操作步骤。

图1 y值随时间曲线图

目录

 一、界面设计

1、layout代码

2、layout界面图

 二、其他资源文件

1、drawable/backgroud.xml

2、values/colors

3、raw/data2.txt

三、java程序

1、LineView.class

2、DrawActivity


 一、界面设计

1、layout代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. tools:context="com.example.mydrawline.DrawActivity">
  8. <LinearLayout
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:layout_marginTop="20dp"
  12. android:layout_marginBottom="200dp"
  13. android:layout_marginLeft="10dp"
  14. android:layout_marginRight="10dp"
  15. android:orientation="vertical"
  16. android:gravity="center"
  17. tools:ignore="MissingConstraints">
  18. <TextView
  19. android:id="@+id/title"
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:layout_marginTop="10dp"
  23. app:layout_constraintBottom_toBottomOf="parent"
  24. android:gravity="center"
  25. android:textColor="@color/colorPrimaryDark"
  26. android:textSize="30dp"
  27. android:text="监测分析曲线"
  28. />
  29. <com.example.mydrawline.LineView
  30. android:id="@+id/line"
  31. android:padding="2dp"
  32. android:layout_marginTop="10dp"
  33. android:background="@color/gray"
  34. android:src="@drawable/background"
  35. android:layout_width="match_parent"
  36. android:layout_height="60dp"
  37. android:layout_weight="0.6"
  38. tools:ignore="MissingConstraints" />
  39. </LinearLayout>
  40. </androidx.constraintlayout.widget.ConstraintLayout>

2、layout界面图

 二、其他资源文件

1、drawable/backgroud.xml

这是曲线的背景设置。

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android">
  3. <stroke
  4. android:width="2dp"
  5. android:color="@color/gray"
  6. android:shape="rectangle"
  7. android:bottom="1dp"
  8. android:left="1dp"
  9. android:right="1dp"
  10. android:top="1dp"
  11. />
  12. </shape>

2、values/colors

定义的颜色变量。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <resources>
  3. <color name="splitLine">#e9e9e9</color>
  4. <color name="navigationBarColor">#aaaaaa</color>
  5. <color name="navigationPressed">#dddddd</color>
  6. <color name="colorPrimary">#008577</color>
  7. <color name="devicename">#A9A9A9</color> <!--暗灰色 -->
  8. <color name="colorPrimaryDark">#00574B</color>
  9. <color name="colorAccent">#D81B60</color>
  10. <color name="white">#FFFFFF</color> <!--白色 -->
  11. <color name="ivory">#FFFFF0</color> <!--象牙色 -->
  12. <color name="lightyellow">#FFFFE0</color> <!--亮黄色 -->
  13. <color name="yellow">#FFFF00</color> <!--黄色 -->
  14. <color name="snow">#FFFAFA</color> <!--雪白色 -->
  15. <color name="floralwhite">#FFFAF0</color> <!--花白色 -->
  16. <color name="lemonchiffon">#FFFACD</color> <!--柠檬绸色 -->
  17. <color name="cornsilk">#FFF8DC</color> <!--米绸色 -->
  18. <color name="seashell">#FFF5EE</color> <!--海贝色 -->
  19. <color name="lavenderblush">#FFF0F5</color> <!--淡紫红 -->
  20. <color name="papayawhip">#FFEFD5</color> <!--番木色 -->
  21. <color name="blanchedalmond">#FFEBCD</color> <!--白杏色 -->
  22. <color name="mistyrose">#FFE4E1</color> <!--浅玫瑰色 -->
  23. <color name="bisque">#FFE4C4</color> <!--桔黄色 -->
  24. <color name="moccasin">#FFE4B5</color> <!--鹿皮色 -->
  25. <color name="navajowhite">#FFDEAD</color> <!--纳瓦白 -->
  26. <color name="peachpuff">#FFDAB9</color> <!--桃色 -->
  27. <color name="gold">#FFD700</color> <!--金色 -->
  28. <color name="pink">#FFC0CB</color> <!--粉红色 -->
  29. <color name="lightpink">#FFB6C1</color> <!--亮粉红色 -->
  30. <color name="orange">#FFA500</color> <!--橙色 -->
  31. <color name="lightsalmon">#FFA07A</color> <!--亮肉色 -->
  32. <color name="darkorange">#FF8C00</color> <!--暗桔黄色 -->
  33. <color name="coral">#FF7F50</color> <!--珊瑚色 -->
  34. <color name="hotpink">#FF69B4</color> <!--热粉红色 -->
  35. <color name="tomato">#FF6347</color> <!--西红柿色 -->
  36. <color name="orangered">#FF4500</color> <!--红橙色 -->
  37. <color name="deeppink">#FF1493</color> <!--深粉红色 -->
  38. <color name="fuchsia">#FF00FF</color> <!--紫红色 -->
  39. <color name="magenta">#FF00FF</color> <!--红紫色 -->
  40. <color name="red">#FF0000</color> <!--红色 -->
  41. <color name="oldlace">#FDF5E6</color> <!--老花色 -->
  42. <color name="lightgoldenrodyellow">#FAFAD2</color> <!--亮金黄色 -->
  43. <color name="linen">#FAF0E6</color> <!--亚麻色 -->
  44. <color name="antiquewhite">#FAEBD7</color> <!--古董白 -->
  45. <color name="salmon">#FA8072</color> <!--鲜肉色 -->
  46. <color name="ghostwhite">#F8F8FF</color> <!--幽灵白 -->
  47. <color name="mintcream">#F5FFFA</color> <!--薄荷色 -->
  48. <color name="whitesmoke">#F5F5F5</color> <!--烟白色 -->
  49. <color name="beige">#F5F5DC</color> <!--米色 -->
  50. <color name="wheat">#F5DEB3</color> <!--浅黄色 -->
  51. <color name="sandybrown">#F4A460</color> <!--沙褐色 -->
  52. <color name="azure">#F0FFFF</color> <!--天蓝色 -->
  53. <color name="honeydew">#F0FFF0</color> <!--蜜色 -->
  54. <color name="aliceblue">#F0F8FF</color> <!--艾利斯兰 -->
  55. <color name="khaki">#F0E68C</color> <!--黄褐色 -->
  56. <color name="lightcoral">#F08080</color> <!--亮珊瑚色 -->
  57. <color name="palegoldenrod">#EEE8AA</color> <!--苍麒麟色 -->
  58. <color name="violet">#EE82EE</color> <!--紫罗兰色 -->
  59. <color name="darksalmon">#E9967A</color> <!--暗肉色 -->
  60. <color name="lavender">#E6E6FA</color> <!--淡紫色 -->
  61. <color name="lightcyan">#E0FFFF</color> <!--亮青色 -->
  62. <color name="burlywood">#DEB887</color> <!--实木色 -->
  63. <color name="plum">#DDA0DD</color> <!--洋李色 -->
  64. <color name="gainsboro">#DCDCDC</color> <!--淡灰色 -->
  65. <color name="crimson">#DC143C</color> <!--暗深红色 -->
  66. <color name="palevioletred">#DB7093</color> <!--苍紫罗兰色 -->
  67. <color name="goldenrod">#DAA520</color> <!--金麒麟色 -->
  68. <color name="orchid">#DA70D6</color> <!--淡紫色 -->
  69. <color name="thistle">#D8BFD8</color> <!--蓟色 -->
  70. <color name="lightgray">#D3D3D3</color> <!--亮灰色 -->
  71. <color name="lightgrey">#D3D3D3</color> <!--亮灰色 -->
  72. <color name="tan">#D2B48C</color> <!--茶色 -->
  73. <color name="chocolate">#D2691E</color> <!--巧可力色 -->
  74. <color name="peru">#CD853F</color> <!--秘鲁色 -->
  75. <color name="indianred">#CD5C5C</color> <!--印第安红 -->
  76. <color name="mediumvioletred">#C71585</color> <!--中紫罗兰色 -->
  77. <color name="silver">#C0C0C0</color> <!--银色 -->
  78. <color name="darkkhaki">#BDB76B</color> <!--暗黄褐色-->
  79. <color name="rosybrown">#BC8F8F</color> <!--褐玫瑰红 -->
  80. <color name="mediumorchid">#BA55D3</color> <!--中粉紫色 -->
  81. <color name="darkgoldenrod">#B8860B</color> <!--暗金黄色 -->
  82. <color name="firebrick">#B22222</color> <!--火砖色 -->
  83. <color name="powderblue">#B0E0E6</color> <!--粉蓝色 -->
  84. <color name="lightsteelblue">#B0C4DE</color> <!--亮钢兰色-->
  85. <color name="paleturquoise">#AFEEEE</color> <!--苍宝石绿 -->
  86. <color name="greenyellow">#ADFF2F</color> <!--黄绿色 -->
  87. <color name="lightblue">#ADD8E6</color> <!--亮蓝色 -->
  88. <color name="darkgray">#A9A9A9</color> <!--暗灰色 -->
  89. <color name="darkgrey">#A9A9A9</color> <!--暗灰色 -->
  90. <color name="brown">#A52A2A</color> <!--褐色 -->
  91. <color name="sienna">#A0522D</color> <!--赭色 -->
  92. <color name="darkorchid">#9932CC</color> <!--暗紫色 -->
  93. <color name="palegreen">#98FB98</color> <!--苍绿色 -->
  94. <color name="darkviolet">#9400D3</color> <!--暗紫罗兰色 -->
  95. <color name="mediumpurple">#9370DB</color> <!--中紫色 -->
  96. <color name="lightgreen">#90EE90</color> <!--亮绿色 -->
  97. <color name="darkseagreen">#8FBC8F</color> <!--暗海兰色 -->
  98. <color name="saddlebrown">#8B4513</color> <!--重褐色 -->
  99. <color name="darkmagenta">#8B008B</color> <!--暗洋红 -->
  100. <color name="darkred">#8B0000</color> <!--暗红色 -->
  101. <color name="blueviolet">#8A2BE2</color> <!--紫罗兰蓝色 -->
  102. <color name="lightskyblue">#87CEFA</color> <!--亮天蓝色 -->
  103. <color name="skyblue">#87CEEB</color> <!--天蓝色 -->
  104. <color name="gray">#808080</color> <!--灰色 -->
  105. <color name="grey">#808080</color> <!--灰色 -->
  106. <color name="olive">#808000</color> <!--橄榄色 -->
  107. <color name="purple">#800080</color> <!--紫色 -->
  108. <color name="maroon">#800000</color> <!--粟色 -->
  109. <color name="aquamarine">#7FFFD4</color> <!--碧绿色 -->
  110. <color name="chartreuse">#7FFF00</color> <!--黄绿色 -->
  111. <color name="lawngreen">#7CFC00</color> <!--草绿色 -->
  112. <color name="mediumslateblue">#7B68EE</color> <!--中暗蓝色 -->
  113. <color name="lightslategray">#778899</color> <!--亮蓝灰 -->
  114. <color name="lightslategrey">#778899</color> <!--亮蓝灰 -->
  115. <color name="slategray">#708090</color> <!--灰石色 -->
  116. <color name="slategrey">#708090</color> <!--灰石色 -->
  117. <color name="olivedrab">#6B8E23</color> <!--深绿褐色 -->
  118. <color name="slateblue">#6A5ACD</color> <!--石蓝色 -->
  119. <color name="dimgray">#696969</color> <!--暗灰色 -->
  120. <color name="dimgrey">#696969</color> <!--暗灰色 -->
  121. <color name="mediumaquamarine">#66CDAA</color> <!--中绿色 -->
  122. <color name="cornflowerblue">#6495ED</color> <!--菊兰色 -->
  123. <color name="cadetblue">#5F9EA0</color> <!--军兰色 -->
  124. <color name="darkolivegreen">#556B2F</color> <!--暗橄榄绿-->
  125. <color name="indigo">#4B0082</color> <!--靛青色 -->
  126. <color name="mediumturquoise">#48D1CC</color> <!--中绿宝石 -->
  127. <color name="darkslateblue">#483D8B</color> <!--暗灰蓝色 -->
  128. <color name="steelblue">#4682B4</color> <!--钢兰色 -->
  129. <color name="royalblue">#4169E1</color> <!--皇家蓝 -->
  130. <color name="turquoise">#40E0D0</color> <!--青绿色 -->
  131. <color name="mediumseagreen">#3CB371</color> <!--中海蓝 -->
  132. <color name="limegreen">#32CD32</color> <!--橙绿色 -->
  133. <color name="darkslategray">#2F4F4F</color> <!--暗瓦灰色 -->
  134. <color name="darkslategrey">#2F4F4F</color> <!--暗瓦灰色 -->
  135. <color name="seagreen">#2E8B57</color> <!--海绿色 -->
  136. <color name="forestgreen">#228B22</color> <!--森林绿 -->
  137. <color name="lightseagreen">#20B2AA</color> <!--亮海蓝色 -->
  138. <color name="dodgerblue">#1E90FF</color> <!--闪兰色 -->
  139. <color name="midnightblue">#191970</color> <!--中灰兰色 -->
  140. <color name="aqua">#00FFFF</color> <!--浅绿色 -->
  141. <color name="cyan">#00FFFF</color> <!--青色 -->
  142. <color name="springgreen">#00FF7F</color> <!--春绿色 -->
  143. <color name="lime">#00FF00</color> <!--酸橙色 -->
  144. <color name="mediumspringgreen">#00FA9A</color> <!--中春绿色 -->
  145. <color name="darkturquoise">#00CED1</color> <!--暗宝石绿 -->
  146. <color name="deepskyblue">#00BFFF</color> <!--深天蓝色 -->
  147. <color name="darkcyan">#008B8B</color> <!--暗青色 -->
  148. <color name="teal">#008080</color> <!--水鸭色 -->
  149. <color name="green">#008000</color> <!--绿色 -->
  150. <color name="darkgreen">#006400</color> <!--暗绿色 -->
  151. <color name="blue">#0000FF</color> <!--蓝色 -->
  152. <color name="mediumblue">#0000CD</color> <!--中兰色 -->
  153. <color name="darkblue">#00008B</color> <!--暗蓝色 -->
  154. <color name="navy">#000080</color> <!--海军色 -->
  155. <color name="black">#000000</color> <!--黑色 -->
  156. </resources>

3、raw/data2.txt

这是y值数据,因为数据量较大,本例不在此处贴出,会在本人资源中上传,请需要者自取。亲们也可以用自己的数据来生成曲线。

三、java程序

1、LineView.class

  1. package com.example.mydrawline;
  2. import android.content.Context;
  3. import android.graphics.Canvas;
  4. import android.graphics.Color;
  5. import android.graphics.Paint;
  6. import android.graphics.PaintFlagsDrawFilter;
  7. import android.graphics.Path;
  8. import android.util.AttributeSet;
  9. import android.view.View;
  10. import java.util.ArrayList;
  11. import java.util.HashMap;
  12. import java.util.List;
  13. import java.util.Map;
  14. public class LineView extends View {
  15. private final static String X_KEY = "Xpos";
  16. private final static String Y_KEY = "Ypos";
  17. int t=120;
  18. int t2=167;
  19. int x0=150;
  20. int y0=500;
  21. int xp=1020;
  22. int yp1=100;
  23. int yp2=1000;
  24. private List<Map<String, Integer>> mListPoint = new ArrayList<Map<String, Integer>>();
  25. Paint mPaint = new Paint();
  26. public LineView(Context context, AttributeSet attrs, int defStyle) {
  27. super(context, attrs, defStyle);
  28. // TODO Auto-generated constructor stub
  29. }
  30. public LineView(Context context, AttributeSet attrs) {
  31. super(context, attrs);
  32. // TODO Auto-generated constructor stub
  33. }
  34. public LineView(Context context) {
  35. super(context);
  36. // TODO Auto-generated constructor stub
  37. }
  38. @Override
  39. protected void onDraw(Canvas canvas) {
  40. // TODO Auto-generated method stub
  41. super.onDraw(canvas);
  42. Paint p = new Paint();
  43. p.setStrokeWidth(2);
  44. p.setColor(Color.BLUE);// 设置红色
  45. p.setTextAlign(Paint.Align.CENTER);
  46. p.setTextSize(40);
  47. // 画x轴
  48. for(int i=0;i<6;i++) {
  49. canvas.drawText(Integer.toString(i), x0+i*t2, y0+40, p);
  50. }
  51. canvas.drawText("t/us", xp-40, y0-50, p);//非线性曲线x坐标项目
  52. canvas.drawText("U/mv", x0+60, yp1+50, p);//非线性曲线x坐标项目
  53. // 画y轴
  54. for(int i=0;i<10;i++) {
  55. canvas.drawText(String.valueOf((float)(i-5)/1000), x0-70, y0-(int)((1*(i-5))*90), p);
  56. }
  57. canvas.drawLine(x0, y0, xp, y0, p);// 画x轴线
  58. canvas.drawLine(x0, yp1, x0, yp2, p);// 画y轴线
  59. // 画x轴箭头
  60. Path path = new Path();
  61. path.moveTo(xp-30, y0+15);// 此点为多边形的起点
  62. path.lineTo(xp, y0);
  63. path.lineTo(xp-30, y0-15);
  64. path.close(); // 使这些点构成封闭的多边形
  65. canvas.drawPath(path, p);
  66. // 画y轴箭头
  67. Path path1 = new Path();
  68. path1.moveTo(x0+15, yp1);// 此点为多边形的起点
  69. path1.lineTo(x0-15, yp1);
  70. path1.lineTo(x0, yp1-30);
  71. path1.close(); // 使这些点构成封闭的多边形
  72. canvas.drawPath(path1, p);
  73. mPaint.setColor(Color.YELLOW);
  74. mPaint.setStrokeWidth(3);
  75. mPaint.setAntiAlias(true);
  76. for (int index=0; index<mListPoint.size(); index++)
  77. {
  78. if (index > 0)
  79. {
  80. canvas.drawLine(mListPoint.get(index-1).get(X_KEY), mListPoint.get(index-1).get(Y_KEY),
  81. mListPoint.get(index).get(X_KEY), mListPoint.get(index).get(Y_KEY), mPaint);
  82. canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG| Paint.FILTER_BITMAP_FLAG));
  83. }
  84. }
  85. }
  86. /**
  87. * @param curX which x position you want to draw.
  88. * @param curY which y position you want to draw.
  89. */
  90. public void setLinePoint(int curX, int curY)
  91. {
  92. Map<String, Integer> temp = new HashMap<String, Integer>();
  93. temp.put(X_KEY, curX);
  94. temp.put(Y_KEY, curY);
  95. mListPoint.add(temp);
  96. invalidate();
  97. }
  98. }

2、DrawActivity

  1. package com.example.mydrawline;
  2. import android.annotation.SuppressLint;
  3. import android.app.Activity;
  4. import android.content.res.Resources;
  5. import android.os.Bundle;
  6. import android.os.Handler;
  7. import android.os.Message;
  8. import java.io.InputStream;
  9. import java.util.Scanner;
  10. public class DrawActivity extends Activity {
  11. private static final int MSG_DATA_CHANGE = 0x11;
  12. private LineView mLineView;
  13. private Handler mHandler;
  14. private int mX =150;
  15. int no;
  16. Scanner scan;
  17. @SuppressLint("HandlerLeak")
  18. @Override
  19. protected void onCreate(Bundle savedInstanceState) {
  20. super.onCreate(savedInstanceState);
  21. setContentView(R.layout.draw);
  22. final Resources res = super.getResources();//获取资源文件
  23. mLineView = (LineView) this.findViewById(R.id.line);
  24. InputStream input1 = res.openRawResource(R.raw.data2);
  25. scan = new Scanner(input1);
  26. mHandler = new Handler(){
  27. @Override
  28. public void handleMessage(Message msg) {
  29. // TODO Auto-generated method stub
  30. switch (msg.what) {
  31. case MSG_DATA_CHANGE:
  32. mLineView.setLinePoint(msg.arg1, msg.arg2);
  33. break;
  34. default:
  35. break;
  36. }
  37. super.handleMessage(msg);
  38. }
  39. };
  40. new Thread(){
  41. public void run() {
  42. while(scan.hasNext())
  43. {
  44. no++;
  45. double data= Double.parseDouble(scan.nextLine());
  46. if(no % 60==0) {
  47. Message message = new Message();
  48. message.what = MSG_DATA_CHANGE;
  49. message.arg1 = mX;
  50. message.arg2 =500- (int) (data * 100);
  51. mHandler.sendMessage(message);
  52. try {
  53. sleep(1);
  54. } catch (InterruptedException e) {
  55. // TODO Auto-generated catch block
  56. e.printStackTrace();
  57. }
  58. mX += 1;
  59. }
  60. }
  61. };
  62. }.start();
  63. }
  64. private Handler handler = new Handler();
  65. private Runnable task = new Runnable() {
  66. public void run() {
  67. // TODO Auto-generated method stub
  68. handler.postDelayed(this,1*2000);//设置循环时间,此处是5秒
  69. }
  70. };
  71. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/254611
推荐阅读
相关标签
  

闽ICP备14008679号