Android中的SurfaceView详解

深碍√TFBOYSˉ_ 2022-12-24 01:50 220阅读 0赞

Android中提供了View进行绘图处理，View可以满足大部分的绘图需求，但是有时候，View却显得力不从心，所以Android提供了`SurfaceView`给Android开发者，以满足更多的绘图需求。下面就让我们一起来了解一下`SurfaceView`。

**一、为什么要使用SurfaceView**

我们知道View是通过刷新来重绘视图，系统通过发出`VSSYNC`信号来进行屏幕的重绘，刷新的时间间隔是`16ms`,如果我们可以在16ms以内将绘制工作完成，则没有任何问题，如果我们绘制过程逻辑很复杂，并且我们的界面更新还非常频繁，这时候就会造成界面的卡顿，影响用户体验，为此Android提供了`SurfaceView`来解决这一问题。

`View`和`SurfaceView`的区别:

1 . View适用于主动更新的情况，而SurfaceView则适用于被动更新的情况，比如频繁刷新界面。

2 . View在主线程中对页面进行刷新，而SurfaceView则开启一个子线程来对页面进行刷新。

3 . View在绘图时没有实现双缓冲机制，SurfaceView在底层机制中就实现了双缓冲机制。

这摘录了一段网上对于双缓冲技术的介绍

双缓冲技术是游戏开发中的一个重要的技术。当一个动画争先显示时，程序又在改变它，前面还没有显示完，程序又请求重新绘制，这样屏幕就会不停地闪烁。而双缓冲技术是把要处理的图片在内存中处理好之后，再将其显示在屏幕上。双缓冲主要是为了解决 反复局部刷屏带来的闪烁。把要画的东西先画到一个内存区域里，然后整体的一次性画出来。

**二、如何使用SurfaceView**

要想使用`SurfaceView`需要经过创建、初始化、使用三个步骤，下面我们就一步步来说说这三个步骤。

1 . 创建SurfaceView

我们需要自定义一个类继承自SurfaceView，并且实现两个接口以及接口定义的方法，当然，与自定义View类似，还要重写三个构造函数。下面是代码：

public class SurfaceViewTemplate extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    
        public SurfaceViewTemplate(Context context) {
            this(context, null);
        }
    
        public SurfaceViewTemplate(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SurfaceViewTemplate(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }
    
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
           //创建
        }
    
        @Override
        public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
            //改变
        }
    
        @Override
        public void surfaceDestroyed(SurfaceHolder holder) {
            //销毁
        }
    
        @Override
        public void run() {
            //子线程
        }
    }

前面三个构造函数的写法和自定义View是相同的，接下来的三个方法分别在SurfaceView创建、改变、销毁的时候进行调用，最后的`run()`方法中写我们子线程中执行的绘图逻辑即可。

2 . 初始化SurfaceView

这一步我们主要是定义三个成员变量以备后面绘图时使用，然后初始化这三个成员变量并且注册对应的回调方法。代码如下:

private SurfaceHolder mSurfaceHolder;
    //绘图的Canvas
    private Canvas mCanvas;
    //子线程标志位
    private boolean mIsDrawing;
    
    /**
     * 初始化View
     */
    private void initView(){
        mSurfaceHolder = getHolder();
        //注册回调方法
        mSurfaceHolder.addCallback(this);
        //设置一些参数方便后面绘图
        setFocusable(true);
        setKeepScreenOn(true);
        setFocusableInTouchMode(true);
    }
    
    public SurfaceViewSinFun(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //在三个参数的构造方法中完成初始化操作
        initView();
    }

上面的代码很简单，都有注释，相信很容易看懂，这里不再过多解释。

3 . 使用SurfaceView

经过上面两步的准备工作，下面就可以开始使用SurfaceView了。

这一步又可以分为3步来完成:

(1) 通过`lockCanvas()`方法获得Canvas对象

(2) 在子线程中使用Canvas对象进行绘制

(3) 使用`unlockCanvasAndPost()`方法将画布内容进行提交

**注意: `lockCanvas()` 方法获得的Canvas对象仍然是上次绘制的对象，由于我们是不断进行绘制，但是每次得到的Canvas对象都是第一次创建的Canvas对象。**

SurfaceView的绘制可以使用下面的模板代码来实现，唯一的不同就是绘制逻辑的不同，代码如下:

public class SurfaceViewTemplate extends SurfaceView implements SurfaceHolder.Callback, Runnable {
        private SurfaceHolder mSurfaceHolder;
        //绘图的Canvas
        private Canvas mCanvas;
        //子线程标志位
        private boolean mIsDrawing;
        public SurfaceViewTemplate(Context context) {
            this(context, null);
        }
    
        public SurfaceViewTemplate(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SurfaceViewTemplate(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            initView();
        }
    
        @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){
                drawSomething();
            }
        }
        //绘图逻辑
        private void drawSomething() {
            try {
                //获得canvas对象
                mCanvas = mSurfaceHolder.lockCanvas();
                //绘制背景
                mCanvas.drawColor(Color.WHITE);
                //绘图
            }catch (Exception e){
    
            }finally {
                if (mCanvas != null){
                    //释放canvas对象并提交画布
                    mSurfaceHolder.unlockCanvasAndPost(mCanvas);
                }
            }
        }
    
        /**
         * 初始化View
         */
        private void initView(){
            mSurfaceHolder = getHolder();
            mSurfaceHolder.addCallback(this);
            setFocusable(true);
            setKeepScreenOn(true);
            setFocusableInTouchMode(true);
        }
    }

我们在xml文件中的使用和自定义View是相同的，使用全路径名称即可：

<com.codekong.drawlearning.view.SurfaceViewTemplate
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

**三、SurfaceView小案例**

下面我们通过两个小案例来展示SurfaceView的使用。先放上效果图

![2d3d7c0bc0b7da38775c203b1bef28ea.png][]

正弦曲线

![86a19d77f1a6bdb9d4f5adaad227cb39.png][]

手写板

1 . 绘制正弦曲线

大体的框架都是上面给的那个代码模板，区别只在于初始化画笔，和具体的绘图逻辑，所以这里不再赘述，直接上代码：

public class SurfaceViewSinFun extends SurfaceView implements SurfaceHolder.Callback, Runnable {
        private SurfaceHolder mSurfaceHolder;
        //绘图的Canvas
        private Canvas mCanvas;
        //子线程标志位
        private boolean mIsDrawing;
        private int x = 0, y = 0;
        private Paint mPaint;
        private Path mPath;
        public SurfaceViewSinFun(Context context) {
            this(context, null);
        }
    
        public SurfaceViewSinFun(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SurfaceViewSinFun(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mPaint = new Paint();
            mPaint.setColor(Color.BLACK);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setAntiAlias(true);
            mPaint.setStrokeWidth(5);
            mPath = new Path();
            //路径起始点(0, 100)
            mPath.moveTo(0, 100);
            initView();
        }
    
        @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){
                drawSomething();
                x += 1;
                y = (int)(100 * Math.sin(2 * x * Math.PI / 180) + 400);
                //加入新的坐标点
                mPath.lineTo(x, y);
            }
        }
    
        private void drawSomething() {
            try {
                //获得canvas对象
                mCanvas = mSurfaceHolder.lockCanvas();
                //绘制背景
                mCanvas.drawColor(Color.WHITE);
                //绘制路径
                mCanvas.drawPath(mPath, mPaint);
            }catch (Exception e){
    
            }finally {
                if (mCanvas != null){
                    //释放canvas对象并提交画布
                    mSurfaceHolder.unlockCanvasAndPost(mCanvas);
                }
            }
        }
    
        /**
         * 初始化View
         */
        private void initView(){
            mSurfaceHolder = getHolder();
            mSurfaceHolder.addCallback(this);
            setFocusable(true);
            setKeepScreenOn(true);
            setFocusableInTouchMode(true);
        }
    }

2 . 手写板(随手指绘制轨迹)

这个主要是涉及到触摸事件，在手指按下时将Path的起始点移动到按下的坐标点，手指移动时将移动的坐标点加入Path中，其他的代码是相同的。代码如下：

public class SurfaceViewHandWriting extends SurfaceView implements SurfaceHolder.Callback, Runnable {
        private SurfaceHolder mSurfaceHolder;
        //绘图的Canvas
        private Canvas mCanvas;
        //子线程标志位
        private boolean mIsDrawing;
        //画笔
        private Paint mPaint;
        //路径
        private Path mPath;
        private static final String TAG = "pyh";
        public SurfaceViewHandWriting(Context context) {
            this(context, null);
        }
    
        public SurfaceViewHandWriting(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public SurfaceViewHandWriting(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mPaint = new Paint();
            mPaint.setColor(Color.BLACK);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(5);
            mPaint.setAntiAlias(true);
            mPath = new Path();
            mPath.moveTo(0, 100);
            initView();
        }
    
        @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) {
                long start = System.currentTimeMillis();
                drawSomething();
                long end = System.currentTimeMillis();
                if (end - start < 100) {
                    try {
                        Thread.sleep(100 - (end - start));
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
    
        }
    
        @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
         */
        private void initView(){
            mSurfaceHolder = getHolder();
            mSurfaceHolder.addCallback(this);
            setFocusable(true);
            setKeepScreenOn(true);
            setFocusableInTouchMode(true);
        }
    
        private void drawSomething() {
            try {
                //获得canvas对象
                mCanvas = mSurfaceHolder.lockCanvas();
                //绘制背景
                mCanvas.drawColor(Color.WHITE);
                //绘制路径
                mCanvas.drawPath(mPath, mPaint);
            }catch (Exception e){
    
            }finally {
                if (mCanvas != null){
                    //释放canvas对象并提交画布
                    mSurfaceHolder.unlockCanvasAndPost(mCanvas);
                }
            }
        }
    }

上面还有一个细节，在绘制的时候，我们并没有让线程一直运行，而是让它休眠一会，从而节约系统资源，一般建议判断的阈值为50-100之间即可保证用户体验同时节约系统资源。

[2d3d7c0bc0b7da38775c203b1bef28ea.png]: /images/20221120/4b52f3e593a244d59ad2c42ae26012b7.png
[86a19d77f1a6bdb9d4f5adaad227cb39.png]: https://img-blog.csdnimg.cn/img_convert/86a19d77f1a6bdb9d4f5adaad227cb39.png