Android一种View动态折线绘制的实现实战

由于工作需要，模拟一个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>

效果不解释，就是动态曲线图，哈哈！

原文转自：http://blog.csdn.net/yanbober/article/details/21000579