Android-View的孿生兄弟---SurfaceView入門

SurfaceView入門

為什麼使用SurfaceView

Android已經提供了View繪圖處理，View可以滿足大部分的繪圖場景，View通過重新整理來重回視圖，android系統通過發出VSYNC信号進行視圖的重繪，重新整理間隔為16ms，超過16ms，我們可能就會感到卡頓了。對于邏輯太多，操作複雜的場景，頻繁的重新整理界面，就會阻塞主線程，也會導緻界面卡頓。

很多時候，我們在自定義View的Log日志看到這樣的警告

這些告警就是因為在繪制過程中，處理邏輯太多造成的。

為了避免這些問題的産生，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

實作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循環中，不斷改變坐标繪制就可以了。

示範：自動繪制(這裡隻展示圖檔)

Android-View的孿生兄弟---SurfaceView入門

代碼

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路徑，代碼如下：

示範：手寫王子豬

Android-View的孿生兄弟---SurfaceView入門

代碼

@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入門

Android-View的孿生兄弟---SurfaceView入門

SurfaceView入門

為什麼使用SurfaceView

SurfaceView與View的差別

SurfaceView的使用

第一個：繪制cos函數

第二個：繪圖闆

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯