Android: 利用SurfaceView绘制股票滑动直线解决延迟问题

1.背景介绍

　　最近项目要绘制股票走势图，并绘制能够跟随手指滑动的指示线(Indicator)来精确查看股票价格和日期。如下图所示：



　　上图中的那条白色直线就是股票的指示线，用来跟随手指精确确定股票的时间和股票价格。不论是绘制股票图还是绘制指示线，我们首先想到的就是用Android中的自定义View来实现。实践证明，使用View能够很好地实现静态的图片，但是对用动态图像的绘制，往往会出现延迟的现象。就如上图的指示线，实际用View类实现的，跟随手指移动时，指示线就会出现延迟的现象，严重影响了用户体验，这里自然而然的要用到SurfaceView以提高性能，提高滑动的流畅度。

2.Android中View和SurfaceView对比

　　下面例举了一下二者的区别：

　　View　　　　　　　　　　　　　　　　SurfaceView

　　只能在UI主线程中更新画面　　　　　　UI主线程和新起的独立线程中都可更新画面

　　无双缓冲机制　　　　　　　　　　　　采用双缓冲机制，速度快

　　还有其他区别希望大家补充。

3.案例

　　下面是该程序实现的主要代码，隐去了数据的填充。

package com.devin;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff.Mode;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;

public class MyStockIndicatorView extends SurfaceView implements Callback {
private SurfaceHolder surfaceHolder;
private Paint paint;
private float currentX;
public MyStockIndicatorView(Context context) {
super(context);
// 初始化SurfaceHolder
surfaceHolder = this.getHolder();
surfaceHolder.addCallback(this);

// 让整个界面透明
surfaceHolder.setFormat(PixelFormat.TRANSPARENT);
setZOrderOnTop(true);

　　　　 //初始化画笔
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.WHITE);

　　　　//设置界面可以点击
setFocusable(true);
}

　　//触屏事件，每次响应事件后改变坐标值，然后重新绘制
public boolean onTouchEvent(MotionEvent event) {
int eventaction = event.getAction();
int x = (int) event.getX();
switch (eventaction) {
case MotionEvent.ACTION_DOWN:
currentX = x;
paintIndicator();
break;
case MotionEvent.ACTION_UP:
clearCavas();
break;
case MotionEvent.ACTION_MOVE:
currentX;
paintIndicator();
break;
case MotionEvent.ACTION_CANCEL:
clearCavas();
break;
}

return true;
}

　　//画直线
private void paintIndicator() {
Canvas canvas = surfaceHolder.lockCanvas();
　　　　
　　　　 //下面两句用来改变原点、同时把默认的坐标系转换成笛卡尔坐标系
//canvas.translate(chartLeft, getHeight());
//canvas.scale(1, -1);
canvas.drawLine(currentX, 0, currentX, getHeight(), paint);

surfaceHolder.unlockCanvasAndPost(canvas);
}

　　//清屏
private void clearCavas() {
　　　　//每次绘制前要锁定画布
Canvas canvas = surfaceHolder.lockCanvas();
canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
　　　　//绘制完成后解锁画布
surfaceHolder.unlockCanvasAndPost(canvas);
}

public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
}

public void surfaceCreated(SurfaceHolder surfaceHolder) {
　　　　　//在此处初始化数据
initData();
}

public void surfaceDestroyed(SurfaceHolder holder) {
}
}

上述代码关键地方都有注释。对于SurfaceView的实现，需要继承SurfaceView和实现Callback接口，同时需要实现三个方法：surfaceCreated、surfaceDestroyed、surfaceChanged方法，分别表示SurfaceView创建、销毁、界面改变时执行的方法。在构造函数中要初始化SurfaceHolder，同时每次绘图前要锁定画布，绘制完成后解锁画布。