在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代碼
<?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>
2、layout界面圖
二、其他資源檔案
1、drawable/backgroud.xml
這是曲線的背景設定。
<?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>
2、values/colors
定義的顔色變量。
<?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>
3、raw/data2.txt
這是y值資料，因為資料量較大，本例不在此處貼出，會在本人資源中上傳，請需要者自取。親們也可以用自己的資料來生成曲線。
三、java程式
1、LineView.class
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();
}
}
2、DrawActivity
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秒
}
};
}