Android SurfaceView入门学习

作者: 英勇青铜5 | 来源:发表于2016-09-23 19:12 被阅读14013次

学习资料：

Android 开发群英传

搜索学习资料时，搜到了罗升阳老师的Android视图SurfaceView的实现原理分析，老罗老师写的一系列博客，一年前开始学习Android时看不懂，现在依然看不懂，感觉涉及到的知识面太广并且非常深入，还得需要积累很多知识后才能看得懂

在包建强老师的博客中看到，说老罗的博客不是给开发App的人写的，是给开发Rom的人写的。哈哈，为看不懂找个心安理得的理由，推荐包老师的系列博客

写给Android App开发人员看的Android底层知识

1. SurfaceView

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

在一些需要频繁刷新，执行很多逻辑操作的时候，超过了16ms，就会导致卡顿

SurfaceView继承之View，但拥有独立的绘制表面，即它不与其宿主窗口共享同一个绘图表面，可以单独在一个线程进行绘制，并不会占用主线程的资源。这样，绘制就会比较高效，游戏，视频播放，还有最近热门的直播，都可以用SurfaceView

SurfaceView有两个子类GLSurfaceView和VideoView

SurfaceView和View的区别：

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

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

2. SurfaceView的使用模板

SurfaceView使用过程有一套模板代码，大部分的SurfaceView都可以套用

3步走套路：

创建SurfaceView
初始化SurfaceView
使用SurfaceView

2.1 创建SurfaceView

创建一个自定义的SurfaceViewL，继承之SurfaceView，并实现两个接口SurfaceHolder.CallBack和Runnable

代码：

public class SurfaceViewL extends SurfaceView implements SurfaceHolder.Callback,Runnable{

    public SurfaceViewL(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @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() {
    }
}

SurfaceHolder.CallBack有3个方法，分别在SurfaceView创建，改变，销毁时进行回调

SurfaceHolder.CallBack还有一个子Callback2接口，里面添加了一个surfaceRedrawNeeded (SurfaceHolder holder)方法

当需要重绘SurfaceView中的内容时，可以使用这个接口。目前还不了解具体的使用场景

2.2 初始化`SurfaceView`

在自定义的SurfaceView中，通常需要3个成员变量

SurfaceHolder mSurfaceHolder 可以控制SurfaceView的大小，格式，可以监控或者改变SurfaceView
Canvas mCanvas 画布
boolean isDrawing 子线程标志位，用来控制子线程

在构造方法中，对SurfaceHolder mSurfaceHolder进行初始化

public SurfaceViewL(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

private void init() {
        mSurfaceHolder = getHolder();//得到SurfaceHolder对象
        mSurfaceHolder.addCallback(this);//注册SurfaceHolder
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);//保持屏幕长亮
}

setFocusable(true) 能否获得焦点
setFocusableInTouchMode(true) 能否通过触摸获得焦点

这两个方法都是View类的方法，可以看看setFocusable与setFocusableInTouchMode差异以及clickable

2.3 使用SurfaceView

利用在2.2拿到的mSurfaceHolder对象，通过lockCanvas()方法获得当前的Canvas

注意：
lockCanvas()获取到的Canvas对象还是上次的Canvas对象，并不是一个新的对象。之前的绘图都将被保留，如果需要擦除，可以在绘制之前通过drawColor()方法来进行清屏

绘制要充分利用SurfaceView的三个回调方法，在surfaceCreate()方法中开启子线程进行绘制。在子线程中，使用一个while(isDrawing)循环来不停地绘制。具体的绘制过程，由lockCanvas()方法进行绘制，并通过unlockCanvasAndPost(mCanvas)进行画布内容的提交

2.4 完整的模板代码

public class SurfaceViewL extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    // SurfaceHolder
    private SurfaceHolder mSurfaceHolder;
    // 画布
    private Canvas mCanvas;
    // 子线程标志位
    private boolean isDrawing;

    public SurfaceViewL(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mSurfaceHolder = getHolder();
        mSurfaceHolder.addCallback(this);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {//创建
        isDrawing = true;
        new Thread(this).start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {//改变

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {//销毁
        isDrawing = false;
    }

    @Override
    public void run() {
        while (isDrawing){
            drawing();
        }
    }

    private void drawing() {
        try {
           mCanvas = mSurfaceHolder.lockCanvas();
           //这里进行内容的绘制 
           ...
           
        }finally {
           if (mCanvas != null){
               mSurfaceHolder.unlockCanvasAndPost(mCanvas);
           }
        }
    }
}

mSurfaceHolder.unlockCanvasAndPost(mCanvas)将这行代码放入finally代码块中，目的是为了确保内容都能够被提交

3. 简单使用

效果还是一个简易的画图板

哈哈，恶搞一下

public class SurfaceViewL extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    // SurfaceHolder
    private SurfaceHolder mSurfaceHolder;
    // 画布
    private Canvas mCanvas;
    // 子线程标志位
    private boolean isDrawing;
    // 画笔
    Paint mPaint;
    // 路径
    Path mPath;
    private float mLastX, mLastY;//上次的坐标

    public SurfaceViewL(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 初始化
     */
    private void init() {
        //初始化 SurfaceHolder mSurfaceHolder
        mSurfaceHolder = getHolder();
        mSurfaceHolder.addCallback(this);

        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setKeepScreenOn(true);
        //画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);
        mPaint.setStrokeWidth(10f);
        mPaint.setColor(Color.parseColor("#FF4081"));
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        //路径
        mPath = new Path();
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {//创建
        isDrawing = true;
        Log.e("surfaceCreated","--"+isDrawing);
        //绘制线程
       new Thread(this).start();
    }


    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {//改变

    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {//销毁
        isDrawing = false;
        Log.e("surfaceDestroyed","--"+isDrawing);
    }

    @Override
    public void run() {
       while (isDrawing){
            drawing();
        }
    }

    /**
     * 绘制
     */
    private void drawing() {
        try {
            mCanvas = mSurfaceHolder.lockCanvas();
            mCanvas.drawColor(Color.WHITE);
            mCanvas.drawPath(mPath,mPaint);
        } finally {
            if (mCanvas != null) {
                mSurfaceHolder.unlockCanvasAndPost(mCanvas);
            }
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:

                mLastX = x;
                mLastY = y;
                mPath.moveTo(mLastX, mLastY);
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = Math.abs(x - mLastX);
                float dy = Math.abs(y - mLastY);
                if (dx >= 3 || dy >= 3) {
                    mPath.quadTo(mLastX, mLastY, (mLastX + x) / 2, (mLastY + y) / 2);
                }
                mLastX = x;
                mLastY = y;
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        return true;
    }

    /**
     * 测量
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int wSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int wSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int hSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int hSpecSize = MeasureSpec.getSize(heightMeasureSpec);

        if (wSpecMode == MeasureSpec.AT_MOST && hSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, 300);
        } else if (wSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(300, hSpecSize);
        } else if (hSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(wSpecSize, 300);
        }
    }
}

代码主要是从徐医生的Android群英传中学到的。

由于while (isDrawing)是个死循环，drawing方法一直在执行，就导致一直在绘制，徐医生给了一个优化的方案，对run()方法进行了修改

@Override
public void run() {
    Log.e("drawing","--"+111111);
    long start = System.currentTimeMillis();
    while (isDrawing) {
        drawing();
    }
    long end = System.currentTimeMillis();
    if (end- start < 100){
        try {
            Log.e("drawing","--"+22222);
            Thread.sleep(100-(end-start));
        } catch (InterruptedException e) {
                e.printStackTrace();
        }
    }
}

但对于优化后run()方法有些疑问，Thread.sleep(100-(end-start))感觉这行代码并不执行到，因为isDrawing = true，是个死循环，只有surfaceDestroyed(SurfaceHolder holder)方法执行时，isDrawing = false，之后才可以执行到sleep()方法

根据个人的理解，修改了代码：

public void run() {
    while (isDrawing) {
        Log.e("drawing","--"+111111);
        long start = System.currentTimeMillis();
        drawing();
        long end = System.currentTimeMillis();
        if (end- start < 100){
            try {
                Log.e("drawing","--"+22222);
                Thread.sleep(100-(end-start));
            } catch (InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

这样修改后，虽然sleep()方法能执行到，但绘制过程有种不跟手的感觉，个人感觉并不用优化，在run()方法中

4. 自己想的优化

思路不对，每次在 ACTION_DOWN时， new 一个线程不行，创建再销毁一个线程开销太大。当作一个错误示例吧

20180503 17:34 补充

既然不想时时刻在绘制，那就只有在手指在屏幕滑动时，进行绘制

修改代码：

// 修改 1
@Override
public void surfaceCreated(SurfaceHolder holder) {//创建
    drawing();
}

//修改onTouchEvent(MotionEvent event)方法
//修改 2
 case MotionEvent.ACTION_DOWN:
    isDrawing = true ;//每次开始将标记设置为ture
    new Thread(this).start();//开启线程
    mLastX = x;
    mLastY = y;
    mPath.moveTo(mLastX, mLastY);
    break;

//修改3
 case MotionEvent.ACTION_UP:
    isDrawing = false;//每次结束将标记设置为false
    break;

//修改4  run()方法
@Override
 public void run() {
     while (isDrawing){
        drawing();
     }
}

手指落下，将标记设置为true，并开启线程
手指离开，将标记设置为false，循环结束后，线程也就停止

5. 最后

关于4的优化，哪位同学有好的建议，请留言

又是周末，周末愉快

本人很菜，有错误请指出

共勉 : ）

网友评论

unfind:为什么我的绘制在屏幕上闪一下就没有了，又变成空白了？
皮特天:为什么，我使用surfaceview却非常卡，而且还有内存泄漏
英勇青铜5:@心愿宝宝这个得根据代码排查了
若邪:为什么画的时候屏幕一直是空白
unfind:我遇到的更奇怪，闪一下就没有了。
0f100e7189b2:你这里手指不停的按下的话，会new 很多个Thread（） GC 回收，以及内存开销都是个问题吧
英勇青铜5:@cogear 每次 new 一个 thread的思路是不对的，线程的开销太大
cogear:@英勇青铜5 或者在while(isDrawing)方法外，run()方法内再套一层while(true)，然后把new Thread放到oncreated方法里？
英勇青铜5:@阿木1234 也对，还是一直开着一个线程比较好
c3e73e0cbeb9:首先感谢大神分享，再请问一下大神，怎么清除之前画的线条
Xdjm:mPath.reset();
c3e73e0cbeb9:@英勇青铜5 好的，解决了，十分感谢
英勇青铜5:@916144012 额，非大神，现在还是个在学习的小工。可以直接讲整个view使用纯白色，绘制覆盖
CloudStrife:了解！
Herbib:只在surfaceCreated() 和 MotionEvent.Move 调用 drawing()就行了，根本不用使用线程
落暮清风:@英勇青铜5 他的意思是如果没有move的话根本没必要渲染
英勇青铜5: @Herbib 可以啊，那样就是把surfaceview当作普通的view用吧。个人感觉用surfaceview的目的就是在子线程大量频繁渲染
壹公升:为什么不能再drawing方法里面加一个参数判断，if（isDrawing）{drawing方法的内容}
这样就不会一直重绘了
英勇青铜5:@壹公升这个不清楚了啊。你是用timer来定时刷新吗？那就没必要设置if()了，反正都是定时来刷新。但感觉定时来刷新，在手指画的快的时候，会有种不跟手的感觉，会觉得绘制有延迟
壹公升:如果我写的话会用timer，不知道我的想法对不对
英勇青铜5:@壹公升我写的drawing（）方法是在run方法中，whlle（isDrawing），isDrawing= true，这里是个死循环，线程一直在开着，感觉if（isDrawing）{drawing方法的内容}没有用吧

Android SurfaceView入门学习

1. SurfaceView

2. SurfaceView的使用模板

2.1 创建SurfaceView

2.2 初始化`SurfaceView`

2.3 使用SurfaceView

2.4 完整的模板代码

3. 简单使用

4. 自己想的优化

思路不对，每次在 ACTION_DOWN时， new 一个线程不行，创建再销毁一个线程开销太大。当作一个错误示例吧

5. 最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android基础知识

Android开发

Android进阶

Android 基础知识

android开发

surfaceview

Android内容

SurfaceView

Android SurfaceView入门学习

1. SurfaceView

2. SurfaceView的使用模板

2.1 创建SurfaceView

2.2 初始化SurfaceView

2.3 使用SurfaceView

2.4 完整的模板代码

3. 简单使用

4. 自己想的优化

思路不对，每次在 ACTION_DOWN时， new 一个线程不行，创建再销毁一个线程开销太大。当作一个错误示例吧

5. 最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2.2 初始化`SurfaceView`