Android Scroll 详解

雨点打透心脏的1/2处 2022-08-21 06:53 65阅读 0赞

今天，我们就来探讨一下Android中界面滚动效果的相关机制，本篇文章主要讲解一下滚动相关的知识点，之后的文章会涉及实际的代码和原理。希望大家阅读完这篇文章之后，能够了解或者掌握一下知识:

*  Android 视图的组成部分
 *  `mScrollX`和`mScrollY`对视图显示的影响
 *  `scrollTo`和`scrollBy`的使用
 *  `invalidate`和`postInvalidate`的区别

### View的mScrollX和mScrollY ###

我们都知道，`View`中有两个重要的成员变量，`mScrollX`,`mScrollY`.它们分别代表视图内容(view content)水平方向和竖直方向的滚动距离。我们可以通过`setScrollX`和`setScrollY`来个函数来改变它们的值，从而来滚动视图的内容。  
 在这里需要强调的是，`mScrollX`和`mScrollY`会导致视图内容(view content)变化,但是不会影响视图背景(background)。  
 看到这里同学们或许会有写疑问，视图的内容和背景有什么区别呢？视图还有哪些组成部分呢？  
 我们可以从View的`draw`方法中得知View的组成部分。

View显示内容由一下几个部分组成:  
\- 背景(background)  
\- 本身的内容(content)  
\- 子视图  
\- 边界渐变效果(fade effect),上下左右四个边界都可能会有渐变效果，代码中只显示了上边界的渐变效果绘制。  
\- 边框或者装饰效果(decorations),比如滚动条

举个例子吧，我们都知道在布局文件中，`TextView`有两个比较重要的属性:`background`,`text`。`background`可以设置TextView的背景，而`text`则是设置要绘制字体内容。

`mScrollX`和`mScrollY`对除了本身内容外的部分的绘制都有影响。只是不会影响视图背景的绘制。

### 滚动的方向性 ###

我们都知道，在Android的视图中，布局相关的数值都是有方向性的，比如`mLeft`,`mTop`。

![视图坐标轴][20160327182620007]

由上图我们可以知道，Android视图坐标的原点在屏幕的左上方，x轴正方向是向右，y轴正方向是向下。  
 所以，当你将`mLeft`和`mTop`的数值加10并且重绘视图时，视图会向右下移动。  
 那么`mScrollY`和`mScrollX`也在这样一个坐标域中吗？它们的正方向和`mTop`和`mLeft`是一样的吗？是的，它们属于同一个坐标域，方向性相同。  
 但是如果你将`mScrollX`和`mScrollY`的数值都增大10，然后调用`invalidate()`重新绘制界面的话，你会发现视图中的内容都向左上角移动啦！  
 这是怎么回事呢？从概念上你可以先这样解：`mScrollX`和`mScrollY`改变导致View的可视区域的移动，并不是导致View的视图区域的移动。  
 View的视图区域相当于无限大的，你可以在`onDraw`函数中的`canvas`中绘制任意大的图像，但是你会发现，最终屏幕上显示出来的只会是一部分，因为View自身还有大小概念，也就是`measure`和`layout`时，视图会被设置长宽还有界面中位置，这样的话，视图可视区域就被确定啦。  
 做一个形象的比喻。View的可视区域就是一面墙上的窗户，View的视图区域就相当于墙后边的优美景色。墙外风光无线，但是你只能看到窗户中的景色。如果窗户变大啦，外边风景不变，你看到的景色就大了一点；如果窗户向右下角移动了一段距离，你就会发现外边的景色好像是向左上角”移动”了一段距离。

![view scroll example][]

### ScrollTo 和 ScrollBy ###

这两个函数是用来滚动视图的API

大家看源代码很容易就理解了二者的作用和区别:`scrollTo`就是直接改变`mScrollX`和`mScrollY`;而`scrollBy`则是给`mScrollX`和`mScrollY`加上增量。

### invalidate和postInvalidate ###

上边这两个函数都是请求视图重新绘制的API,但是二者的使用有些区别。  
 `invalidate`必须在主线程(UI Thread)中调用，而`postInvalidate`可以在非主线程(Non UI Thread)中调用。  
 除此之外，二者还有点小区别。  
 调用`invalidate`时，它会检查上一次请求的UI重绘是否完成，如果没有完成的话，那么它就什么都不做。

而`postInvalidate`则不会这样，它是向主线程发送个`Message`，然后`handleMessage`时，调用了`invalidate()`函数。

所以，二者的调用时机还是有区别的，就比如使用`Scroller`进行视图滚动时，二者的调用就有所不同

*  手势Drag的实现和原理
 *  手势Fling的实现和原理
 *  OverScroll效果和EdgeEffect效果的实现和原理。

详细代码请查看[我的github][github]

### Drag ###

Drag是最为基本的手势：用户可以使用手指在屏幕上滑动，以拖动屏幕相应内容移动。实现Drag手势其实很简单，步骤如下：

*  在`ACTION_DOWN`事件发生时，调用`getX`和`getY`函数获得事件发生的x,y坐标值，并记录在`mLastX`和`mLastY`变量中。
 *  在`ACTION_MOVE`事件发生时，调用`getX`和`getY`函数获得事件发生的x,y坐标值,将其与`mLastX`和`mLastY`比较，如果二者差值大于一定限制（ScaledTouchSlop）,就执行`scrollBy`函数，进行滚动,最后更新`mLastX`和`mLastY`的值。
 *  在`ACTION_UP`和`ACTION_CANCEL`事件发生时，清空`mLastX`，`mLastY`。

### 多触点Drag ###

上边的代码只适用于单点触控的手势，如果你是两个手指触摸屏幕，那么它只会根据你第一个手指滑动的情况来进行屏幕滚动。更为致命的是，当你先松开第一个手指时，由于我们少监听了`ACTION_POINTER_UP`事件，将会导致屏幕突然滚动一大段距离，因为第二个手指移动事件的x,y值会和第一个手指移动时留下的`mLastX`和`mLastY`比较，导致屏幕滚动。

如果我们要监听并处理多触点的事件，我们还需要对`ACTION_POINTER_DOWN`和`ACTION_POINTER_UP`事件进行监听，并且在`ACTION_MOVE`事件时，要记录所有触摸点事件发生的x,y值。

*  当`ACTION_POINTER_DOWN`事件发生时，我们要记录第二触摸点事件发生的x,y值为`mSecondaryLastX`和`mSecondaryLastY`，和第二触摸点pointer的id为`mSecondaryPointerId`
 *  当`ACTION_MOVE`事件发生时，我们除了根据第一触摸点pointer的x，y值进行滚动外，也要更新`mSecondayLastX`和`mSecondaryLastY`
 *  当`ACTION_POINTER_UP`事件发生时，我们要先判断是哪个触摸点手指被抬起来啦，如果是第一触摸点，那么我们就将坐标值和pointer的id都更换为第二触摸点的数据；如果是第二触摸点，就只要重置一下数据即可。

### Fling ###

当用户手指快速划过屏幕，然后快速立刻屏幕时，系统会判定用户执行了一个Fling手势。视图会快速滚动，并且在手指立刻屏幕之后也会滚动一段时间。Drag表示手指滑动多少距离，界面跟着显示多少距离，而fling是根据你的滑动方向与轻重，还会自动滑动一段距离。Filing手势在android交互设计中应用非常广泛：电子书的滑动翻页、ListView滑动删除item、滑动解锁等。所以如何检测用户的fling手势是非常重要的。  
 在检测Fling时，你需要检测手指在屏幕上滑动的速度，这是你就需要`VelocityTracker`和`Scroller`这两个类啦。

*  我们首先使用`VelocityTracker.obtain()`这个方法获得其实例
 *  然后每次处理触摸时间时，我们将触摸事件通过`addMovement`方法传递给它
 *  最后在处理`ACTION_UP`事件时，我们通过`computeCurrentVelocity`方法获得滑动速度;
 *  我们判断滑动速度是否大于一定数值(MinFlingSpeed),如果大于，那么我们调用`Scroller`的`fling`方法。然后调用`invalidate()`函数。
 *  我们需要重载`computeScroll`方法，在这个方法内，我们调用`Scroller`的`computeScrollOffset()`方法啦计算当前的偏移量，然后获得偏移量，并调用`scrollTo`函数,最后调用`postInvalidate()`函数。
 *  除了上述的操作外，我们需要在处理`ACTION_DOWN`事件时，对屏幕当前状态进行判断，如果屏幕现在正在滚动(用户刚进行了Fling手势)，我们需要停止屏幕滚动。

具体这一套流程是如何运转的，我会在下一篇文章中详细解释，大家也可以自己查阅代码或者google来搞懂其中的原理。

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> @Override
 public boolean onTouchEvent(MotionEvent event) {
 .....
 if (mVelocityTracker == null) {
 //检查速度测量器，如果为null，获得一个
 mVelocityTracker = VelocityTracker.obtain();
 }
 int action = MotionEventCompat.getActionMasked(event);
 int index = -1;
 switch (action) {
 case MotionEvent.ACTION_DOWN:
 ......
 if (!mScroller.isFinished()) { //fling
 mScroller.abortAnimation();
 }
 .....
 break;
 case MotionEvent.ACTION_MOVE:
 ......
 break;
 case MotionEvent.ACTION_CANCEL:
 endDrag();
 break;
 case MotionEvent.ACTION_UP:
 if (mIsBeingDragged) {
 //当手指立刻屏幕时，获得速度，作为fling的初始速度 mVelocityTracker.computeCurrentVelocity(1000,mMaxFlingSpeed);
 int initialVelocity = (int)mVelocityTracker.getYVelocity(mActivePointerId);
 if (Math.abs(initialVelocity) > mMinFlingSpeed) {
 // 由于坐标轴正方向问题，要加负号。
 doFling(-initialVelocity);
 }
 endDrag();
 }
 break;
 default:
 }
 //每次onTouchEvent处理Event时，都将event交给时间
 //测量器
 if (mVelocityTracker != null) {
 mVelocityTracker.addMovement(event);
 }
 return true;
 }
 private void doFling(int speed) {
 if (mScroller == null) {
 return;
 }
 mScroller.fling(0,getScrollY(),0,speed,0,0,-500,10000);
 invalidate();
 }
 @Override
 public void computeScroll() {
 if (mScroller.computeScrollOffset()) {
 scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
 postInvalidate();
 }
 }</code><ul class="pre-numbering" style="margin: 0px; padding: 6px 0px 40px; box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">1</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">2</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">3</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">4</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">5</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">6</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">7</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">8</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">9</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">10</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">11</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">12</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">13</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">14</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">15</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">16</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">17</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">18</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">19</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">20</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">21</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">22</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">23</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">24</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">25</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">26</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">27</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">28</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">29</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">30</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">31</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">32</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">33</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">34</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">35</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">36</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">37</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">38</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">39</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">40</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">41</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">42</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">43</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">44</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">45</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">46</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">47</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">48</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">49</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">50</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">51</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">52</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">53</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">54</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">55</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">56</li><li style="margin: 0px; padding: 0px 5px; box-sizing: border-box;">57</li></ul>

#### OverScroll ####

在Android手机上，当我们滚动屏幕内容到达内容边界时，如果再滚动就会有一个发光效果。而且界面会进行滚动一小段距离之后再回复原位，这些效果是如何实现的呢？我们需要使用`Scroller`和`scrollTo`的升级版`OverScroller`和`overScrollBy`了，还有发光的`EdgeEffect`类。  
 我们先来了解一下相关的API，理解了这些接口参数的含义，你就可以轻松使用这些接口来实现上述的效果啦。

*  int deltaX,int deltaY : 偏移量，也就是当前要滚动的x，y值。
 *  int scrollX,int scrollY : 当前的mScrollX和mScrollY的值。
 *  int maxOverScrollX,int maxOverScrollY: 标示可以滚动的最大的x,y值，也就是你视图真实的长和宽。也就是说，你的视图可视大小可能是100,100,但是视图中的内容的大小为200,200,所以，上述两个值就为200,200
 *  int maxOverScrollX,int maxOverScrollY：允许超过滚动范围的最大值，x方向的滚动范围就是0~maxOverScrollX,y方向的滚动范围就是0~maxOverScrollY。
 *  boolean isTouchEvent:是否在`onTouchEvent`中调用的这个函数。所以，当你在`computeScroll`中调用这个函数时，就可以传入false。

*  int scrollX,int scrollY:就是x，y方向的滚动距离，就相当于`mScrollX`和`mScrollY`。你既可以直接把二者赋值给相应的成员变量，也可以使用`scrollTo`函数。
 *  boolean clampedX,boolean clampY:表示是否到达超出滚动范围的最大值。如果为true，就需要调用`OverScroll`的`springBack`函数来让视图回复原来位置。

*  int startX,int startY:标示当前的滚动值，也就是`mScrollX`和`mScrollY`的值。
 *  int minX,int maxX:标示x方向的合理滚动值
 *  int minY,int maxY:标示y方向的合理滚动值。

相信看完上述的API之后，大家会有很多的疑惑，所以这里我来举个例子。  
 假设视图大小为100\*100。当你一直下拉到视图上边缘，然后在下拉，这时，`mScrollY`已经达到或者超过正常的滚动范围的最小值了，也就是0，但是你的maxOverScrollY传入的是10,所以，`mScrollY`最小可以到达-10,最大可以为110。所以，你可以继续下拉。等到`mScrollY`到达或者超过-10时，clampedY就为true，标示视图已经达到可以OverScroll的边界，需要回滚到正常滚动范围，所以你调用springBack(0,0,0,100)。

然后我们再来看一下发光效果是如何实现的。  
 使用`EdgeEffect`类。一般来说，当你只上下滚动时，你只需要两个`EdgeEffect`实例，分别代表上边界和下边界的发光效果。你需要在下面两个情景下改变`EdgeEffect`的状态，然后在`draw()`方法中绘制`EdgeEffect`

*  处理`ACTION_MOVE`时，如果发现y方向的滚动值超过了正常范围的最小值时，你需要调用上边界实例的`onPull`方法。如果是超过最大值，那么就是调用下边界的`onPull`方法。
 *  在`computeScroll`函数中，也就是说Fling手势执行过程中，如果发现y方向的滚动值超过正常范围时的最小值时，调用`onAbsorb`函数。

然后就是重载`draw`方法，让`EdgeEffect`实例在画布上绘制自己。你会发现，你必须对画布进行移动或者旋转来让`EdgeEffect`绘制出上边界或者下边界的发光的效果，因为`EdgeEffect`对象自己是没有上下左右的概念的。

<code class="language-java hljs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> @Override
 public void draw(Canvas canvas) {
 super.draw(canvas);
 if (mEdgeEffectTop != null) {
 final int scrollY = getScrollY();
 if (!mEdgeEffectTop.isFinished()) {
 final int count = canvas.save();
 final int width = getWidth() - getPaddingLeft() - getPaddingRight();
 canvas.translate(getPaddingLeft(),Math.min(0,scrollY));
 mEdgeEffectTop.setSize(width,getHeight());
 if (mEdgeEffectTop.draw(canvas)) {
 postInvalidate();
 }
 canvas.restoreToCount(count);
 }
 
 }
 if (mEdgeEffectBottom != null) {
 final int scrollY = getScrollY();
 if (!mEdgeEffectBottom.isFinished()) {
 final int count = canvas.save();
 final int width = getWidth() - getPaddingLeft() - getPaddingRight();
 canvas.translate(-width+getPaddingLeft(),Math.max(getScrollRange(),scrollY)+getHeight());
 canvas.rotate(180,width,0);
 mEdgeEffectBottom.setSize(width,getHeight());
 if (mEdgeEffectBottom.draw(canvas)) {
 postInvalidate();
 }
 canvas.restoreToCount(count);
 }
 
 }
 }
 
 @Override
 public boolean onTouchEvent(MotionEvent event) {
 ......
 case MotionEvent.ACTION_MOVE:
 .....
 if (mIsBeingDragged) {
 overScrollBy(0,(int)deltaY,0,getScrollY(),0,getScrollRange(),0,mOverScrollDistance,true);
 final int pulledToY = (int)(getScrollY()+deltaY);
 mLastY = y;
 if (pulledToY<0) {
 mEdgeEffectTop.onPull(deltaY/getHeight(),event.getX(mActivePointerId)/getWidth());
 if (!mEdgeEffectBottom.isFinished()) {
 mEdgeEffectBottom.onRelease();
 }
 } else if(pulledToY> getScrollRange()) {
 mEdgeEffectBottom.onPull(deltaY/getHeight(),1.0f-event.getX(mActivePointerId)/getWidth());
 if (!mEdgeEffectTop.isFinished()) {
 mEdgeEffectTop.onRelease();
 }
 }
 if (mEdgeEffectTop != null && mEdgeEffectBottom != null &&(!mEdgeEffectTop.isFinished()
 || !mEdgeEffectBottom.isFinished())) {
 postInvalidate();
 }
 }
 .....
 }
 ....
 }
 @Override
 protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY) {
 if (!mScroller.isFinished()) { 
 int oldX = getScrollX();
 int oldY = getScrollY();
 scrollTo(scrollX,scrollY);
 onScrollChanged(scrollX,scrollY,oldX,oldY);
 if (clampedY) {
 Log.e("TEST1","springBack");
 mScroller.springBack(getScrollX(),getScrollY(),0,0,0,getScrollRange());
 }
 } else {
 // TouchEvent中的overScroll调用
 super.scrollTo(scrollX,scrollY);
 }
 }
 
 @Override
 public void computeScroll() {
 if (mScroller.computeScrollOffset()) {
 int oldX = getScrollX();
 int oldY = getScrollY();
 int x = mScroller.getCurrX();
 int y = mScroller.getCurrY();
 
 int range = getScrollRange();
 if (oldX != x || oldY != y) {
 overScrollBy(x-oldX,y-oldY,oldX,oldY,0,range,0,mOverFlingDistance,false);
 }
 final int overScrollMode = getOverScrollMode();
 final boolean canOverScroll = overScrollMode == OVER_SCROLL_ALWAYS ||
 (overScrollMode == OVER_SCROLL_IF_CONTENT_SCROLLS && range > 0);
 if (canOverScroll) {
 if (y<0 && oldY >= 0) {
 mEdgeEffectTop.onAbsorb((int)mScroller.getCurrVelocity());
 } else if (y> range && oldY < range) {
 mEdgeEffectBottom.onAbsorb((int)mScroller.getCurrVelocity());
 }
 }
 }
 }</code>

*  `Scroller`相关机制。
 *  `mScrollX`和`mScrollY`是如何影响视图内容。
 *  Android视图绘制逻辑，包括相关API和`Canvas`的相关操作。

### 一切从`Scroller`使用开始 ###

使用scroller的实例代码，之后的讲解流程就是scroller和computeScroll是如何调用的啦。  
 在系列文章的第二篇中，我们具体学习了`Scroller`的使用方法。通过`Scroller`的`fling`和`View`的`computeScroll`的配合，实现视图滚动效果。实例代码如下

本篇文章就带大家探究一下这段代码背后的原理和机制。

### Invalidate的寻父之路 ###

这一节主要分析在View中调用`invalidate`到`ViewRoot`执行`performTraversals`的原理，对android视图架构不是很熟悉的同学可以先阅读一下[《Android视图架构详解》][Android]。  
![validate时序图][validate]

我们先来看一下`View`中的`invalidate`代码。

我们可以看到，调用`invalidate()`会导致整个视图进行刷新，并且会刷新缓存。  
 然后我们再来详细的研究一下`invalidateInternal`中的代码。我们先来着重看一下`if`语句的判断条件把。

*  当`mPrivateFlags`的`FLAG_DRAWN`和`FLAG_HAS_BOUNDS`位设置为1时，说明上一次请求执行的UI绘制已经完成，那么可以再次请求重新绘制。`FLAG_DRAWN`位会在`draw`函数中会被置为１，而`FLAG_HAS_BOUNDS`会在`setFrame`函数中被设置为1。
 *  `mPrivateFlags`的`PFLAG_DRAWING_CACHE_VALID`标示视图缓存是否有效，如果有效并且`invalidateCache`为true,那么可以请求重新绘制。
 *  另外两个布尔判断的具体含义并没有分析清楚，大家感兴趣的请自行研究。  
     然后将`mPrivateFlags`的`PFLAG_DIRTY`置为１。并且如果是要刷新缓存的话，将`PFLAG_INVALIDATED`位设置为１，并且将`PFLAG_DRAWING_CACHE_VALID`位设置为0,这一步和之前的`if`判断中后两个布尔判断相对应，可见，如果已经有一个`invalidate`设置了上述两个标志位，那么下一个`invalidate`就不会进行任何操作。  
     接着，调用ViewParent接口的invalidateChild函数，在《Android视图架构详解》，我们已经知道`ViewGroup`和`ViewRoot`都实现了上述接口，那么，根据Android视图树状结构，`ViewGroup`的相应方法会被调用。

通过上述代码我们可以看到`ViewGroup`的`invalidateChild`函数通过循环不断调用其父视图的`invalidateChildInParent`，而且我们知道`ViewRoot`是`DecorView`的父视图，也就是说`ViewRoot`是Android视图树状结构的根。所以，最终`ViewRoot`的`invalidateChildInParent`会被调用。

最终，在`ViewRoot`的`invalidateChild`函数中，调用了`scheduleTraversals`,开启了视图重绘之旅。

### 我们都被`ViewRoot`骗了 ###

`ViewRoot`是Android视图树状结构的根节点，并且它实现了`ViewParent`接口，是`DecorView`的父视图。那么大家一定会认为它就是一个`View`吧。那我们就被它给骗了！！`ViewRoot`本质上是一个`Handler`，我们可以看一下`scheduleTraversals`到`performTraversals`的原理就知道了。

在`scheduleTraversals`中，`ViewRoot`只是向自己发送了一个`DO_TRAVERSAL`的空信息。

然后我们在查看`handleMessage`方法，发现在处理`DO_TRAVERSAL`时，`ViewRoot`调用了`performTraversals`函数。  
 在`performTraversals`中，视图要进行measure,layout,和draw三大步骤，篇幅有限，我们这里只研究绘制相关的机制。  
 `ViewRoot`在`performTraversals`中调用了自身的`draw`方法，看吧，`ViewRoot`伪装的还挺像，连`draw`方法都有。但是我们会发现，在`draw`方法中，`ViewRoot`实际上只调用了自己的`mView`成员变量的`draw`方法，而且我们都知道的是，`mView`就是`DecorView`，于是，绘制流程来到了真正的View视图的根节点。

### 大家都来画的canvas ###

接下来，我们就正式研究一下Android的绘制机制，我们沿着Android视图的树状结构来分析绘制原理。  
![draw时序图][draw]

首先是`DecorView`的绘制相关的函数。在`ViewRoot`的`draw`方法中，直接调用了`DecorView`的`draw(Canvas canvas)`函数，我们知道`DecorView`是`FrameLayout`的子类，其`draw(Canvas canvas)`函数是从`View`中继承而来的。所以我们先来看`View`的`draw(Canvas canvas)`方法。

关于视图的组成部分，我在之前的文章中已经讲述过来，请不太熟悉这部分内容的同学自行查阅文章或者其他资料。通过上述代码我们可以看到，`View`的`dispatchDraw`函数被调用了，它是向子视图分发绘制指令和相关数据的方法。在`View`中，上述函数是一个空函数，但是`ViewGroup`中对这个函数进行了实现。

通过上述代码我们可以看到，`ViewGroup`分别调用了自己的子View的`draw`方法，需要特别注意的是，这个draw和之前draw方法不是同一个方法，他们的参数不同。于是，我们再次转到`View`的源码中，看一下这个draw方法到底做了什么。

首先，我们发现`computeScroll`方法是在其中被调用的，从而计算出新的`mScrollX`和`mScrollY`,然后在平移画布，产生内容平移效果。  
 然后我们发现通过`PFLAG_SKIP_DRAW`标志位的判断，有些View是直接调用`dispatchDraw`函数，说明它自己没有需要绘制的内容，而有些View则是调用自己的`draw`方法。我们应该都知道`ViewGroup`默认是不进行绘制内容的吧，我们一般调用`setNotWillDraw`方法来让其可以绘制自身内容，通过调用`setNotWillDraw`方法，会导致`PFLAG_SKIP_DRAW`位被置为１，从而可以绘制自身内容。  
 分析到这里，我们就会发现draw函数沿着Android视图树状结构被不断调用，知道所有视图都完成绘制。

### 把一切连接起来的computeScroll ###

读到这里大家应该对Android视图绘制流程有了基本的了解了吧，那么，我们再来看一下文章开头的例子。在`computeScroll`方法中，我们调用了`postInvalidate`方法，这又是什么用意呢？  
 其实，在`computeScroll`中不掉用`postInvalidate`好像也可以达到正确的效果，具体原因我不太了解，猜测应该是Android自动刷新界面可以代替`postInvalidate`的效果吧。同学们如果知道其中具体原因，请告知我啊。  
 在《Android Scroll详解(一)：基础知识》中，我们已经讲到  
`postInvalidate`其实就是调用了`invalidate`，然后整个流程就连接了起来，`mScrollX`和`mScrollY`每个循环都会改变一点，然后导致界面滚动，最终形成界面Scroll效果。

[20160327182620007]: /images/20220724/51902e225d41473a9ee6c46007ee4d0b.png
[view scroll example]: /images/20220724/dc768c71a85242cca31029006beceb80.png
[github]: https://github.com/ztelur/ScrollProject
[Android]: http://blog.csdn.net/u012422440/article/details/51173387
[validate]: /images/20220724/b0a50881755c4d65a0a6c24bfe750007.png
[draw]: /images/20220724/c76b382ccbbf4398b977100a7fc8c53d.png