AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SurfaceView的那点事儿

2023-05-22 157
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SurfaceView的那点事儿

View之孪生兄弟-SurfaceView


概述


Android系统中提供了View进行绘图处理，View可以满足大部分的绘图需求，但是在某些时候却力不从心，特别是进行一些开发的时候。


一般的View通过刷新来重绘视图，Android系统通过发出VSYNC信号来进行屏幕的重绘，刷新的时间间隔是16ms。


如果在16ms内View完成了所需要执行的操作，那么用户在视觉上就不会产生卡顿的感觉；而如果执行的逻辑太多，特别是需要频繁刷新的界面，如游戏界面，那么就会不断的阻塞主线程，从而导致界面卡顿。


我们经常在log中可以看到

SKipped 47 frames! The application may be doing too much work on its main Thread


这种告警产生的很多原因就是在绘制的过程中，处理逻辑太多造成的。

为了避免这种问题，Android提供了SurfaceView来解决这个问题。

SurfaceView和View的区别

SurfaceView和View的区别：


View主要适用于主动更行的情况，而SurfaceView适用于被动更新，例如频繁的刷新。

View在主线程中对画面进行，而SurfaceView通常会在一个子线程中进行页面的刷新

View在绘图时没有使用双缓冲机制，而SurfaceView在底层实现了双缓冲机制


总之，如果你的自定义View需要频繁刷新，或者刷新时处理的数据量比较大时，就可以考虑使用SurfaceView替代View了。


SurfaceView的使用


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


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


创建SurfaceView


创建自定义的SurfaceView 继承自 SurfaceView，并且实现两个接口：SurfaceHolder.Callback 和 Runnable。

代码如下：


对于SurfaceHolder.Callback接口


public class SurfaceViewTemplate extends SurfaceView implements SurfaceHolder.Callback ,Runnable {
    .......
}


实现SurfaceHolder.Callback和Runnable接口，需要重写以下方法

  /**
     * SurfaceView创建
     * @param holder
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
    }
    /**
     * SurfaceView改变
     * @param holder
     * @param format
     * @param width
     * @param height
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }
    /**
     * SurfaceView销毁
     * @param holder
     */
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
    }

对于Runnable接口，无需多说，需要重写run方法

@Override
    public void run() {
    }


初始化SurfaceView


在自定义的SurfaceView的构造方法中，需要对SurfaceView进行初始化。

一般我们通常定义以下三个成员变量


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

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

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


另外两个成员变量mCanvas和标志位。

Canvas不必多说，和在View的onDraw方法中使用Canvas绘图一样。

另外一个标志位，则是用来控制子线程的。 SurfaceView通常会起一个子线程来进行绘制，而这个标志位就可以控制子线程。


使用SurfaceView


通过SurfaceHolder对象的lockCanvas()方法，就可以获取当前的Canvas绘图对象。


不过需要注意的是，获取到的Canvas对象还是继续上次的Canvas对象，而不是一个新的对象。 因此，之前的绘图操作将会被保留，如果需要擦除，则可以在绘制前，通过drawColor()方法来机型清屏操作。


绘制的时候，充分利用SurfaceView的三个回调方法，在surfaceCreated方法中开启子线程进行绘制，

而子线程使用一个while(mIsDrawing)的循环来不停的绘制，并通过unlockCanvasAndPost(mCanvas)方法对画布内容进行提交。


整个SurfaceView的模板代码如下：

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
/**
 * MyApp
 *
 * @author Mr.Yang on 2016-04-22  15:59.
 * @version 1.0
 * @desc
 */
public class SurfaceViewTemplate extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    //SurfaceHolder
    private SurfaceHolder mSurfaceHolder;
    // 用于绘图的Canvas
    private Canvas mCanvas;
    // 子线程标志位
    private boolean mIsDrawing;
    /**
     * 构造函数
     *
     * @param context
     */
    public SurfaceViewTemplate(Context context) {
        super(context);
        initView();
    }
    /**
     * 构造函数
     *
     * @param context
     * @param attrs
     */
    public SurfaceViewTemplate(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    /**
     * 构造函数
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public SurfaceViewTemplate(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    /**
     * 初始化，在构造函数中调用
     */
    private void initView() {
        mSurfaceHolder = getHolder();
        mSurfaceHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        //mSurfaceHolder.setFormat(PixelFormat.OPAQUE);
    }
    /**
     * SurfaceView创建
     *
     * @param holder
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        mIsDrawing = true;
        new Thread(this).start();
    }
    /**
     * SurfaceView改变
     *
     * @param holder
     * @param format
     * @param width
     * @param height
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }
    /**
     * SurfaceView销毁
     *
     * @param holder
     */
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        mIsDrawing = false;
    }
    @Override
    public void run() {
        while (mIsDrawing) {
            draw();
        }
    }
    /**
     *
     */
    private void draw() {
        try {
            mCanvas = mSurfaceHolder.lockCanvas();
            // draw something
        } catch (Exception e) {
        } finally {
            if (mCanvas != null) {
                mSurfaceHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }
}

以上的代码基本可以满足大部分的SurfaceView绘图需求，需要注意的是 将mSurfaceHolder.unlockCanvasAndPost(mCanvas)放到finally中确保每次都能讲内容提交

SurfaceView实例


正弦曲线


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


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;
/**
 * MyApp
 *
 * @author Mr.Yang on 2016-04-22  22:17.
 * @version 1.0
 * @desc
 */
public class SinView 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 SinView(Context context) {
        super(context);
        initView();
    }
    public SinView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public SinView(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.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);
        }
    }
}
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class SinViewAct extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SinView(this));
    }
}

20160422224036748.gif

最后的样子：


20160422224119044.png


绘图板


通过Path对象记录手指滑动的路径来进行绘图，在SurfaceView的onTouchEvent（）中记录Path路径。


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;
/**
 * MyApp
 *
 * @author Mr.Yang on 2016-04-22  22:02.
 * @version 1.0
 * @desc
 */
public class SimpleDraw extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    //SurfaceHolder
    private SurfaceHolder mSurfaceHolder;
    // 用于绘图的Canvas
    private Canvas mCanvas;
    // 子线程标志位
    private boolean mIsDrawing;
    private Path mPath;
    private Paint mPaint;
    /**
     * 构造函数
     *
     * @param context
     */
    public SimpleDraw(Context context) {
        super(context);
        initView();
    }
    /**
     * 构造函数
     *
     * @param context
     * @param attrs
     */
    public SimpleDraw(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    /**
     * 构造函数
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public SimpleDraw(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }
    /**
     * 初始化，在构造函数中调用
     */
    private void initView() {
        mSurfaceHolder = getHolder();
        mSurfaceHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        //mSurfaceHolder.setFormat(PixelFormat.OPAQUE);
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(10.0f);
    }
    /**
     * SurfaceView创建
     *
     * @param holder
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        mIsDrawing = true;
        new Thread(this).start();
    }
    /**
     * SurfaceView改变
     *
     * @param holder
     * @param format
     * @param width
     * @param height
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }
    /**
     * SurfaceView销毁
     *
     * @param holder
     */
    @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 = mSurfaceHolder.lockCanvas();
            // draw something
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath, mPaint);
        } catch (Exception e) {
        } finally {
            if (mCanvas != null) {
                mSurfaceHolder.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;
    }
}

有时候绘制也不用这么的频繁，因此我们可以在子线程中，进行Sleep操作，以便尽可能的节约系统资源。

通过判断draw方法所使用的逻辑时长来确定Sleep的值，这是一个非常通用的解决方案，代码中的100ms是一个大致的经验值，一般在50ms~100ms左右

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
public class SimpleDrawAct extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new SimpleDraw(this));
    }
}

20160422224352875.gif


通过自定义View实现绘画板

也可以通过自定义View实现 ，代码如下

import android.content.Context;
import android.graphics.Bitmap;
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.View;
/**
 * MyApp
 *
 * @author Mr.Yang on 2016-04-23  10:32.
 * @version 1.0
 *          分析：
 *          画板放在哪里？
 *          View里，我们自定义一个View，在onDraw()里完成绘制，另外View还有个onTouchEvent的方法， 我们可以在获取用户的手势操作！
 *          需要准备些什么？
 *          一只画笔(Paint)，一块画布(Canvas)，一个路径(Path)记录用户绘制路线；
 *          另外划线的时候，每次都是从上次拖动时间的发生点到本次拖动时间的发生点！
 *          那么之前绘制的 就会丢失，为了保存之前绘制的内容，
 *          我们可以引入所谓的"双缓冲"技术： 其实就是每次不是直接绘制到Canvas上，而是先绘制到Bitmap上，等Bitmap上的绘制完了， 再一次性地绘制到View上！
 *          <p/>
 *          具体的实现流程？
 *          初始化画笔，设置颜色等等一些参数；
 *          在View的onMeasure()方法中创建一个View大小的Bitmap，
 *          同时创建一个Canvas；onTouchEvent中获得X,Y坐标，做绘制连线，
 *          最后invalidate()重绘，即调用 onDraw方法将bitmap的东东画到Canvas上！
 */
public class SimpleDrawByCustomView extends View {
    // 定义画布
    private Canvas mCanvas;
    // 定义画笔
    private Paint mPaint;
    // 记录用户绘制的Path
    private Path mPath;
    //缓存绘制的内容
    private Bitmap mBitmap;
    private int mLastX;
    private int mLastY;
    /**
     * @param context
     */
    public SimpleDrawByCustomView(Context context) {
        super(context);
        init();
    }
    /**
     * @param context
     * @param attrs
     */
    public SimpleDrawByCustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
    /**
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public SimpleDrawByCustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    /**
     * 初始化工作，在构造函数中调用
     */
    private void init() {
        mPaint = new Paint();
        mPath = new Path();
        mPaint.setColor(Color.BLUE);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND); //结合处为圆角
        mPaint.setStrokeCap(Paint.Cap.ROUND); // 设置转弯处为圆角
        mPaint.setStrokeWidth(20);   // 设置画笔宽度
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        // 初始化bitmap,Canvas
        mBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }
    //重写该方法，在这里绘图
    @Override
    protected void onDraw(Canvas canvas) {
        drawPath();
        canvas.drawBitmap(mBitmap, 0, 0, null);
    }
    //绘制线条
    private void drawPath() {
        mCanvas.drawPath(mPath, mPaint);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                mLastX = x;
                mLastY = y;
                mPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                int dx = Math.abs(x - mLastX);
                int dy = Math.abs(y - mLastY);
                if (dx > 3 || dy > 3)
                    mPath.lineTo(x, y);
                mLastX = x;
                mLastY = y;
                break;
        }
        invalidate();
        return true;
    }
}


文章标签：
前端开发
Android开发
小小工匠
目录
相关文章
路宇
|
Android开发
Android 使用MediaPlayer和SurfaceView播放视频
Android 使用MediaPlayer和SurfaceView播放视频
路宇
178 0
GameProgramer
|
API 异构计算
SurfaceView 和 TextureView
SurfaceView 和 TextureView
GameProgramer
341 0
古镇月影
|
前端开发 Android开发
android surfaceview 清屏
引用：http://www.eoeandroid.com/forum.php?mod=viewthread&tid=40776    12楼 清屏可以用橡皮擦的画笔画一个屏幕大小的矩形就可以了//这是定义橡皮擦画笔Paint clearPaint = new Paint();clearPaint.
古镇月影
1283 0
游客h5zej67ajitww
|
前端开发 Java Android开发
TextureView 以替换 SurfaceView，TextureView
q
游客h5zej67ajitww
353 0
游客h5zej67ajitww
|
数据格式 XML Android开发
SurfaceView 的设计依然遵循 A
q
游客h5zej67ajitww
101 0
杰克.陈
|
API Android开发 容器
Android Camera2拍照（一）——使用SurfaceView
原文:Android Camera2拍照（一）——使用SurfaceView Camera2 API简介 Android 从5.
杰克.陈
3643 0
范大脚脚
|
Shell Android开发 C语言
android 98 MediaPlayer+SurfaceView播放视频
范大脚脚
1488 0
文艺小青年
|
Android开发
Android视频播放-SurfaceView和Mediaplayer
文艺小青年
1817 0
curiousby
|
Java Android开发
android mediaplayer SurfaceView
          package com.curiousby.baoyou.cn.DemoMediaPlayer.activity; import android.app.
curiousby
1046 0
shy丶gril
|
前端开发 Java
认识 SurfaceView
shy丶gril
1552 0