SurfaceView入門(mén)
為什么使用SurfaceView
Android已經(jīng)提供了View繪圖處理熊赖，View可以滿(mǎn)足大部分的繪圖場(chǎng)景，View通過(guò)刷新來(lái)重回視圖窒所，android系統(tǒng)通過(guò)發(fā)出VSYNC信號(hào)進(jìn)行視圖的重 繪鲸拥，刷新間隔為16ms，超過(guò)16ms掉分，我們可能就會(huì)感到卡頓了俭缓。對(duì)于邏輯太多，操作復(fù)雜的場(chǎng)景酥郭，頻繁的刷新界面华坦，就會(huì)阻塞主線(xiàn)程，也會(huì)導(dǎo)致界面卡頓不从。
很多時(shí)候惜姐，我們?cè)谧远xView的Log日志看到這樣的警告
Skipped 47 frames! The application may be doing too much work on it`s main thread.
這些告警就是因?yàn)樵诶L制過(guò)程中，處理邏輯太多造成的椿息。
為了避免這些問(wèn)題的產(chǎn)生歹袁，Android系統(tǒng)提供了SurfaceView，SurfaceView是VIew的孿生兄弟寝优，但它與View還是有所不同的条舔。
SurfaceView與View的區(qū)別
- View適用于主動(dòng)更新的情況，而SurfaceView主要用于被動(dòng)更新乏矾，比如：頻繁的刷新.
- View在主線(xiàn)程里面進(jìn)行刷新孟抗，而SurfaceView主要通過(guò)一個(gè)子線(xiàn)程來(lái)進(jìn)行頁(yè)面的刷新
- View在繪圖時(shí)沒(méi)有使用雙緩沖機(jī)制，而SurfaceView在底層實(shí)現(xiàn)機(jī)制中已經(jīng)實(shí)現(xiàn)了雙緩沖機(jī)制
總結(jié)起來(lái)就是钻心，如果自定義View需要頻繁刷新凄硼，或者刷新時(shí)數(shù)據(jù)處理大，那就可以考慮使用SurfaceView來(lái)取代View捷沸。
SurfaceView的使用
SurfaceView的使用帆喇，要比View復(fù)雜，但是它也有一套模板來(lái)使用亿胸，大部分都可以嵌套這個(gè)模板進(jìn)行使用坯钦。
- 創(chuàng)建SurfaceView
創(chuàng)建自定義的SurfaceView繼承SurfaceView预皇，并實(shí)現(xiàn)兩個(gè)接口，SurfaceHolder.Callback婉刀、Runnable
public class TempleSurfaceView extends SurfaceView implements SurfaceHolder.Callback,Runnable{}
實(shí)現(xiàn)SurfaceHolder.Callback接口吟温，需要實(shí)現(xiàn)下面的方法：
//創(chuàng)建
@Override
public void surfaceCreated(SurfaceHolder holder) {
}
//改變
@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
}
//銷(xiāo)毀
@Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
實(shí)現(xiàn)Runnable接口，需要實(shí)現(xiàn)下面的方法：
@Override
public void run() {
//子線(xiàn)程
}
- 初始化SurfaceView
在自定義的SurfaceView構(gòu)造方法中突颊，需要對(duì)SurfaceView進(jìn)行初始化
// SurfaceHolder
private SurfaceHolder mHolder;
// 用于繪圖的Canvas
private Canvas mCanvas;
// 子線(xiàn)程標(biāo)志位
private boolean mIsDrawing;
主要是初始化SurfaceHolder對(duì)象鲁豪，并注冊(cè)SurfaceHolder 的回調(diào)方法。
mHolder = getHolder();
mHolder.addCallback(this);
另外兩個(gè)律秃，Canvas和標(biāo)志位爬橡。Canvas與View的onDraw()方法的Canvas一樣，用來(lái)進(jìn)行繪圖棒动，標(biāo)志位是用來(lái)控制線(xiàn)程的糙申，SurfaceView是新起子線(xiàn)程來(lái)繪制的，而這個(gè)標(biāo)志位就是控制子線(xiàn)程的船惨。
- 使用SurfaceView
通過(guò)SurfaceHolder 的lockCanvas(),就可以獲取當(dāng)前的Canvas繪圖對(duì)象柜裸。注意一點(diǎn)，獲取到的Canvas還是之前的Canvas對(duì)象粱锐，而不是一個(gè)新的疙挺。所以之前的繪圖操作將被保留了，如果需要擦除怜浅，可以使用drawColor()來(lái)進(jìn)行清理操作铐然。
繪制的時(shí)候，一般都是利用三個(gè)回調(diào)方法進(jìn)行操作恶座。在surfaceCreated中開(kāi)啟子線(xiàn)程繪制搀暑，而子線(xiàn)程用while (mIsDrawing)的循環(huán)來(lái)不停的繪制，在繪制中奥裸，通過(guò)lockCanvas()方法獲得Canvas對(duì)象進(jìn)行繪制，并通過(guò)unlockCanvasAndPost方法對(duì)畫(huà)布內(nèi)容進(jìn)行提交沪袭。
整個(gè)代碼
public class TempleSurfaceView extends SurfaceView
implements SurfaceHolder.Callback, Runnable {
// SurfaceHolder
private SurfaceHolder mHolder;
// 用于繪圖的Canvas
private Canvas mCanvas;
// 子線(xiàn)程標(biāo)志位
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);
}
}
}
以上代碼滿(mǎn)足大部分場(chǎng)景的SurfaceView繪圖需求湾宙，需要注意的是mHolder.unlockCanvasAndPost(mCanvas)方法放在finally 里面，保證每次內(nèi)容提交冈绊。
接下來(lái)侠鳄，我們看兩個(gè)實(shí)例，
第一個(gè)：繪制cos函數(shù)
類(lèi)似示波器死宣，心電圖那個(gè)波紋一直在繪制的案例伟恶。當(dāng)然View也可以實(shí)現(xiàn)的，但是使用SurfaceView的好處毅该，前面就已經(jīng)說(shuō)了博秫。
要繪制一個(gè)cos函數(shù)潦牛，只需要不斷修改坐標(biāo)點(diǎn)，并滿(mǎn)足cos函數(shù)挡育，就可以巴碗。使用Path對(duì)象來(lái)保存cos函數(shù)的坐標(biāo)點(diǎn)，在子線(xiàn)程中whiel循環(huán)中即寒，不斷改變坐標(biāo)繪制就可以了橡淆。
演示：自動(dòng)繪制(這里只展示圖片)
代碼
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);
}
}
}
第二個(gè)：繪圖板
這個(gè)案例是用SurfaceView實(shí)現(xiàn)一個(gè)簡(jiǎn)單的繪圖板，繪圖的方法和View的一樣母赵，通過(guò)Path對(duì)象來(lái)記錄手指滑動(dòng)的路徑進(jìn)行繪圖逸爵。在SurfaceView的onTouchEvent()中記錄Path路徑，代碼如下：
演示：手寫(xiě) 王子豬
代碼
@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()方法中進(jìn)行繪制凹嘲，代碼如下：
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);
}
}
我們一直在不斷調(diào)用draw()方法师倔，但有時(shí)候不需要這么頻繁。所以施绎，我們可以在子線(xiàn)程用sleep操作溯革，節(jié)省資源，代碼如下：
@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();
}
}
}
通過(guò)draw()方法操作的時(shí)長(zhǎng)來(lái)確定sleep的時(shí)長(zhǎng)谷醉，這是一個(gè)通用的解決方案致稀，一般這個(gè)值在50~100之間。這篇文章只是SurfaceView的入門(mén)俱尼，其他的用法抖单，還有待開(kāi)啟研究。
完整代碼如下：
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;
}
}
王子豬 祝您天天開(kāi)心遇八。
