Android 特效View第四弹之折线图 心率图
- <FrameLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <com.example.empty.ChartView
- android:id="@+id/chart"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center" />
- </FrameLayout>
- package com.example.empty;
- import java.util.ArrayList;
- import java.util.List;
- import android.content.Context;
- import android.graphics.Canvas;
- import android.graphics.Paint;
- import android.graphics.Point;
- import android.util.AttributeSet;
- import android.view.View;
- public class ChartView extends View{
- private List mPointList = new ArrayList();
- private int mPointY = 0;
- private Paint mPoint = new Paint(); //画笔
- public ChartView(Context context, AttributeSet attrs) {
- // TODO Auto-generated constructor stub
- this(context, attrs, 0);
- }
- public ChartView(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- // TODO Auto-generated constructor stub
- //初始化画笔
- mPoint.setColor(getContext().getResources().getColor(
- R.color.color_tiny_blue));
- mPoint.setStrokeWidth(2.0f);
- mPoint.setAntiAlias(true);
- }
- @Override
- protected void onDraw(Canvas paramCanvas) {
- super.onDraw(paramCanvas);
- //mPointY = (int) (Math.random() * 100);
- if (mPointList.size() >= 2) {
- for (int k = 0; k < -1 + mPointList.size(); k++) {
- paramCanvas.drawLine(((Point) mPointList.get(k)).x,
- ((Point) mPointList.get(k)).y,
- ((Point) mPointList.get(k + 1)).x,
- ((Point) mPointList.get(k + 1)).y, mPoint);
- }
- }
- Point localPoint1 = new Point(getWidth(), mPointY);
- int i = mPointList.size();
- int j = 0;
- if (i > 101) { //最多绘制100个点,多余的出栈
- mPointList.remove(0);
- while (j < 100) {
- Point localPoint3 = (Point) mPointList.get(j);
- localPoint3.x = (-7 + localPoint3.x);
- j++;
- }
- mPointList.add(localPoint1);
- return;
- }
- while (j < mPointList.size()) { //每新产生使前面的每一个点左移7
- Point localPoint2 = (Point) mPointList.get(j);
- localPoint2.x = (-7 + localPoint2.x);
- j++;
- }
- mPointList.add(localPoint1);
- }
- public final void ClearList() {
- mPointList.clear();
- }
- public final void AddPointToList(int paramInt) {
- mPointY = paramInt;
- invalidate();//重绘
- }
- public void stop(){
- mPointList.clear();
- invalidate();
- }
- }
启动绘图
- mChartView = (ChartView)findViewById(R.id.chart);
- Timer timer = new Timer();
- TimerTask task = new TimerTask() {
- @Override
- public void run() {
- Message msg = new Message();
- mHandler.sendMessage(msg);
- }
- };
- timer.schedule(task,1,300);
- private Handler mHandler = new Handler() {
- @Override
- public void dispatchMessage(Message msg) {
- mChartView.AddPointToList((int) (Math.random() * 100));
- }
- };
上面的开启折线绘图只是给大家一个案例,具体效果大家依照自己需要开发。
这里只简单解释一下,折线图原理。
其实这里我们只是利用了画笔画线的原理,每当我们接收到一个新的绘制点时,我们移动之前已经存在的所有点,并把重新他们连接在一起,并把它们重新绘制出来