关于android:Android入门教程-自定义View二

SurfaceView 在 Android 零碎中，是一种非凡的视图。它领有独立的绘图外表，即它不与宿主窗口共享同一个绘图外表。

因为领有独立的绘图外表，因而 SurfaceView 的 UI 就能够在一个独立的线程中进行绘制，又因为不会占用主线程资源，使用 SurfaceView 能够实现简单而高效的 UI，另一方面又不会导致用户输出得不到及时响应。比拟适宜利用在视频播放，图片浏览，对画面要求高的游戏下面。

SurfaceView 相当于是在屏幕外面，而屏幕给它开了一个洞。给它设置背景色就能把它盖住。

应用 SurfaceView 的起因之一，是可能在子线程中更新图像。加重 UI 线程的压力。
所有 SurfaceView 和 SurfaceHolder.Callback 的办法都应该在 UI 线程里调用，一般来说就是应用程序主线程。渲染线程所要拜访的各种变量应该作同步解决。要确保绘图线程仅在 surface 可用期间进行绘图。
SurfaceView 次要由 SurfaceHolder 来管制，holder 相当于一个控制器。

外围要点

View：必须在 UI 的主线程中更新画面，用于被动更新画面。
SurfaceView：UI 线程和子线程中都能够。在一个新启动的线程中从新绘制画面，被动更新画面。
```
java.lang.Object
android.view.View
android.view.SurfaceView
```

创立一个类继承 SurfaceView 并实现 SurfaceHolder.Callback 接口。

public class MySView extends SurfaceView implements SurfaceHolder.Callback {.........}

获取 SurfaceHolder

在构造函数中获取 SurfaceHolder。并增加回调。

public MySView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
    holder = getHolder();
    holder.addCallback(this);
    // ......
}

复写办法

@Override
public void surfaceCreated(SurfaceHolder holder) {Log.d(TAG, "surfaceCreated");
    drawThread = new DrawThread(holder);// 创立一个绘图线程
    drawThread.start();}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {Log.d(TAG, "surfaceChanged");
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {drawThread.closeThread();// 销毁线程
    Log.d(TAG, "surfaceDestroyed");
}

当 Activity 不可见时，SurfaceView 会调用 surfaceDestroyed 办法。此时就要销毁绘图线程。

绘图子线程

SurfaceView 中绘图操作是在子线程中进行的。失常来说子线程不能操作 UI。然而咱们能够应用 SurfaceHolder 提供的办法锁定画布，绘图实现后开释并更新画布。上面的线程提供了进行、复原和完结等性能。

class DrawThread extends Thread {

    private SurfaceHolder mmHolder;
    private boolean mmRunning;
    private boolean mmIsPause;

    public DrawThread(SurfaceHolder holder) {
        this.mmHolder = holder;
        mmRunning = true;
    }

    @Override
    public void run() {while (mmRunning && !isInterrupted()) {if (!mmIsPause) {
                Canvas canvas = null;
                try {synchronized (mmHolder) {canvas = holder.lockCanvas();        // 锁定画布，取得返回的画布对象 Canvas
                        canvas.drawColor(bgSurfaceViewColor);// 设置画布背景色彩
                        // 绘图操作......
                    }
                } catch (Exception e) {e.printStackTrace();
                } finally {if (canvas != null) {mmHolder.unlockCanvasAndPost(canvas);// 开释画布，并提交扭转。}
                    pauseThread();}
            } else {onThreadWait();
            }
        }
    }

    public synchronized void pauseThread() {mmIsPause = true;}

    /**
 * 线程期待, 不提供给内部调用
 */
    private void onThreadWait() {
        try {synchronized (this) {this.wait();
            }
        } catch (Exception e) {e.printStackTrace();
        }
    }

    public synchronized void resumeThread() {
        mmIsPause = false;
        this.notify();}

    public synchronized void closeThread() {
        try {
            mmRunning = false;
            notify();
            interrupt();} catch (Exception e) {e.printStackTrace();
        }
    }
}

layout 中应用

切记不可在 layout 中设置 background，色彩会间接把 SurfaceView 挡住。

<com.rustfisher.fisherandroidchart.MySView
    android:id="@+id/mySurfaceView"
    android:layout_width="match_parent"
    android:layout_height="230dp" />

一条折线，依据最大最小值主动缩放上上限。

继承 View
数据应用 FloatBuffer 存储
可扭转显示窗口的大小

可指定坐标轴，折线和字体色彩

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.util.Log;
import android.util.TypedValue;
import android.view.View;

import java.nio.FloatBuffer;

public class AutoLineChart extends View {private static final String TAG = "rustApp" + AutoLineChart.class.getSimpleName();

  private float yMax = 1.6f;
  private float yMin = -1.0f;

  float yAxisZoomLimitMax = 1.6f;
  float yAxisZoomLimitMin = -1.0f; // 放大 y 轴的极限值

  // Y 轴主动缩放时的增减间隔
  float axisYPerStep = 0.1f;

  // 图表线条在 view 顶部留出的间距
  float viewYStart = 2;
  float axisTextSize = 10;

  private int onShowPointsCount = 500;  // 以后显示的数据个数
  int onShowMinPoints = 100;            // 至多要显示的数据个数
  private int maxPoint = 9000;          // 数据存储最大个数

  // 坐标轴线条宽度
  float axisLineWid = 1f;

  int dataLineWid = 4;

  // 数据线色彩
  private int dataColor = Color.parseColor("#eaffe9");

  // 图表中的背景线条色彩
  private int mainBgLineColor = Color.parseColor("#535353");

  // 坐标轴色彩
  private int axisColor = Color.WHITE;

  // 坐标值字体色彩
  private int axisTextColor = Color.WHITE;

  // 背景色
  private int viewBgColor = Color.parseColor("#222222");

  Rect rectText = new Rect();

  private float xStep = 1.0f;
  private float viewWidth;
  private float viewHeight;
  private float botLeftXOnView = 0; // 图表左下点在 view 中的 x 坐标
  private float botLeftYOnView = 0;
  private float originYToBottom = 20; // 图表原点间隔 view 底部的间隔

  private FloatBuffer dataBuffer;

  private Paint bgPaint;
  private Paint linePaint;

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

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

  public AutoLineChart(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);
      init(context);
  }

  public int getMaxPoint() {return maxPoint;}

  public void setOnShowPointsCount(int onShowPointsCount) {this.onShowPointsCount = onShowPointsCount;}

  public int getOnShowPointsCount() {return onShowPointsCount;}

  public int getOnShowMinPoints() {return onShowMinPoints;}

  public void addData(float data) {dataBuffer.put(data);
      if (dataBuffer.position() > (dataBuffer.capacity() * 2 / 3)) {float[] bufferArr = dataBuffer.array();
          System.arraycopy(bufferArr, dataBuffer.position() - maxPoint, bufferArr, 0, maxPoint);
          dataBuffer.position(maxPoint);
//            Log.d(TAG, "把以后数据挪动到 buffer 起始地位" + dataBuffer);
      }
      invalidate();}

  private void init(Context context) {dataBuffer = FloatBuffer.allocate(3 * maxPoint); // 调配 3 倍的空间
      bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
      linePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
      bgPaint.setStrokeWidth(axisLineWid);
      bgPaint.setStyle(Paint.Style.STROKE);
      bgPaint.setColor(mainBgLineColor);
      linePaint.setStrokeWidth(dataLineWid);
      linePaint.setStyle(Paint.Style.STROKE);
      linePaint.setColor(dataColor);

      botLeftXOnView = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 32, context.getResources().getDisplayMetrics());
      originYToBottom = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, context.getResources().getDisplayMetrics());
      viewYStart = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20, context.getResources().getDisplayMetrics());
      axisLineWid = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, context.getResources().getDisplayMetrics());
      axisTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 10, context.getResources().getDisplayMetrics());
  }

  @Override
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);
      viewWidth = getWidth();
      viewHeight = getHeight();
      botLeftYOnView = viewHeight - originYToBottom;
  }

  @Override
  protected void onDraw(Canvas canvas) {super.onDraw(canvas);
      canvas.drawColor(viewBgColor);
      xStep = (viewWidth - botLeftXOnView) / (onShowPointsCount - 1);
      float maxData = 0.1f;
      float minData = 0;

      int dataStartIndexInBuffer = 0; // 数据在 buffer 中的起始下标
      if (dataBuffer.position() > onShowPointsCount) {dataStartIndexInBuffer = dataBuffer.position() - onShowPointsCount;
      }
      float[] bufferArr = dataBuffer.array();
      for (int i = dataStartIndexInBuffer; i < dataBuffer.position(); i++) {if (bufferArr[i] < minData) {minData = bufferArr[i];
          } else if (bufferArr[i] > maxData) {maxData = bufferArr[i];
          }
      }

      zoomYAxis(maxData, minData);
      drawBgLines(canvas);
      drawWave(canvas, dataStartIndexInBuffer);
  }

  // 缩放 Y 轴
  private void zoomYAxis(float maxData, float minData) {if (maxData < yAxisZoomLimitMax) {yMax = yAxisZoomLimitMax;} else if (maxData < yMax) {while (maxData < yMax) {yMax -= axisYPerStep;}
          yMax += axisYPerStep;
      } else if (maxData > yMax) {while (maxData > yMax) {yMax += axisYPerStep;}
      }

      if (minData > yAxisZoomLimitMin) {yMin = yAxisZoomLimitMin;} else if (minData > yMin) {while (minData > yMin) {yMin += axisYPerStep;}
          yMin -= axisYPerStep;
      } else if (minData < yMin) {yMin -= axisYPerStep;}
  }

  private void drawBgLines(Canvas canvas) {
      // 画坐标轴
      bgPaint.setStyle(Paint.Style.FILL);
      bgPaint.setStrokeWidth(axisLineWid);
      bgPaint.setTextSize(axisTextSize);
      bgPaint.setTextAlign(Paint.Align.RIGHT);

      for (float y = 0; y <= yMax; y += 0.5) {drawYAxis(canvas, y);
      }
      for (float y = 0; y >= yMin; y -= 0.5) {drawYAxis(canvas, y);
      }
      bgPaint.setColor(axisColor);
      canvas.drawLine(botLeftXOnView, viewYStart / 2, botLeftXOnView, botLeftYOnView + viewYStart / 2, bgPaint);
//        canvas.drawLine(botLeftXOnView, botLeftYOnView, viewWidth, botLeftYOnView, bgPaint); // x 轴
  }

  private void drawYAxis(Canvas canvas, float axisYValue) {
      final float yDataRange = yMax - yMin;
      final float yAxisRangeOnView = botLeftYOnView - viewYStart;
      float aY = botLeftYOnView - (axisYValue - yMin) / yDataRange * yAxisRangeOnView;
      bgPaint.setColor(axisColor);
      canvas.drawLine(botLeftXOnView - 20, aY, botLeftXOnView, aY, bgPaint);

      String axisText = String.valueOf(axisYValue);
      bgPaint.getTextBounds(axisText, 0, axisText.length(), rectText); // 获取文本的宽高
      canvas.drawText(axisText, botLeftXOnView - rectText.width() / 2, aY + rectText.height() / 2, bgPaint);

      bgPaint.setColor(mainBgLineColor);
      canvas.drawLine(botLeftXOnView, aY, viewWidth, aY, bgPaint);
  }

  private void drawWave(Canvas canvas, int dataStartIndexInBuffer) {
      final float yDataRange = yMax - yMin;
      final float yAxisRangeOnView = botLeftYOnView - viewYStart;
      final float yDataStep = yAxisRangeOnView / yDataRange;

      float[] dataArr = dataBuffer.array();
      for (int i = dataStartIndexInBuffer; i < dataBuffer.position() - 1; i++) {canvas.drawLine(botLeftXOnView + (i - dataStartIndexInBuffer) * xStep, getYL(dataArr[i], yDataStep),
                  botLeftXOnView + (i - dataStartIndexInBuffer + 1) * xStep, getYL(dataArr[i + 1], yDataStep),
                  linePaint);
      }
  }

  private float getYL(final float yData, float yDataStep) {return botLeftYOnView - (yData - yMin) * yDataStep;
  }
}

1. 讲下 View 的绘制流程？

参考答复：

View 的工作流程次要是指 measure、layout、draw 这三大流程，即测量、布局和绘制，

measure 确定 View 的测量宽 / 高;
layout 确定 View 的最终宽 / 高和四个顶点的地位;
draw 则将 View 绘制到屏幕上;

View 的绘制过程遵循如下几步：

绘制背景 background.draw(canvas)
绘制本人（onDraw）
绘制 children（dispatchDraw）
绘制装璜（onDrawScollBars）

2. MotionEvent 是什么？蕴含几种事件？什么条件下会产生？

参考答复：

MotionEvent 是手指接触屏幕后所产生的一系列事件。典型的事件类型有如下：

ACTION_DOWN：手指刚接触屏幕
ACTION_MOVE：手指在屏幕上挪动
ACTION_UP：手指从屏幕上松开的一瞬间
ACTION_CANCELL：手指放弃按下操作，并从以后控件转移到外层控件时触发

失常状况下，一次手指触摸屏幕的行为会触发一系列点击事件，思考如下几种状况：

点击屏幕后松开，事件序列：DOWN→UP
点击屏幕滑动一会再松开，事件序列为 DOWN→MOVE→…..→MOVE→UP

3. 形容一下 View 事件传递散发机制？

参考答复：

View 事件散发实质就是对 MotionEvent 事件散发的过程。即当一个 MotionEvent 产生后，零碎将这个点击事件传递到一个具体的 View 上

点击事件的传递程序：Activity（Window）→ViewGroup→ View

事件散发过程由三个办法共同完成：

dispatchTouchEvent：用来进行事件的散发。如果事件可能传递给以后 View，那么此办法肯定会被调用，返回后果受以后 View 的 onTouchEvent 和上级 View 的 dispatchTouchEvent 办法的影响，示意是否耗费以后事件
onInterceptTouchEvent：在上述办法外部调用，对事件进行拦挡。该办法只在 ViewGroup 中有，View（不蕴含 ViewGroup）是没有的。一旦拦挡，则执行 ViewGroup 的 onTouchEvent，在 ViewGroup 中处理事件，而不接着分发给 View。且只调用一次，返回后果示意是否拦挡以后事件
onTouchEvent：在 dispatchTouchEvent 办法中调用，用来解决点击事件，返回后果示意是否耗费以后事件

4. 如何解决 View 的事件抵触？举个开发中遇到的例子？

参考答复：

常见开发中事件抵触的有 ScrollView 与 RecyclerView 的滑动抵触、RecyclerView 内嵌同时滑动同一方向

滑动抵触的解决规定：

对于因为内部滑动和外部滑动方向不统一导致的滑动抵触，能够依据滑动的方向判断谁来拦挡事件。
对于因为内部滑动方向和外部滑动方向统一导致的滑动抵触，能够依据业务需要，规定何时让内部 View 拦挡事件，何时由外部 View 拦挡事件。
对于下面两种状况的嵌套，绝对简单，可同样依据需要在业务上找到突破点。

滑动抵触的实现办法：

内部拦截法：指导击事件都先通过父容器的拦挡解决，如果父容器须要此事件就拦挡，否则就不拦挡。具体方法：须要重写父容器的 onInterceptTouchEvent 办法，在外部做出相应的拦挡。
外部拦截法：指父容器不拦挡任何事件，而将所有的事件都传递给子容器，如果子容器须要此事件就间接耗费，否则就交由父容器进行解决。具体方法：须要配合 requestDisallowInterceptTouchEvent 办法。

5. scrollTo() 和 scollBy() 的区别？

参考答复：

scollBy 外部调用了 scrollTo，它是基于以后地位的绝对滑动；而 scrollTo 是相对滑动，因而如果应用雷同输出参数屡次调用 scrollTo 办法，因为 View 的初始地位是不变的，所以只会呈现一次 View 滚动的成果
两者都只能对 View 内容的滑动，而非使 View 自身滑动。能够应用 Scroller 有适度滑动的成果

6. Scroller 是怎么实现 View 的弹性滑动？

参考答复：

在 MotionEvent.ACTION_UP 事件触发时调用 startScroll() 办法，该办法并没有进行理论的滑动操作，而是记录滑动相干量（滑动间隔、滑动工夫）
接着调用 invalidate/postInvalidate() 办法，申请 View 重绘，导致 View.draw 办法被执行
当 View 重绘后会在 draw 办法中调用 computeScroll 办法，而 computeScroll 又会去向 Scroller 获取以后的 scrollX 和 scrollY；而后通过 scrollTo 办法实现滑动；接着又调用 postInvalidate 办法来进行第二次重绘，和之前流程一样，如此重复导致 View 一直进行小幅度的滑动，而屡次的小幅度滑动就组成了弹性滑动，直到整个滑动过成完结.

Android 零根底入门教程视频参考

关于android:Android入门教程-自定义View二

SurfaceView 简介与应用

外围要点

应用办法

获取 SurfaceHolder

复写办法

绘图子线程

layout 中应用

Android 主动缩放上上限的折线图

自定义 View 面试题

1. 讲下 View 的绘制流程？

2. MotionEvent 是什么？蕴含几种事件？什么条件下会产生？

3. 形容一下 View 事件传递散发机制？

4. 如何解决 View 的事件抵触？举个开发中遇到的例子？

5. scrollTo() 和 scollBy() 的区别？

6. Scroller 是怎么实现 View 的弹性滑动？

Just My Socks（注册教程内含优惠码）

关于android:Android入门教程-自定义View二

SurfaceView 简介与应用

外围要点

应用办法

获取 SurfaceHolder

复写办法

绘图子线程

layout 中应用

Android 主动缩放上上限的折线图

自定义 View 面试题

1. 讲下 View 的绘制流程？

2. MotionEvent 是什么？蕴含几种事件？什么条件下会产生？

3. 形容一下 View 事件传递散发机制？

4. 如何解决 View 的事件抵触？举个开发中遇到的例子？

5. scrollTo() 和 scollBy() 的区别？

6. Scroller 是怎么实现 View 的弹性滑动？

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）