Android 特效View第四弹之折线图 心率图

Android 特效View第四弹之折线图 心率图

[html]  view plain copy

1. <FrameLayout  
2.         android:layout_width="match_parent"  
3.         android:layout_height="match_parent" >  
4.   
5.         <com.example.empty.ChartView  
6.             android:id="@+id/chart"  
7.             android:layout_width="wrap_content"  
8.             android:layout_height="wrap_content"  
9.             android:layout_gravity="center" />  
10.     </FrameLayout>  

[java]  view plain copy

1. package com.example.empty;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.content.Context;  
7. import android.graphics.Canvas;  
8. import android.graphics.Paint;  
9. import android.graphics.Point;  
10. import android.util.AttributeSet;  
11. import android.view.View;  
12.   
13. public class ChartView extends View{  
14.   
15.     private List mPointList = new ArrayList();  
16.     private int mPointY = 0;  
17.     private Paint mPoint = new Paint();   //画笔  
18.       
19.     public ChartView(Context context, AttributeSet attrs) {  
20.         // TODO Auto-generated constructor stub  
21.         this(context, attrs, 0);  
22.     }  
23.       
24.     public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {  
25.         super(context, attrs, defStyleAttr);  
26.         // TODO Auto-generated constructor stub  
27.         //初始化画笔  
28.         mPoint.setColor(getContext().getResources().getColor(  
29.                 R.color.color_tiny_blue));  
30.         mPoint.setStrokeWidth(2.0f);  
31.         mPoint.setAntiAlias(true);  
32.     }  
33.       
34.     @Override  
35.     protected void onDraw(Canvas paramCanvas) {  
36.         super.onDraw(paramCanvas);  
37.         //mPointY = (int) (Math.random() * 100);  
38.         if (mPointList.size() >= 2) {  
39.             for (int k = 0; k < -1 + mPointList.size(); k++) {  
40.                 paramCanvas.drawLine(((Point) mPointList.get(k)).x,  
41.                         ((Point) mPointList.get(k)).y,  
42.                         ((Point) mPointList.get(k + 1)).x,  
43.                         ((Point) mPointList.get(k + 1)).y, mPoint);  
44.             }  
45.         }  
46.         Point localPoint1 = new Point(getWidth(), mPointY);  
47.         int i = mPointList.size();  
48.         int j = 0;  
49.         if (i > 101) {                    //最多绘制100个点，多余的出栈  
50.             mPointList.remove(0);  
51.             while (j < 100) {  
52.                 Point localPoint3 = (Point) mPointList.get(j);  
53.                 localPoint3.x = (-7 + localPoint3.x);  
54.                 j++;  
55.             }  
56.             mPointList.add(localPoint1);  
57.             return;  
58.         }  
59.           
60.         while (j < mPointList.size()) {    //每新产生使前面的每一个点左移7  
61.             Point localPoint2 = (Point) mPointList.get(j);  
62.             localPoint2.x = (-7 + localPoint2.x);  
63.             j++;  
64.         }  
65.         mPointList.add(localPoint1);  
66.     }  
67.   
68.     public final void ClearList() {  
69.         mPointList.clear();  
70.     }  
71.   
72.     public final void AddPointToList(int paramInt) {  
73.         mPointY = paramInt;  
74.         invalidate();//重绘  
75.     }  
76.       
77.     public void stop(){  
78.         mPointList.clear();  
79.         invalidate();  
80.     }  
81. }  

启动绘图

[java]  view plain copy

1. mChartView = (ChartView)findViewById(R.id.chart);  
2.         Timer timer = new Timer();  
3.         TimerTask task = new TimerTask() {  
4.             @Override  
5.             public void run() {  
6.                 Message msg = new Message();  
7.                 mHandler.sendMessage(msg);  
8.             }  
9.         };  
10.         timer.schedule(task,1,300);  
11.           
12.           
13.             private Handler mHandler = new Handler() {  
14.         @Override  
15.         public void dispatchMessage(Message msg) {  
16.             mChartView.AddPointToList((int) (Math.random() * 100));  
17.         }  
18.     };  

上面的开启折线绘图只是给大家一个案例，具体效果大家依照自己需要开发。

这里只简单解释一下，折线图原理。

其实这里我们只是利用了画笔画线的原理，每当我们接收到一个新的绘制点时，我们移动之前已经存在的所有点，并把重新他们连接在一起，并把它们重新绘制出来