6.8　View之孪生兄弟——SurfaceView

6.8　View之孪生兄弟——SurfaceView" level="2">6.8　View之孪生兄弟——SurfaceView
- 6.8.1　SurfaceView与View的区别" level="3">6.8.1　SurfaceView与View的区别
- 6.8.2　SurfaceView的使用" level="3">6.8.2　SurfaceView的使用
- 6.8.3　SurfaceView实例" level="3">6.8.3　SurfaceView实例
  - 6.8.3.1　正弦曲线
  - 6.8.3.2　绘图板

6.8　View之孪生兄弟——SurfaceView" class="reference-link">6.8　View之孪生兄弟——SurfaceView

6.8.1　SurfaceView与View的区别" class="reference-link">6.8.1　SurfaceView与View的区别

Android系统提供了View进行绘图处理，View可以满足大部分的绘图需求，但在某些时候，却也有些心有余而力不足，特别是在进行一些开发的时候。我们知道，View通过刷新来重绘视图，Android系统通过发出VSYNC信号来进行屏幕的重绘，刷新的间隔时间为16ms。如果在16ms内View完成了你所需要执行的所有操作，那么用户在视觉上，就不会产生卡顿的感觉；而如果执行的操作逻辑太多，特别是需要频繁刷新的界面上，例如游戏界面，那么就会不断阻塞主线程，从而导致画面卡顿。很多时候，在自定义View的Log中经常会看见如下所示的警告。

    “Skipped 47 frames! The application may be doing too much work on its main thread”

这些警告的产生，很多情况下就是因为在绘制过程中，处理逻辑太多造成的。

为了避免这一问题的产生，Android系统提供了SurfaceView组件来解决这个问题。SurfaceView可以说是View的孪生兄弟，但它与View还是有所不同的，它们的区别主要体现在以下几点。

View主要适用于主动更新的情况下，而SurfaceView主要适用于被动更新，例如频繁地刷新。
View在主线程中对画面进行刷新，而SurfaceView通常会通过一个子线程来进行页面的刷新。
View在绘图时没有使用双缓冲机制，而SurfaceView在底层实现机制中就已经实现了双缓冲机制。

总结成一句话就是，如果你的自定义View需要频繁刷新，或者刷新时数据处理量比较大，那么你就可以考虑使用SurfaceView来取代View了。

6.8.2　SurfaceView的使用" class="reference-link">6.8.2　SurfaceView的使用

SurfaceView的使用虽然比View复杂，但是SurfaceView在使用时，有一套使用的模板代码，大部分的SurfaceView绘图操作都可以套用这样的模板代码来进行编写。因此，其实SurfaceView的使用会更加简单。

通常情况下，使用以下步骤来创建一个SurfaceView的模板。

创建SurfaceView

创建自定义的SurfaceView继承自SurfaceView，并实现两个接口——SurfaceHolder. Callback和Runnable，代码以下所示。

    public class SurfaceViewTemplate extends SurfaceView
            implements SurfaceHolder.Callback, Runnable

通过实现这两个接口，就需要在自定义的SurfaceView中实现接口的方法，对于SurfaceHolder.Callback方法，需要实现如下方法。

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
    }
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }

分别对应SurfaceView的创建、改变和销毁过程。

对于Runnable接口，需要实现run()方法，代码如下所示。

    @Override
    public void run() {
    }

初始化SurfaceView

在自定义SurfaceView的构造方法中，需要对SurfaceView进行初始化。在自定义的SurfaceView中，通常需要定义以下三个成员变量，代码如下所示。

    // SurfaceHolder
    private SurfaceHolder mHolder;
    //用于绘图的Canvas
    private Canvas mCanvas;
    //子线程标志位
    private boolean mIsDrawing;

初始化方法就是对SurfaceHolder进行初始化，通过以下代码来初始化一个SurfaceHolder对象，并注册SurfaceHolder的回调方法。

    mHolder = getHolder();
    mHolder.addCallback(this);

另外两个成员变量——Canvas和标志位。对Canvas我们已经非常熟悉了，与在View的onDraw()方法中使用Canvas绘图一样，在SurfaceView中，我们也要使用Canvas来进行绘图，而另一个标志位，则是用来控制子线程的，前面已经说了，SurfaceView通常会起一个子线程来进行绘制，而这个标志位就可以控制子线程。

使用SurfaceView

通过SurfaceHolder对象的lockCanvas()方法，就可以获得当前的Canvas绘图对象。接下来，就可以与在View中进行的绘制操作一样进行绘制了。不过这里有一点需要注意的是，获取到的Canvas对象还是继续上次的Canvas对象，而不是一个新的对象。因此，之前的绘图操作都将被保留，如果需要擦除，则可以在绘制前，通过drawColor()方法来进行清屏操作。

绘制的时候，充分利用SurfaceView的三个回调方法，在surfaceCreated()方法中开启子线程进行绘制，而子线程使用一个while(mIsDrawing)的循环来不停地进行绘制，而在绘制的具体逻辑中，通过lockCanvas()方法获得的Canvas对象进行绘制，并通过unlockCanvasAndPost(mCanvas)方法对画布内容进行提交。整个SurfaceView的模板代码如下所示。

    package com.imooc.surfaceviewtest;
 
    import android.content.Context;
    import android.graphics.Canvas;
    import android.util.AttributeSet;
    import android.view.SurfaceHolder;
    import android.view.SurfaceView;
 
    public class SurfaceViewTemplate extends SurfaceView
            implements SurfaceHolder.Callback, Runnable {
 
        // SurfaceHolder
        private SurfaceHolder mHolder;
        //用于绘图的Canvas
        private Canvas mCanvas;
        //子线程标志位
        private boolean mIsDrawing;
 
        public SurfaceViewTemplate(Context context) {
            super(context);
            initView();
        }
 
        public SurfaceViewTemplate(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
 
    public SurfaceViewTemplate(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            initView();
        }
 
        private void initView() {
            mHolder = getHolder();
            mHolder.addCallback(this);
            setFocusable(true);
            setFocusableInTouchMode(true);
            this.setKeepScreenOn(true);
            //mHolder.setFormat(PixelFormat.OPAQUE);
        }
 
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            mIsDrawing = true;
            new Thread(this).start();
        }
 
        @Override
        public void surfaceChanged(SurfaceHolder holder,
                                   int format, int width, int height) {
        }
 
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            mIsDrawing = false;
        }
        @Override
        public void run() {
            while (mIsDrawing) {
                draw();
            }
        }
 
        private void draw() {
            try {
                mCanvas = mHolder.lockCanvas();
                // draw something
            } catch (Exception e) {
            } finally {
                if (mCanvas != null)
                    mHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

以上代码基本上可以满足大部分的SurfaceView绘图需求，唯一需要注意的是在绘制方法中，将mHolder.unlockCanvasAndPost(mCanvas)方法放到finally代码块中，来保证每次都能将内容提交。

6.8.3　SurfaceView实例" class="reference-link">6.8.3　SurfaceView实例

下面我们通过两个实例来看看如何使用SurfaceView进行频繁刷新的绘图方法。

6.8.3.1　正弦曲线

首先看一个类似示波器的例子，在界面上不断绘制一个正弦曲线，类似示波器、心电图、股票走势图等。当然，这样一个视图使用View绘制也同样可以实现，而使用SurfaceView的具体原因前面已经讲过了，这里不再赘述。

要绘制一个正弦曲线，只需要不断修改横纵坐标的值，并让它们满足正弦函数即可。因此，使用一个Path对象来保存正弦函数上的坐标点，在子线程的while循环中，不断改变横纵坐标值，代码如下所示。

    @Override
    public void run() {
        while (mIsDrawing) {
            draw();
            x += 1;
            y = (int) (100*Math.sin(x * 2 * Math.PI / 180) + 400);
            mPath.lineTo(x, y);
        }
    }
    private void draw() {
        try {
            mCanvas = mHolder.lockCanvas();
            // SurfaceView背景
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath, mPaint);
        } catch (Exception e) {
        } finally {
            if (mCanvas != null)
                mHolder.unlockCanvasAndPost(mCanvas);
        }

绘制效果如图6.73所示。

图6.73　绘制正弦曲线

6.8.3.2　绘图板

下面这个例子，展示了如何使用SurfaceView来实现一个简单的绘图板，绘图的方法与在View中进行绘图所使用的方法一样，也是通过Path对象来记录手指滑动的路径来进行绘图。在SurfaceView的onTouchEvent()中来记录Path路径，代码如下所示。

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(x, y);
                break;
            case MotionEvent.ACTION_MOVE:
                mPath.lineTo(x, y);
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }

并在draw()方法中进行绘制，代码如下所示。

    private void draw() {
        try {
            mCanvas = mHolder.lockCanvas();
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath, mPaint);
        } catch (Exception e) {
        } finally {
            if (mCanvas != null)
                mHolder.unlockCanvasAndPost(mCanvas);
        }
    }

一直到这里为止，这个实例与之前的实例都没有太大的区别，不过现在需要在子线程的循环中进行优化。在前面的模板代码中，我们在线程中不断地调用draw()方法来进行绘制，但有时候绘制也不用这么频繁。因此我们可以在子线程中，进行sleep操作，尽可能地节省系统资源，代码如下所示。

    @Override
    public void run() {
        long start = System.currentTimeMillis();
        while (mIsDrawing) {
            draw();
        }
        long end = System.currentTimeMillis();
        // 50 - 100
        if (end - start < 100) {
            try {
                Thread.sleep(100 - (end - start));
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }

通过判断draw()方法所使用的逻辑时长来确定sleep的时长，这是一个非常通用的解决方案，代码中的100ms是一个大致的经验值，这个值的取值一般在50ms到100ms左右。绘图的效果如图6.74所示。

图6.74　绘图实例

6.8 View之孪生兄弟——SurfaceView