由于工作需要,模拟一个signal变化量走势,所以需要绘制折线动态图,话说使用achartengine这个jar包就能实现各种图形绘制,but工程导入一个包在大小上毕竟是要付出代价的嘛,况且只是为了实现画一条动态曲线嘛,故就用重写View实现了下,还是惯例,直接上代码。
最主要的实现类:
package com.jesse.paintline1; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.PaintFlagsDrawFilter; import android.util.AttributeSet; import android.view.View; /** * @author Jesse * write this view for draw line,use it easy. */ public class LineView extends View { private final static String X_KEY = "Xpos"; private final static String Y_KEY = "Ypos"; 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); mPaint.setColor(Color.RED); 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. * @see all you put x-y position will connect to a line. */ 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(); } }
UI类:
package com.jesse.paintline1; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.app.Activity; public class MainActivity extends Activity { private static final int MSG_DATA_CHANGE = 0x11; private LineView mLineView; private Handler mHandler; private int mX = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLineView = (LineView) this.findViewById(R.id.line); 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() { for (int index=0; index<20; index++) { Message message = new Message(); message.what = MSG_DATA_CHANGE; message.arg1 = mX; message.arg2 = (int)(Math.random()*200);; mHandler.sendMessage(message); try { sleep(1000); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } mX += 30; } }; }.start(); } }
UI布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.jesse.paintline1.LineView android:id="@+id/line" android:layout_centerInParent="true" android:layout_width="1024dp" android:layout_height="576dp" android:background="@drawable/line_bg" /> </RelativeLayout>
效果不解释,就是动态曲线图,哈哈!