SurfaceView入门

本章目录

• Part One：SurfaceView概述
• Part Two：SurfaceView代码模板
• Part Three：SurfaceView案例

---

Part One：SurfaceView概述

通常情况下，与用户交互的View和响应时间都是在主线程，也就是UI线程去处理的。而网络访问之类的耗时操作放在子线程中执行，避免阻塞主线程。而耗时操作获取到的数据想要更新UI，要么使用接口回调，要么用Handler之类的发消息。最终，所有更新UI的操作都要在主线程中执行。
像我们一直在讲的案例里，我们使用了自定义View去绘制一些动画，都是在主线程频繁的刷新，此时会造成一个问题：
以下摘自《安卓群英传》

Android提供了View进行绘图处理，View可以满足大部分的绘图需求，但在某些时候也会心有余而力不足。我们知道，View通过刷新来重绘视图，Android 系统通过发出VSYNC信号来进行屏幕的重绘，刷新的时间间隔为16ms。如果在16ms内View完成了你所需要执行的所有操作，那么用户在视觉上就不会产生卡顿的感觉；而如果执行的操作逻辑太多，特别是需要频繁刷新的界面上，例如游戏界面，就会不断阻塞主线程，从而导致画面卡顿。很多情况下，在自定义View的log中会看到如下的警告：
“Skipped 47 frames! The application may be doing too much work on its main thread.”
为了避免这一问题的产生，Android系统提供了SurfaceView组件。

View和SurfaceView的区别：

• View主要使用于被动更新，比如下棋游戏，间隔时间比较长；而SurfaceView主要适用于主动更新，比如视图本身频繁刷新界面。
• View必须在UI的主线程中更新画面，而surfaceView是在一个新起的单独线程中可以重新绘制画面。
• View 在绘图时没有使用双缓冲机制，而 SurfaceView 在底层实现机制中就已经实现了双缓冲机制。（注：双缓冲是2D游戏开发中常用的一种机制）。

Part Two：SurfaceView代码模板

1. 创建一个自定义HeartSurfaceView继承自SurfaceView，写好相应的构造方法；并且实现SurfaceHolder.Callback（在底层的Surface状态发生变化的时候通知SurfaceView）和Runnable（子线程中要执行的操作）接口，重写几个方法。

package com.terana.mycustomview.customview;


import android.content.Context;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class HeartSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable{
    public HeartSurfaceView(Context context) {
        this(context, null);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initVariable();
    }

    /**
     * 初始化操作
     */
    private void initVariable() {

    }

    /**
     * 当Surface第一次创建后会立即调用该函数。一般情况下都是在另外的线程来绘制界面，
     * 所以不要在这个函数中绘制Surface。
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {}

    /**
     *当Surface的状态（大小和格式）发生变化的时候会调用该函数，
     * 在surfaceCreated调用后该函数至少会被调用一次。
     * 类似于自定义View的onSizeChanged
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        
    }

    /**
     * 当Surface被摧毁前会调用该函数，该函数被调用后就不能继续使用Surface了，
     * 一般在该函数中来清理使用的资源。
     */
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {}

    /**
     * 子线程中要执行的业务
     */
    @Override
    public void run() {

    }
}

2. 初始化几个通用属性，为将来绘制作准备。除了下面写的之外，可根据具体业务自行添加属性。

    private SurfaceHolder surfaceHolder;//用于获取Surface
    private Canvas canvas;//绘图所使用的Canvas
    private boolean isDrawing;//用于判断子线程是否正在绘制中，true是正在绘制，false是绘制完成

    public HeartSurfaceView(Context context) {
        this(context, null);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initVariable();
    }

    /**
     * 初始化操作
     */
    private void initVariable() {
        surfaceHolder = getHolder();
        surfaceHolder.addCallback(this);//注册回调
        setZOrderOnTop(true);//设置画布  背景透明
        surfaceHolder.setFormat(PixelFormat.TRANSLUCENT);
    }

3. 开始绘制
   首先，用SurfaceHolder的Canvas lockCanvas()方法或者Canvas lockCanvas(Rect dirty)方法获取Canvas对象。如果不需要缓存，用lockCanvas()或者lockCanvas(null)获取对象即可；如果只需要重绘变化的部分，可以调用lockCanvas(Rect dirty)函数来指定一个dirty区域，这样该区域外的内容会缓存起来。
   然后，在子线程中使用Canvas对象进行绘制，具体逻辑等同于自定义View的onDraw方法。
   最后，调用unlockCanvasAndPost(Canvas canvas)提交，通知系统Surface已经绘制完成，这样系统会把绘制完的内容显示出来。因为在调用lockCanvas函数获取Canvas后，SurfaceView会获取Surface的一个同步锁直到调用unlockCanvasAndPost(Canvas canvas)函数才释放该锁，这种同步机制保证在Surface绘制过程中不会被改变（被摧毁、修改）。

package com.terana.mycustomview.customview;


import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class HeartSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    private SurfaceHolder surfaceHolder;//用于获取Surface
    private Canvas canvas;//绘图所使用的Canvas
    private boolean isDrawing;//用于判断子线程是否正在绘制中，true是正在绘制，false是绘制完成

    public HeartSurfaceView(Context context) {
        this(context, null);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initVariable();
    }

    /**
     * 初始化操作
     */
    private void initVariable() {
        surfaceHolder = getHolder();
        surfaceHolder.addCallback(this);//注册回调
        setZOrderOnTop(true);//设置画布  背景透明
        surfaceHolder.setFormat(PixelFormat.TRANSLUCENT);
    }

    /**
     * 当Surface第一次创建后会立即调用该函数。一般情况下都是在另外的线程来绘制界面，
     * 所以不要在这个函数中绘制Surface。
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        //开始绘制
        isDrawing = true;
    }

    /**
     * 当Surface的状态（大小和格式）发生变化的时候会调用该函数，
     * 在surfaceCreated调用后该函数至少会被调用一次。
     * 类似于自定义View的onSizeChanged
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        new Thread(this).start();
    }

    /**
     * 当Surface被摧毁前会调用该函数，该函数被调用后就不能继续使用Surface了，
     * 一般在该函数中来清理使用的资源。
     */
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        //结束绘制
        isDrawing = false;
    }

    /**
     * 子线程中要执行的业务
     */
    @Override
    public void run() {
        while (isDrawing) {
            drawOnCanvas();
        }

    }

    //具体的绘制逻辑
    private void drawOnCanvas() {
        //用try{}catch{}finally{}包裹起来，保证无论发生何种意外，都能讲Canvas提交
        try {
            canvas = surfaceHolder.lockCanvas();//获得Canvas对象
            if (canvas != null) {
                //绘制背景
                canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                //TODO 绘图操作
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (canvas != null){
                surfaceHolder.unlockCanvasAndPost(canvas);            }
        }
    }
}

之后，在TODO部分进行具体的绘制即可。

Part Three：SurfaceView案例

package com.terana.mycustomview.customview;


import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Point;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffColorFilter;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import com.terana.mycustomview.R;

import java.util.ArrayList;
import java.util.List;

public class HeartSurfaceView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
    private SurfaceHolder surfaceHolder;//用于获取Surface
    private Canvas canvas;//绘图所使用的Canvas
    private boolean isDrawing;//用于判断子线程是否正在绘制中，true是正在绘制，false是绘制完成
    private int offsetX;//偏移量，为了让桃心处于屏幕正中央
    private int offsetY;
    private Bitmap bitmapFlower;
    private RectF rectF;

    public HeartSurfaceView(Context context) {
        this(context, null);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr) {
        this(context, attrs, defStyleAttr, 0);
    }

    public HeartSurfaceView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        initVariable();
    }

    /**
     * 初始化操作
     */
    private void initVariable() {
        surfaceHolder = getHolder();
        surfaceHolder.addCallback(this);//注册回调
        setZOrderOnTop(true);//设置画布  背景透明
        surfaceHolder.setFormat(PixelFormat.TRANSLUCENT);
        bitmapFlower = BitmapFactory.decodeResource(getResources(), R.drawable.flower);
        rectF = new RectF();
    }

    /**
     * 当Surface第一次创建后会立即调用该函数。一般情况下都是在另外的线程来绘制界面，
     * 所以不要在这个函数中绘制Surface。
     */
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        //开始绘制
        isDrawing = true;
    }

    /**
     * 当Surface的状态（大小和格式）发生变化的时候会调用该函数，
     * 在surfaceCreated调用后该函数至少会被调用一次。
     * 类似于自定义View的onSizeChanged
     */
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        offsetX = width / 2;
        offsetY = height / 2 - 88;
        new Thread(this).start();
    }

    /**
     * 当Surface被摧毁前会调用该函数，该函数被调用后就不能继续使用Surface了，
     * 一般在该函数中来清理使用的资源。
     */
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        //结束绘制
        isDrawing = false;
    }

    /**
     * 子线程中要执行的业务
     */
    @Override
    public void run() {
        float angle = 10;
        while (true) {
            Point p = getHeartPoint(angle);
            //循环比较新的坐标位置是否可以创建花朵，为了防止花朵太密集
            for (int i = 0; i < heartPoints.size(); i++) {
                Point bp = heartPoints.get(i);
                float distance = (float) Math.sqrt(Math.pow(p.x - bp.x, 2) + Math.pow(p.y - bp.y, 2));
                if (distance < 48) {
                    isDrawing = false;
                    break;
                }
            }
            heartPoints.add(p);
            if (angle >= 30) {
                break;
            } else {
                angle = angle + 0.2f;
            }
            drawOnCanvas();
        }
    }

    //具体的绘制逻辑
    private void drawOnCanvas() {
        //用try{}catch{}finally{}包裹起来，保证无论发生何种意外，都能讲Canvas提交
        try {
            canvas = surfaceHolder.lockCanvas();//获得Canvas对象
            if (canvas != null) {
                //绘制背景
                canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                //TODO 绘图操作
                for (int i = 0; i < heartPoints.size(); i++) {
                    rectF.left = heartPoints.get(i).x - 24;
                    rectF.top = heartPoints.get(i).y - 24;
                    rectF.bottom = rectF.top + 48;
                    rectF.right = rectF.left + 48;
                    Paint p = new Paint();
                    p.setColorFilter(new PorterDuffColorFilter(Color.parseColor("#389deb"), PorterDuff.Mode.SRC_IN));
                    canvas.drawBitmap(bitmapFlower, null, rectF, p);
                }
                Thread.sleep(20);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (canvas != null) {
                surfaceHolder.unlockCanvasAndPost(canvas);
            }
        }
    }

    private List<Point> heartPoints = new ArrayList<>();

    /**
     * 桃心线位置
     */
    public Point getHeartPoint(float angle) {
        float t = (float) (angle / Math.PI);
        float x = (float) (32 * (16 * Math.pow(Math.sin(t), 3)));
        float y = (float) (-32 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)));
        return new Point(offsetX + (int) x, offsetY + (int) y);
    }
}