Android中SurfaceView使用详解

末蓝、 2022-05-22 23:34 606阅读 0赞

**1.什么是SurfaceView？**

Surface意为表层、表面，顾名思义SurfaceView就是指一个在表层的View对象。为什么说是在表层呢，这是因为它有点特殊跟其他View不一样，其他View是绘制在“表层”的上面，而它就是充当“表层”本身。SDK的文档 说到：SurfaceView就是在窗口上挖一个洞，它就是显示在这个洞里，其他的View是显示在窗口上，所以View可以显式在 SurfaceView之上，你也可以添加一些层在SurfaceView之上。 从API中可以看出SurfaceView属于View的子类 它是专门为制作游戏而产生的，它的功能非常强大，最重要的是它支持OpenGL ES库，2D和3D的效果都可以实现。创建SurfaceView的时候需要实现SurfaceHolder.Callback接口，它可以用来监听SurfaceView的状态，比如：SurfaceView的改变 、SurfaceView的创建 、SurfaceView 销毁等，我们可以在相应的方法中做一些比如初始化的操作或者清空的操作等等。

Android系统提供了View进行绘图处理，我们通过自定义的View可以满足大部分的绘图需求，但是这有个问题就是我们通常自定义的View是用于主动更新情况的，用户无法控制其绘制的速度，由于View是通过invalidate方法通知系统去调用view.onDraw方法进行重绘，而Android系统是通过发出VSYNC信号来进行屏幕的重绘，刷新的时间是16ms,如果在16ms内View完成不了执行的操作，用户就会看着卡顿，比如当draw方法里执行的逻辑过多，需要频繁刷新的界面上，例如游戏界面，那么就会不断的阻塞主线程，从而导致画面卡顿。而SurfaceView相当于是另一个绘图线程，它是不会阻碍主线程，并且它在底层实现机制中实现了双缓冲机制。

### 2.如何使用SurfaceView？ ###

首先SurfaceView也是一个View，它也有自己的生命周期。因为它需要另外一个线程来执行绘制操作，所以我们可以在它生命周期的初始化阶 段开辟一个新线程，然后开始执行绘制，当生命周期的结束阶段我们插入结束绘制线程的操作。这些是由其内部一个SurfaceHolder对象完成的。

SurfaceView它的绘制原理是绘制前先锁定画布（获取画布），然后等都绘制结束以后在对画布进行解锁 ，最后在把画布内容显示到屏幕上。

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

**（1）创建SurfaceView**

创建自定义的SurfaceView继承自SurfaceView,并实现两个接口：SurfaceHolder.Callback和Runnable.代码如下：

**\[java\]** view plain copy

print ?

1.        
2.  public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable

public class MySurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable

通过实现这两个接口，就需要在自定义的SurfaceView中实现接口的方法，对于SurfaceHolder.Callback方法，需要实现如下方法，其实就是SurfaceView的生命周期：

**\[java\]** view plain copy

print ?

1.  @Override  
2.   public void surfaceCreated(SurfaceHolder holder) \{  
3.       
4.    
5.   \}  
6.  @Override  
7.   public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) \{  
8.    
9.   \}  
10.   
11.  @Override  
12.  public void surfaceDestroyed(SurfaceHolder holder) \{  
13.   
14.  \}

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

对于Runnable接口，需要实现run()方法，

**\[java\]** view plain copy

print ?

1.   @Override  
2.      public void run() \{  
3.    
4.  \}

@Override
        public void run() {
    
    }

**（2）初始化SurfaceView**

在自定义的MySurfaceView的构造方法中，需要对SurfaceView进行初始化，包括SurfaceHolder的初始化、画笔的初始化等。在自定义的SurfaceView中，通常需要定义以下三个成员变量:

**\[java\]** view plain copy

print ?

1.  private SurfaceHolder mHolder;  
2.  private Canvas mCanvas;//绘图的画布  
3.  private boolean mIsDrawing;//控制绘画线程的标志位

private SurfaceHolder mHolder;
        private Canvas mCanvas;//绘图的画布
        private boolean mIsDrawing;//控制绘画线程的标志位

SurfaceHolder，顾名思义，它里面保存了一个对Surface对象的引用，而我们执行绘制方法本质上就是操控Surface。SurfaceHolder因为保存了对Surface的引用，所以使用它来处理Surface的生命周期。（说到底 SurfaceView的生命周期其实就是Surface的生命周期）例如使用 SurfaceHolder来处理生命周期的初始化。

初始化代码如下：

**\[java\]** view plain copy

print ?

1.  public MySurfaceView(Context context, AttributeSet attrs) \{  
2.         super(context, attrs);  
3.         initView();  
4.     \}  
5.    
6.     public MySurfaceView(Context context, AttributeSet attrs, int defStyleAttr) \{  
7.         super(context, attrs, defStyleAttr);  
8.         initView();  
9.     \}  
10.   
11.    public MySurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) \{  
12.        super(context, attrs, defStyleAttr);  
13.    \}  
14.   
15.    private void initView() \{  
16.        mHolder = getHolder();//获取SurfaceHolder对象  
17.        mHolder.addCallback(this);//注册SurfaceHolder的回调方法  
18.        setFocusable(true);  
19.        setFocusableInTouchMode(true);  
20.        this.setKeepScreenOn(true);  
21.    \}

public MySurfaceView(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public MySurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initView();
        }
    
        public MySurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
            super(context, attrs, defStyleAttr);
        }
    
        private void initView() {
            mHolder = getHolder();//获取SurfaceHolder对象
            mHolder.addCallback(this);//注册SurfaceHolder的回调方法
            setFocusable(true);
            setFocusableInTouchMode(true);
            this.setKeepScreenOn(true);
        }

**（3）使用SurfaceView**

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

绘制的时候，在surfaceCreated()方法中开启子线程进行绘制，而子线程使用一个while(mIsDrawing)的循环来不停的进行绘制，在绘制的逻辑中通过lockCanvas()方法获取Canvas对象进行绘制，通过unlockCanvasAndPost(mCanvas)方法对画布内容进行提交。整体代码模板如下：

**\[java\]** view plain copy

print ?

1.  import android.content.Context;  
2.  import android.graphics.Canvas;  
3.  import android.util.AttributeSet;  
4.  import android.view.SurfaceHolder;  
5.  import android.view.SurfaceView;  
6.    
7.  public class MySurfaceView  extends SurfaceView  
8.          implements SurfaceHolder.Callback, Runnable \{  
9.    
10.     // SurfaceHolder  
11.     private SurfaceHolder mHolder;  
12.     // 用于绘图的Canvas  
13.     private Canvas mCanvas;  
14.     // 子线程标志位  
15.     private boolean mIsDrawing;  
16.   
17.     public MySurfaceView(Context context) \{  
18.         super(context);  
19.         initView();  
20.     \}  
21.   
22.     public MySurfaceView(Context context, AttributeSet attrs) \{  
23.         super(context, attrs);  
24.         initView();  
25.     \}  
26.   
27.     public MySurfaceView(Context context, AttributeSet attrs, int defStyle) \{  
28.         super(context, attrs, defStyle);  
29.         initView();  
30.     \}  
31.   
32.     private void initView() \{  
33.         mHolder = getHolder();  
34.         mHolder.addCallback(this);  
35.         setFocusable(true);  
36.         setFocusableInTouchMode(true);  
37.         this.setKeepScreenOn(true);  
38.         //mHolder.setFormat(PixelFormat.OPAQUE);  
39.     \}  
40.   
41.     @Override  
42.     public void surfaceCreated(SurfaceHolder holder) \{  
43.         mIsDrawing = true;  
44.         new Thread(this).start();  
45.     \}  
46.   
47.     @Override  
48.     public void surfaceChanged(SurfaceHolder holder,  
49.                                int format, int width, int height) \{  
50.     \}  
51.   
52.     @Override  
53.     public void surfaceDestroyed(SurfaceHolder holder) \{  
54.         mIsDrawing = false;  
55.     \}  
56.   
57.     @Override  
58.     public void run() \{  
59.         while (mIsDrawing) \{  
60.             draw();  
61.         \}  
62.     \}  
63.     //绘图操作  
64.     private void draw() \{  
65.         try \{  
66.             mCanvas = mHolder.lockCanvas();  
67.             // draw sth绘制过程  
68.         \} catch (Exception e) \{  
69.         \} finally \{  
70.             if (mCanvas != null)  
71.                 mHolder.unlockCanvasAndPost(mCanvas);//保证每次都将绘图的内容提交  
72.         \}  
73.     \}  
74. \}

import android.content.Context;
    import android.graphics.Canvas;
    import android.util.AttributeSet;
    import android.view.SurfaceHolder;
    import android.view.SurfaceView;
    
    public class MySurfaceView  extends SurfaceView
            implements SurfaceHolder.Callback, Runnable {
    
        // SurfaceHolder
        private SurfaceHolder mHolder;
        // 用于绘图的Canvas
        private Canvas mCanvas;
        // 子线程标志位
        private boolean mIsDrawing;
    
        public MySurfaceView(Context context) {
            super(context);
            initView();
        }
    
        public MySurfaceView(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public MySurfaceView(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 sth绘制过程
            } catch (Exception e) {
            } finally {
                if (mCanvas != null)
                    mHolder.unlockCanvasAndPost(mCanvas);//保证每次都将绘图的内容提交
            }
        }
    }

这里说一个优化的地方，这就是在run方法中。

在我们的draw()方法每一次更新所耗费的时间是不确定的。举个例子 比如第一次循环draw() 耗费了1000毫秒 ，第二次循环draw() 耗时2000毫秒。很明显这样就会造成运行刷新时间时快时慢,可能出现卡顿现象。为此最好保证每次刷新的时间是相同的，这样可以保证整体画面过渡流畅。

**\[java\]** view plain copy

print ?

1.  <span style=“white-space:pre;”> </span>/\*\*每30帧刷新一次屏幕\*\*/  
2.         public static final int TIME\_IN\_FRAME = 30;  
3.  @Override  
4.  public void run() \{  
5.      while (mIsRunning) \{  
6.    
7.      /\*\*取得更新之前的时间\*\*/  
8.      long startTime = System.currentTimeMillis();  
9.    
10.     /\*\*在这里加上线程安全锁\*\*/  
11.     synchronized (mSurfaceHolder) \{  
12.         /\*\*拿到当前画布 然后锁定\*\*/  
13.         mCanvas =mSurfaceHolder.lockCanvas();  
14.         draw();  
15.         /\*\*绘制结束后解锁显示在屏幕上\*\*/  
16.         mSurfaceHolder.unlockCanvasAndPost(mCanvas);  
17.     \}  
18.   
19.     /\*\*取得更新结束的时间\*\*/  
20.     long endTime = System.currentTimeMillis();  
21.   
22.     /\*\*计算出一次更新的毫秒数\*\*/  
23.     int diffTime  = (int)(endTime - startTime);  
24.   
25.     /\*\*确保每次更新时间为30帧\*\*/  
26.     while(diffTime <=TIME\_IN\_FRAME) \{  
27.         diffTime = (int)(System.currentTimeMillis() - startTime);  
28.         /\*\*线程等待\*\*/  
29.         Thread.yield();  
30.     \}  
31.   
32.     \}  
33. \}

/**每30帧刷新一次屏幕**/
            public static final int TIME_IN_FRAME = 30;
        @Override
        public void run() {
            while (mIsRunning) {
    
            /**取得更新之前的时间**/
            long startTime = System.currentTimeMillis();
    
            /**在这里加上线程安全锁**/
            synchronized (mSurfaceHolder) {
                /**拿到当前画布 然后锁定**/
                mCanvas =mSurfaceHolder.lockCanvas();
                draw();
                /**绘制结束后解锁显示在屏幕上**/
                mSurfaceHolder.unlockCanvasAndPost(mCanvas);
            }
    
            /**取得更新结束的时间**/
            long endTime = System.currentTimeMillis();
    
            /**计算出一次更新的毫秒数**/
            int diffTime  = (int)(endTime - startTime);
    
            /**确保每次更新时间为30帧**/
            while(diffTime <=TIME_IN_FRAME) {
                diffTime = (int)(System.currentTimeMillis() - startTime);
                /**线程等待**/
                Thread.yield();
            }
    
            }
        }

这里说一下Thread.yield(): 与Thread.sleep(long millis):的区别：

Thread.yield(): 是暂停当前正在执行的线程对象 ，并去执行其他线程。

Thread.sleep(long millis):则是使当前线程暂停参数中所指定的毫秒数然后在继续执行线程。

**3.SurfaceView的使用实例**  
（1）正弦曲线

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

**\[java\]** view plain copy

print ?

1.  public static final int TIME\_IN\_FRAME = 30;  
2.      @Override  
3.      public void run() \{  
4.          long startTime = System.currentTimeMillis();  
5.           while(mIsDrawing)\{  
6.               draw();  
7.  //             x+=1;  
8.  //             y=(int)(100\*Math.sin(x\*2\*Math.PI/180)+400);  
9.  //             mPath.lineTo(x,y);  
10.          \}  
11.           
12.         /\*\*取得更新结束的时间\*\*/  
13.         long endTime = System.currentTimeMillis();  
14.   
15.         /\*\*计算出一次更新的毫秒数\*\*/  
16.         int diffTime  = (int)(endTime - startTime);  
17.   
18.         /\*\*确保每次更新时间为30帧\*\*/  
19.         while(diffTime <=TIME\_IN\_FRAME) \{  
20.             diffTime = (int)(System.currentTimeMillis() - startTime);  
21.             /\*\*线程等待\*\*/  
22.             Thread.yield();  
23.         \}  
24.     \}

public static final int TIME_IN_FRAME = 30;
        @Override
        public void run() {
            long startTime = System.currentTimeMillis();
             while(mIsDrawing){
                 draw();
    //             x+=1;
    //             y=(int)(100*Math.sin(x*2*Math.PI/180)+400);
    //             mPath.lineTo(x,y);
             }
    
            /**取得更新结束的时间**/
            long endTime = System.currentTimeMillis();
    
            /**计算出一次更新的毫秒数**/
            int diffTime  = (int)(endTime - startTime);
    
            /**确保每次更新时间为30帧**/
            while(diffTime <=TIME_IN_FRAME) {
                diffTime = (int)(System.currentTimeMillis() - startTime);
                /**线程等待**/
                Thread.yield();
            }
        }

（2）画图板

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

**\[java\]** view plain copy

print ?

1.  @Override  
2.     public boolean onTouchEvent(MotionEvent event) \{  
3.         int x=(int)event.getX();  
4.         int y=(int)event.getY();  
5.         switch (event.getAction())\{  
6.             case MotionEvent.ACTION\_DOWN:  
7.                 mPath.moveTo(x,y);  
8.                 break;  
9.             case MotionEvent.ACTION\_MOVE:  
10.                mPath.lineTo(x,y);  
11.                break;  
12.            case MotionEvent.ACTION\_UP:  
13.                break;  
14.   
15.        \}  
16.        return true;//表示此View拦截处理触摸事件  
17.    \}

@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;//表示此View拦截处理触摸事件
        }

并在draw方法中进行绘制：

**\[java\]** view plain copy

print ?

1.  private void draw() \{  
2.         try\{  
3.             mCanvas=mHolder.lockCanvas();//获取Canvas对象进行绘制  
4.             //SurfaceView背景  
5.             mCanvas.drawColor(Color.WHITE);  
6.             mCanvas.drawPath(mPath,mPaint);  
7.         \}catch (Exception e)\{  
8.             e.printStackTrace();  
9.         \}finally \{  
10.            if (mCanvas!=null)\{  
11.                mHolder.unlockCanvasAndPost(mCanvas);//保证绘制的画布内容提交  
12.            \}  
13.        \}  
14.    \}

private void draw() {
            try{
                mCanvas=mHolder.lockCanvas();//获取Canvas对象进行绘制
                //SurfaceView背景
                mCanvas.drawColor(Color.WHITE);
                mCanvas.drawPath(mPath,mPaint);
            }catch (Exception e){
                e.printStackTrace();
            }finally {
                if (mCanvas!=null){
                    mHolder.unlockCanvasAndPost(mCanvas);//保证绘制的画布内容提交
                }
            }
        }

**4.SurfaceView和View的区别**

总的归纳起来SurfaceView和View不同之处有：

1. SurfaceView允许其他线程更新视图对象(执行绘制方法)而View不允许这么做，它只允许UI线程更新视图对象。

2. SurfaceView是放在其他最底层的视图层次中，所有其他视图层都在它上面，所以在它之上可以添加一些层，而且它不能是透明的。

3. 它执行动画的效率比View高，而且你可以控制帧数。

4. SurfaceView在绘图时使用l了双缓冲机制，而View没有。

参考文献：

《Android群英传》徐宜生著，第6章