美文网首页
Android-View的孪生兄弟---SurfaceView入

Android-View的孪生兄弟---SurfaceView入

作者: 拖鞋王子猪 | 来源:发表于2020-12-22 11:13 被阅读0次

    SurfaceView入门

    为什么使用SurfaceView

    Android已经提供了View绘图处理,View可以满足大部分的绘图场景,View通过刷新来重回视图,android系统通过发出VSYNC信号进行视图的重 绘,刷新间隔为16ms,超过16ms,我们可能就会感到卡顿了。对于逻辑太多,操作复杂的场景,频繁的刷新界面,就会阻塞主线程,也会导致界面卡顿。
    很多时候,我们在自定义View的Log日志看到这样的警告

    Skipped 47 frames! The application may be doing too much work on it`s main thread.
    

    这些告警就是因为在绘制过程中,处理逻辑太多造成的。
    为了避免这些问题的产生,Android系统提供了SurfaceView,SurfaceView是VIew的孪生兄弟,但它与View还是有所不同的。

    SurfaceView与View的区别
    • View适用于主动更新的情况,而SurfaceView主要用于被动更新,比如:频繁的刷新.
    • View在主线程里面进行刷新,而SurfaceView主要通过一个子线程来进行页面的刷新
    • View在绘图时没有使用双缓冲机制,而SurfaceView在底层实现机制中已经实现了双缓冲机制
      总结起来就是,如果自定义View需要频繁刷新,或者刷新时数据处理大,那就可以考虑使用SurfaceView来取代View。
    SurfaceView的使用

    SurfaceView的使用,要比View复杂,但是它也有一套模板来使用,大部分都可以嵌套这个模板进行使用。

    • 创建SurfaceView
      创建自定义的SurfaceView继承SurfaceView,并实现两个接口,SurfaceHolder.Callback、Runnable
    public class TempleSurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable{}
    
    

    实现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) {
    
        }
    
    

    实现Runnable接口,需要实现下面的方法:

    @Override
        public void run() {
            //子线程
        }
    
    • 初始化SurfaceView
      在自定义的SurfaceView构造方法中,需要对SurfaceView进行初始化
     // SurfaceHolder
        private SurfaceHolder mHolder;
        // 用于绘图的Canvas
        private Canvas mCanvas;
        // 子线程标志位
        private boolean mIsDrawing;
    

    主要是初始化SurfaceHolder对象,并注册SurfaceHolder 的回调方法。

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

    另外两个,Canvas和标志位。Canvas与View的onDraw()方法的Canvas一样,用来进行绘图,标志位是用来控制线程的,SurfaceView是新起子线程来绘制的,而这个标志位就是控制子线程的。

    • 使用SurfaceView
      通过SurfaceHolder 的lockCanvas(),就可以获取当前的Canvas绘图对象。注意一点,获取到的Canvas还是之前的Canvas对象,而不是一个新的。所以之前的绘图操作将被保留了,如果需要擦除,可以使用drawColor()来进行清理操作。

    绘制的时候,一般都是利用三个回调方法进行操作。在surfaceCreated中开启子线程绘制,而子线程用while (mIsDrawing)的循环来不停的绘制,在绘制中,通过lockCanvas()方法获得Canvas对象进行绘制,并通过unlockCanvasAndPost方法对画布内容进行提交。
    整个代码

    public class TempleSurfaceView extends SurfaceView
            implements SurfaceHolder.Callback, Runnable {
    
        // SurfaceHolder
        private SurfaceHolder mHolder;
        // 用于绘图的Canvas
        private Canvas mCanvas;
        // 子线程标志位
        private boolean mIsDrawing;
    
        public TempleSurfaceView(Context context) {
            super(context);
            initView();
        }
    
        public TempleSurfaceView(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public TempleSurfaceView(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);
            }
        }
    }
    

    以上代码满足大部分场景的SurfaceView绘图需求,需要注意的是mHolder.unlockCanvasAndPost(mCanvas)方法放在finally 里面,保证每次内容提交。
    接下来,我们看两个实例,

    第一个:绘制cos函数

    类似示波器,心电图那个波纹一直在绘制的案例。当然View也可以实现的,但是使用SurfaceView的好处,前面就已经说了。
    要绘制一个cos函数,只需要不断修改坐标点,并满足cos函数,就可以。使用Path对象来保存cos函数的坐标点,在子线程中whiel循环中,不断改变坐标绘制就可以了。
    演示:自动绘制(这里只展示图片)

    在这里插入图片描述
    代码
    package com.imooc.surfaceviewtest;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.util.AttributeSet;
    import android.view.SurfaceHolder;
    import android.view.SurfaceView;
    
    public class CosView extends SurfaceView
            implements SurfaceHolder.Callback, Runnable {
    
        private SurfaceHolder mHolder;
        private Canvas mCanvas;
        private boolean mIsDrawing;
        private int x = 0;
        private int y = 0;
        private Path mPath;
        private Paint mPaint;
    
        public CosView(Context context) {
            super(context);
            initView();
        }
    
        public CosView(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public CosView(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);
            mPath = new Path();
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(10);
            mPaint.setStrokeCap(Paint.Cap.ROUND);
            mPaint.setStrokeJoin(Paint.Join.ROUND);
        }
    
        @Override
        public void surfaceCreated(SurfaceHolder holder) {
            mIsDrawing = true;
            mPath.moveTo(0, 400);
            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();
                x += 1;
                y = (int) (100*Math.cos(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);
            }
        }
    }
    

    第二个:绘图板

    这个案例是用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的时长,这是一个通用的解决方案,一般这个值在50~100之间。这篇文章只是SurfaceView的入门,其他的用法,还有待开启研究。
    完整代码如下:

    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Path;
    import android.util.AttributeSet;
    import android.view.MotionEvent;
    import android.view.SurfaceHolder;
    import android.view.SurfaceView;
    
    public class SimpleDraw extends SurfaceView
            implements SurfaceHolder.Callback, Runnable {
    
        private SurfaceHolder mHolder;
        private Canvas mCanvas;
        private boolean mIsDrawing;
        private Path mPath;
        private Paint mPaint;
    
        public SimpleDraw(Context context) {
            super(context);
            initView();
        }
    
        public SimpleDraw(Context context, AttributeSet attrs) {
            super(context, attrs);
            initView();
        }
    
        public SimpleDraw(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);
            mPath = new Path();
            mPaint = new Paint();
            mPaint.setColor(Color.RED);
            mPaint.setStyle(Paint.Style.STROKE);
            mPaint.setStrokeWidth(40);
        }
    
        @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() {
            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();
                }
            }
        }
    
        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);
            }
        }
    
        @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;
        }
    }
    
    

    王子猪 祝您天天开心。

    相关文章

      网友评论

          本文标题:Android-View的孪生兄弟---SurfaceView入

          本文链接:https://www.haomeiwen.com/subject/gezjnktx.html