2020年12月22日星期二

Android-View的孪生兄弟---SurfaceView入门

SurfaceView入门

为什么使用SurfaceView

Android已经提供了View绘图处理，View可以满足大部分的绘图场景，View通过刷新来重回视图，android系统通过发出VSYNC信号进行视图的重 绘，刷新间隔为16ms，超过16ms，我们可能就会感到卡顿了。对于逻辑太多，操作复杂的场景，频繁的刷新界面，就会阻塞主线程，也会导致界面卡顿。
很多时候，我们在自定义View的Log日志看到这样的警告

Skipped 47 frames! The application may be doing too much work on it`s main thread.

这些告警就是因为在绘制过程中，处理逻辑太多造成的。
为了避免这些问题的产生，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
public class TempleSurfaceView extends SurfaceView implements 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循环中，不断改变坐标绘制就可以了。
演示：自动绘制(这里只展示图片)
在这里插入图片描述
代码

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路径，代码如下：
演示：手写 王子猪
在这里插入图片描述

代码

 @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; }}

欢迎关注公众号 拖鞋王子猪 一起开心起来。









原文转载：http://www.shaoqun.com/a/502588.html

跨境电商：https://www.ikjzd.com/

点通：https://www.ikjzd.com/w/1913

海拍客：https://www.ikjzd.com/w/1742


SurfaceView入门为什么使用SurfaceViewAndroid已经提供了View绘图处理，View可以满足大部分的绘图场景，View通过刷新来重回视图，android系统通过发出VSYNC信号进行视图的重绘，刷新间隔为16ms，超过16ms，我们可能就会感到卡顿了。对于逻辑太多，操作复杂的场景，频繁的刷新界面，就会阻塞主线程，也会导致界面卡顿。很多时候，我们在自定义View的Log日志看
FEN：FEN
海维：海维
今年就这样耍 陕西全年旅游时刻表：今年就这样耍 陕西全年旅游时刻表
致跨境电商新卖家 - 极具亚马逊特色的店铺是如何运营的？：致跨境电商新卖家 - 极具亚马逊特色的店铺是如何运营的？
三亚凤凰岛图片 ：三亚凤凰岛图片
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)