《Android开发艺术探索》笔记5:View的工作原理

1,ViewRoot和DecorView

ViewRoot对应于ViewRootImpl类,它是连接WindowManager和DecorView的纽带,View的三大流程(measure、layout、draw)都是通过它完成的。在ActivityThread中,当Activity对象被创建后,会将DecorView添加到Window中,同时创建ViewRootImpl对象,并将ViewRootImpl对象和DecorView建立关联。
View的绘制流程是从ViewRoot的performTraversals方法开始的,它经过measure、layout、draw三个过程将View绘制出来。


图1、performTraversals方法工作流程

measure过程决定了View的宽高,Measure完成以后,可以通过getMeasureWidth/getMeasureHeight获取View的宽高;
Layout过程决定了View的四个顶点的坐标和实际View的宽高,完成以后,可以通过getTop、getBottom、getLeft、getRight获取view的四个顶点的坐标,也可以通过getWidth、getHeight获取view的最终宽高;
Draw过程决定了View的显示,只有draw完成后,view的内容才能显示到屏幕上。

2,MeasureSpec

2.1,MeasureSpec基础

MessureSpec决定一个view的尺寸规格,测量过程中会受到父容器的影响。测量过程中,系统会将View的LayoutParams根据父容器所施加的规则转换成对应的MeasureSpec,然后根据这个MeasureSpec来测量view的宽高。
MeasureSpec是一个32位的int值,高2位表示测量模式(SpecMode),低30位代表测试规格(SpecSize)。下面是3种测量模式的介绍:
UNSPECIFIED:父容器不对View有任何限制,要多大就有多大,这种情况一般用于系统内部,表示一种测量状态。
EXACTLY:父容器已经检测出View的精确大小,这时候View的最终大小由SpecSize多指定的值,它对应于LayoutParams中的match_parent和具体的数值这2种模式(layout_width/layout_heigth设置match_parent或者具体的单位,如20dp等)。
AT_MOST:父容器指定了一个可用大小即SpecSize,View的大小不能大于这个值,具体是什么值需要看View的具体实现,它对应于LayoutParams的wrap_content(即layout_width/layout_heigth设置wrap_content)。

2.2,MeasureSpec和LayoutParams的对应关系

在View测量的时候,系统会将LayoutParams在父容器的约束下转换成对象的MeasureSpec,然后再根据这个MeasureSpec来确定View测量后的宽高。MeasureSpec并不是唯一由LayoutParams决定的,LayoutParams需要和父容器一起才能决定View的MeasureSpec。
对于普通的View来说V,View的measure过程是通过ViewGroup传递来的,下面是ViewGroup的measureChildWithMargins方法:

protected void measureChildWithMargins(View child,
          int parentWidthMeasureSpec, int widthUsed,
          int parentHeightMeasureSpec, int heightUsed) {
 final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

 final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
              mPaddingLeft + mPaddingRight + lp.leftMargin + lp.rightMargin
                      + widthUsed, lp.width);
 final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
              mPaddingTop + mPaddingBottom + lp.topMargin + lp.bottomMargin
                      + heightUsed, lp.height);

  child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
  }

从上述代码中可以看出,对子元素的measure之前,会调用getChildMeasureSpec方法得到子元素的MeasureSpec,并且子元素的MeasureSpec跟父容器的MeasureSpec和子元素的LayoutParams有关,此外还跟子元素的margin和padding也有关,下面是getChildMeasureSpec方法的源码:

public static int getChildMeasureSpec(int spec, int padding, int childDimension) {
       int specMode = MeasureSpec.getMode(spec);
       int specSize = MeasureSpec.getSize(spec);

       int size = Math.max(0, specSize - padding);

       int resultSize = 0;
       int resultMode = 0;

       switch (specMode) {
       // Parent has imposed an exact size on us
       case MeasureSpec.EXACTLY:
           if (childDimension >= 0) {
               resultSize = childDimension;
               resultMode = MeasureSpec.EXACTLY;
           } else if (childDimension == LayoutParams.MATCH_PARENT) {
               // Child wants to be our size. So be it.
               resultSize = size;
               resultMode = MeasureSpec.EXACTLY;
           } else if (childDimension == LayoutParams.WRAP_CONTENT) {
               // Child wants to determine its own size. It can't be
               // bigger than us.
               resultSize = size;
               resultMode = MeasureSpec.AT_MOST;
           }
           break;

       // Parent has imposed a maximum size on us
       case MeasureSpec.AT_MOST:
           if (childDimension >= 0) {
               // Child wants a specific size... so be it
               resultSize = childDimension;
               resultMode = MeasureSpec.EXACTLY;
           } else if (childDimension == LayoutParams.MATCH_PARENT) {
               // Child wants to be our size, but our size is not fixed.
               // Constrain child to not be bigger than us.
               resultSize = size;
               resultMode = MeasureSpec.AT_MOST;
           } else if (childDimension == LayoutParams.WRAP_CONTENT) {
               // Child wants to determine its own size. It can't be
               // bigger than us.
               resultSize = size;
               resultMode = MeasureSpec.AT_MOST;
           }
           break;

       // Parent asked to see how big we want to be
       case MeasureSpec.UNSPECIFIED:
           if (childDimension >= 0) {
               // Child wants a specific size... let him have it
               resultSize = childDimension;
               resultMode = MeasureSpec.EXACTLY;
           } else if (childDimension == LayoutParams.MATCH_PARENT) {
               // Child wants to be our size... find out how big it should
               // be
               resultSize = 0;
               resultMode = MeasureSpec.UNSPECIFIED;
           } else if (childDimension == LayoutParams.WRAP_CONTENT) {
               // Child wants to determine its own size.... find out how
               // big it should be
               resultSize = 0;
               resultMode = MeasureSpec.UNSPECIFIED;
           }
           break;
       }
       return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
   }

以上代码可以清楚的了解父容器的MeasureSpec和子元素的MeasureSpec的关系:

图2、普通View的MeasureSpec的创建规则

3,View的工作流程

3.1,measure过程

一个原始View通过measure过程,就完成了其测量宽高;而一个ViewGroup类型的组件,除了完成自己的测量外,还会遍历其子元素的measure方法,各个子元素又会递归去执行这个流程。

3.1.1,View的measure过程
public final void measure(int widthMeasureSpec, int heightMeasureSpec) {
  ...
  if (cacheIndex < 0 || sIgnoreMeasureCache) {
      // measure ourselves, this should set the measured dimension flag back
      onMeasure(widthMeasureSpec, heightMeasureSpec);
      mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
  } else {
      long value = mMeasureCache.valueAt(cacheIndex);
      // Casting a long to int drops the high 32 bits, no mask needed
      setMeasuredDimensionRaw((int) (value >> 32), (int) value);
      mPrivateFlags3 |= PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
  }
  ...
}

上面的代码是View的measure方法,可以发现该方法是final类型,表示measure是不能被子类重写的,View的measure方法内部又会调用onMeasure方法:

  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
      setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
              getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
  }

在onMeasure方法中,又调用了setMeasuredDimension方法,setMeasuredDimension方法会设置View的宽高测量值,看其参数有个方法getDefaultSize如下:

    public static int getDefaultSize(int size, int measureSpec) {
        int result = size;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        switch (specMode) {
        case MeasureSpec.UNSPECIFIED:
            result = size;
            break;
        case MeasureSpec.AT_MOST:
        case MeasureSpec.EXACTLY:
            result = specSize;
            break;
        }
        return result;
    }

getDefaultSize方法功能很单调,首先获取MeasureSpec中的specMode,根据specMode设置对应的specSize的值,并且返回,specSize就是View的测量时的宽高。
注意:此时measure方法测量的宽高叫做测量后的宽高,并不一定代表就是View的最终宽高,因为View的最终宽高是在layout过程确定下来的,但是大多数时候测量时宽高和最终宽高是一样的。
setMeasuredDimension就是通过getDefaultSize获取specSize传入当做参数,从而测量出View的宽高。所以View的测量宽高其实就是由specSize决定的,那么有个问题就是,直接继承View的自定义View需要重写onMeasure方法并且设置wrap_content时的自身大小,否则自定义View的使用wrap_content和使用match_parent的效果是一样的。这个原因可以通过分析上述的代码和前面的图2来理解,首先若自定义View设置了wrap_content时,那么在getDefaultSize方法中其对应的specMode是AT_MOST,此时它的宽高取的是specSize,在图2中可以知道,这种情况下specSize是parentSize,parentSize是父容器目前的大小,此时设置的wrap_content和match_parent效果是一样的。但是通过下面的处理可以解决这个问题:

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
        if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(mWidth, mHeight);
        } else if (widthSpecMode == MeasureSpec.AT_MOST) {
            setMeasuredDimension(mWidth, heightSpecSize);
        } else if (heightMeasureSpec == MeasureSpec.AT_MOST) {
            setMeasuredDimension(widthSpecSize, mHeight);
        }
    }
3.1.2,ViewGroup的measure过程

对于ViewGroup的measure过程来说,它除了完成对自身的测量外,还会递归measure其子元素宽高,在ViewGroup中measureChildren方法就是完成对子元素的遍历measure的开端:

protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
      final int size = mChildrenCount;
      final View[] children = mChildren;
      for (int i = 0; i < size; ++i) {
          final View child = children[i];
          if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
                measureChild(child, widthMeasureSpec, heightMeasureSpec);
            }
        }
}

在上面的源码中可以发现ViewGroup是首先遍历了子元素,并且调用了measureChild方法完成对子元素的measure,下面是measureChild方法的代码:

protected void measureChild(View child, int parentWidthMeasureSpec,
          int parentHeightMeasureSpec) {
      final LayoutParams lp = child.getLayoutParams();

      final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
                mPaddingLeft + mPaddingRight, lp.width);
      final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
                mPaddingTop + mPaddingBottom, lp.height);

      child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
    }

通过上面的代码可以明显发现,measureChild方法内部首先会获取子元素的LayoutParams,然后通过getChildMeasureSpec方法获取子元素的MeasureSpec,最终调用View的measure方法完成子元素的测量过程。关于getChildMeasureSpec方法,本篇笔记上面有介绍。
measure完成以后,通过getMeasuredWidth和getMeasuredHeight就可以获取View的测量宽高了,但是在某些极端情况下,系统需要多次measure后才能确定View的宽高,这时候我们通过getMeasuredWidth和getMeasuredHeight获取的宽高就不准确了,所以最好的办法是在onLayout方法中获取View的测量宽高或者是最终宽高。

3.2,layout过程

layout过程是确定子元素位置,当ViewGroup的位置被确定后,它会在onLayout中遍历所有的子元素并调用其layout方法,在layout方法中又调用onLayout方法。layout方法确定View自身的位置,onLayout是确定所有子元素的位置。下面是View的layout方法代码:

@SuppressWarnings({"unchecked"})
public void layout(int l, int t, int r, int b) {
    if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
        onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
        mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
    }

    int oldL = mLeft;
    int oldT = mTop;
    int oldB = mBottom;
    int oldR = mRight;

    boolean changed = isLayoutModeOptical(mParent) ?
            setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
        onLayout(changed, l, t, r, b);
        mPrivateFlags &= ~PFLAG_LAYOUT_REQUIRED;

        ListenerInfo li = mListenerInfo;
        if (li != null && li.mOnLayoutChangeListeners != null) {
             ArrayList listenersCopy =
                      (ArrayList)li.mOnLayoutChangeListeners.clone();
            int numListeners = listenersCopy.size();
            for (int i = 0; i < numListeners; ++i) {
                listenersCopy.get(i).onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);
            }
        }
    }

    mPrivateFlags &= ~PFLAG_FORCE_LAYOUT;
    mPrivateFlags3 |= PFLAG3_IS_LAID_OUT;
}

上面的代码中首先是调用了setFrame方法,setFrame方法是用来设置View的四个顶点的位置的,即初始化mLeft、mTop、mRight和mBottom这四个值。View的顶点一旦确定,那么View在父容器的位置就确定了。接着就会调用onLayout方法,这个方法的用途就是父容器确定子元素的位置,onLayout并没有具体的实现,需要针对不同的场景重写这个方法。下面是setFrame方法:

  protected boolean setFrame(int left, int top, int right, int bottom) {
      boolean changed = false;
      ...
      if (mLeft != left || mRight != right || mTop != top || mBottom != bottom) {
          changed = true;

          // Remember our drawn bit
          int drawn = mPrivateFlags & PFLAG_DRAWN;

          int oldWidth = mRight - mLeft;
          int oldHeight = mBottom - mTop;
          int newWidth = right - left;
          int newHeight = bottom - top;
          boolean sizeChanged = (newWidth != oldWidth) || (newHeight != oldHeight);

          // Invalidate our old position
          invalidate(sizeChanged);

          mLeft = left;
          mTop = top;
          mRight = right;
          mBottom = bottom;
          mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);
          mPrivateFlags |= PFLAG_HAS_BOUNDS;

          if (sizeChanged) {
              sizeChange(newWidth, newHeight, oldWidth, oldHeight);
          }
      ...
      return changed;
  }

通过setFrame方法,mLeft = left;mTop = top;mRight = right;mBottom = bottom; newWidth = right - left;newHeight = bottom - top;这些计算,View的位置属性被确定下来了。

3.3,draw过程

draw的过程遵循以下几个步骤:
(1)绘制背景background.draw(canvas)。
(2)绘制自己onDraw。
(3)绘制children(dispatchDraw)。
(4)绘制装饰(onDrawScrollBars)。
下面是draw方法的源码:

public void draw(Canvas canvas) {
  final int privateFlags = mPrivateFlags;
  final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
          (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
  mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;

  /*
   * Draw traversal performs several drawing steps which must be executed
   * in the appropriate order:
   *
   *      1. Draw the background
   *      2. If necessary, save the canvas' layers to prepare for fading
   *      3. Draw view's content
   *      4. Draw children
   *      5. If necessary, draw the fading edges and restore layers
   *      6. Draw decorations (scrollbars for instance)
   */

  // Step 1, draw the background, if needed
  int saveCount;

  if (!dirtyOpaque) {
      drawBackground(canvas);
  }

  // skip step 2 & 5 if possible (common case)
  final int viewFlags = mViewFlags;
  boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;
  boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;
  if (!verticalEdges && !horizontalEdges) {
      // Step 3, draw the content
      if (!dirtyOpaque) onDraw(canvas);

      // Step 4, draw the children
      dispatchDraw(canvas);

      // Step 6, draw decorations (scrollbars)
      onDrawScrollBars(canvas);

      if (mOverlay != null && !mOverlay.isEmpty()) {
          mOverlay.getOverlayView().dispatchDraw(canvas);
      }

      // we're done...
      return;
  }

  /*
   * Here we do the full fledged routine...
   * (this is an uncommon case where speed matters less,
   * this is why we repeat some of the tests that have been
   * done above)
   */

  boolean drawTop = false;
  boolean drawBottom = false;
  boolean drawLeft = false;
  boolean drawRight = false;

  float topFadeStrength = 0.0f;
  float bottomFadeStrength = 0.0f;
  float leftFadeStrength = 0.0f;
  float rightFadeStrength = 0.0f;

  // Step 2, save the canvas' layers
  int paddingLeft = mPaddingLeft;

  final boolean offsetRequired = isPaddingOffsetRequired();
  if (offsetRequired) {
      paddingLeft += getLeftPaddingOffset();
  }

  int left = mScrollX + paddingLeft;
  int right = left + mRight - mLeft - mPaddingRight - paddingLeft;
  int top = mScrollY + getFadeTop(offsetRequired);
  int bottom = top + getFadeHeight(offsetRequired);

  if (offsetRequired) {
      right += getRightPaddingOffset();
      bottom += getBottomPaddingOffset();
  }

  final ScrollabilityCache scrollabilityCache = mScrollCache;
  final float fadeHeight = scrollabilityCache.fadingEdgeLength;
  int length = (int) fadeHeight;

  // clip the fade length if top and bottom fades overlap
  // overlapping fades produce odd-looking artifacts
  if (verticalEdges && (top + length > bottom - length)) {
      length = (bottom - top) / 2;
  }

  // also clip horizontal fades if necessary
  if (horizontalEdges && (left + length > right - length)) {
      length = (right - left) / 2;
  }

  if (verticalEdges) {
      topFadeStrength = Math.max(0.0f, Math.min(1.0f, getTopFadingEdgeStrength()));
      drawTop = topFadeStrength * fadeHeight > 1.0f;
      bottomFadeStrength = Math.max(0.0f, Math.min(1.0f, getBottomFadingEdgeStrength()));
      drawBottom = bottomFadeStrength * fadeHeight > 1.0f;
  }

  if (horizontalEdges) {
      leftFadeStrength = Math.max(0.0f, Math.min(1.0f, getLeftFadingEdgeStrength()));
      drawLeft = leftFadeStrength * fadeHeight > 1.0f;
      rightFadeStrength = Math.max(0.0f, Math.min(1.0f, getRightFadingEdgeStrength()));
      drawRight = rightFadeStrength * fadeHeight > 1.0f;
  }

  saveCount = canvas.getSaveCount();

  int solidColor = getSolidColor();
  if (solidColor == 0) {
      final int flags = Canvas.HAS_ALPHA_LAYER_SAVE_FLAG;

      if (drawTop) {
          canvas.saveLayer(left, top, right, top + length, null, flags);
      }

      if (drawBottom) {
          canvas.saveLayer(left, bottom - length, right, bottom, null, flags);
      }

      if (drawLeft) {
          canvas.saveLayer(left, top, left + length, bottom, null, flags);
      }

      if (drawRight) {
          canvas.saveLayer(right - length, top, right, bottom, null, flags);
      }
  } else {
      scrollabilityCache.setFadeColor(solidColor);
  }

  // Step 3, draw the content
  if (!dirtyOpaque) onDraw(canvas);

  // Step 4, draw the children
  dispatchDraw(canvas);

  // Step 5, draw the fade effect and restore layers
  final Paint p = scrollabilityCache.paint;
  final Matrix matrix = scrollabilityCache.matrix;
  final Shader fade = scrollabilityCache.shader;

  if (drawTop) {
      matrix.setScale(1, fadeHeight * topFadeStrength);
      matrix.postTranslate(left, top);
      fade.setLocalMatrix(matrix);
      p.setShader(fade);
      canvas.drawRect(left, top, right, top + length, p);
  }

  if (drawBottom) {
      matrix.setScale(1, fadeHeight * bottomFadeStrength);
      matrix.postRotate(180);
      matrix.postTranslate(left, bottom);
      fade.setLocalMatrix(matrix);
      p.setShader(fade);
      canvas.drawRect(left, bottom - length, right, bottom, p);
  }

  if (drawLeft) {
      matrix.setScale(1, fadeHeight * leftFadeStrength);
      matrix.postRotate(-90);
      matrix.postTranslate(left, top);
      fade.setLocalMatrix(matrix);
      p.setShader(fade);
      canvas.drawRect(left, top, left + length, bottom, p);
  }

  if (drawRight) {
      matrix.setScale(1, fadeHeight * rightFadeStrength);
      matrix.postRotate(90);
      matrix.postTranslate(right, top);
      fade.setLocalMatrix(matrix);
      p.setShader(fade);
      canvas.drawRect(right - length, top, right, bottom, p);
  }

  canvas.restoreToCount(saveCount);

  // Step 6, draw decorations (scrollbars)
  onDrawScrollBars(canvas);

  if (mOverlay != null && !mOverlay.isEmpty()) {
      mOverlay.getOverlayView().dispatchDraw(canvas);
  }
}

我们发现在draw方法的第二步onDraw绘制自身内容和第三步绘制children的dispatchDraw方法都是空实现:

  protected void onDraw(Canvas canvas) {
  }
  protected void dispatchDraw(Canvas canvas) {

  }

那么这2个方法,尤其是onDraw就需要控件根据自身的需要,自己实现如何绘制了。

ps:感谢任玉刚的《Android开发艺术探索》,这篇笔记只是对相关内容的简单总结,方便自己以后查看复习,如果大家觉得还可以,请购买正版书籍研读,非常不错!

你可能感兴趣的:(《Android开发艺术探索》笔记5:View的工作原理)