Android進階之深入理解View的布局(Layout)流程原理

作者： Android開發編程 2021-09-17 06:55:50

移動開發 Android

View的layout方法作用是確定View的位置，ViewGroup的layout方法不僅要確定自身的位置，還有確定子View的位置。

[[424470]]

前言

前一篇我們講解了View的Measure過程，那今天我們來講解下Layout;

View的layout方法作用是確定View的位置，ViewGroup的layout方法不僅要確定自身的位置，還有確定子View的位置;

Android進階之深入理解View的測量(Measure)流程機制

一、Layout流程源碼詳解

1、performLayout

View三大工作流程是從ViewRootImpl#performTraversals開始的，其中performMeasure、performLayout、performDraw方法分別對應了View的測量、布局、繪制;

從performLayout開始分析View布局流程;

private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth, 
            int desiredWindowHeight) { 
        mLayoutRequested = false; 
        mScrollMayChange = true; 
        mInLayout = true; 
        final View host = mView; 
        Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout"); 
        try { 
            host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight()); 
            //省略... 
        } finally { 
            Trace.traceEnd(Trace.TRACE_TAG_VIEW); 
        } 
        mInLayout = false; 
    }

方法中的mView其實就是DecorView，那么host也就代表了DecorView，DecorView其實是個FrameLayout，ViewGroup并沒有重寫layout方法，所以我們來看下View#layout方法

2、layout

/** 
  * 源碼分析起始點：layout() 
  * 作用：確定View本身的位置，即設置View本身的四個頂點位置 
  */  
  public void layout(int l, int t, int r, int b) {   
    // 當前視圖的四個頂點 
    int oldL = mLeft;   
    int oldT = mTop;   
    int oldB = mBottom;   
    int oldR = mRight;   
    // 1. 確定View的位置：setFrame() / setOpticalFrame() 
    // 即初始化四個頂點的值、判斷當前View大小和位置是否發生了變化 & 返回  
    // setFrame() ->分析1 
    // setOpticalFrame() ->分析2 
    boolean changed = isLayoutModeOptical(mParent) ? setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b); 
    // 2. 若視圖的大小 & 位置發生變化 
    // 會重新確定該View所有的子View在父容器的位置：onLayout() 
    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {   
      onLayout(changed, l, t, r, b);   
      // 對于單一View的laytou過程：由于單一View是沒有子View的，故onLayout()是一個空實現 ->分析3 
      // 對于ViewGroup的laytou過程：由于確定位置與具體布局有關，所以onLayout()在ViewGroup為1個抽象方法，需自定義重寫實現(下面的章節會詳細說明) 
}   
/** 
  * 分析1：setFrame() 
  * 作用：根據傳入的4個位置值，設置View本身的四個頂點位置 
  * 即：最終確定View本身的位置 
  */  
  protected boolean setFrame(int left, int top, int right, int bottom) { 
    // 通過以下賦值語句記錄下了視圖的位置信息，即確定View的四個頂點 
    // 從而確定了視圖的位置 
    mLeft = left; 
    mTop = top; 
    mRight = right; 
    mBottom = bottom; 
    mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom); 
   } 
/** 
  * 分析2：setOpticalFrame() 
  * 作用：根據傳入的4個位置值，設置View本身的四個頂點位置 
  * 即：最終確定View本身的位置 
  */  
  private boolean setOpticalFrame(int left, int top, int right, int bottom) { 
        Insets parentInsets = mParent instanceof View ? 
                ((View) mParent).getOpticalInsets() : Insets.NONE; 
        Insets childInsets = getOpticalInsets(); 
        // 內部實際上是調用setFrame（） 
        return setFrame( 
                left   + parentInsets.left - childInsets.left, 
                top    + parentInsets.top  - childInsets.top, 
                right  + parentInsets.left + childInsets.right, 
                bottom + parentInsets.top  + childInsets.bottom); 
    } 
    // 回到調用原處 
/** 
  * 分析3：onLayout（） 
  * 注：對于單一View的laytou過程 
  *    1. 由于單一View是沒有子View的，故onLayout()是一個空實現 
  *    2. 由于在layout()中已經對自身View進行了位置計算：setFrame() / setOpticalFrame() 
  *    3. 所以單一View的layout過程在layout()后就已完成了 
  */  
 protected void onLayout(boolean changed, int left, int top, int right, int bottom) { 
   // 參數說明 
   // changed 當前View的大小和位置改變了  
   // left 左部位置 
   // top 頂部位置 
   // right 右部位置 
   // bottom 底部位置 
}

3、setFrame

layout方法是用來確定自身位置的，其內部調用了setOpticalFrame、setFrame和onLayout方法，setOpticalFrame內部又會調用setFrame。所以我們先來看setFrame方法，如下

protected boolean setFrame(int left, int top, int right, int bottom) { 
        boolean changed = false; 
        if (mLeft != left || mRight != right || mTop != top || mBottom != bottom) { 
            //判斷View的位置是否發生改變 
            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;//獲取新的高度 
            //判斷View的尺寸是否發生改變 
            boolean sizeChanged = (newWidth != oldWidth) || (newHeight != oldHeight); 
            // Invalidate our old position 
            invalidate(sizeChanged); 
            //對mLeft、mTop、mRight 、mBottom初始化，View自身的位置也就確定了。 
            mLeft = left; 
            mTop = top; 
            mRight = right; 
            mBottom = bottom; 
            mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom); 
            mPrivateFlags |= PFLAG_HAS_BOUNDS; 
            //如果View尺寸發生改變，將執行View#sizeChange方法，在sizeChange方法內部會調用View#onSizeChanged方法。 
            if (sizeChanged) { 
                sizeChange(newWidth, newHeight, oldWidth, oldHeight); 
            } 
            //省略... 
        } 
        return changed; 
    }

在setFrame方法中對mLeft、mTop、mRight 、mBottom進行初始化，mLeft、mTop分別對應View左上角的橫坐標和縱坐標，mRight 、mBottom分別對應了View右下角的橫坐標和縱坐標，View的四個頂點的坐標確定了，View自身的位置也就確定了;

4、FrameLayout#onLayout

再回到layout方法，在通過setFrame方法確定了自身位置后，接下來會調用onLayout方法，這個方法其實用來確定子View的位置的;

不過View和ViewGroup都沒有真正實現onLayout，因為onLayout和onMeasure類似，其過程都與具體的布局有關;

以FrameLayout為例來分析onLayout過程，FrameLayout#onLayout

@Override 
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) { 
        layoutChildren(left, top, right, bottom, false /* no force left gravity */); 
    } 
其內部調用了layoutChildren方法 
void layoutChildren(int left, int top, int right, int bottom, 
                                  boolean forceLeftGravity) { 
        final int count = getChildCount();//獲取子View的數量 
        //parentLeft、parentTop分別代表子View所占區域左上角的橫坐標和縱坐標 
        //parentRight、parentBottom分別代表子View所占區域右下角的橫坐標和縱坐標 
        final int parentLeft = getPaddingLeftWithForeground(); 
        final int parentRight = right - left - getPaddingRightWithForeground(); 
        final int parentTop = getPaddingTopWithForeground(); 
        final int parentBottom = bottom - top - getPaddingBottomWithForeground(); 
        mForegroundBoundsChanged = true; 
        //遍歷子View 
        for (int i = 0; i < count; i++) { 
            final View child = getChildAt(i); 
            if (child.getVisibility() != GONE) { 
                final LayoutParams lp = (LayoutParams) child.getLayoutParams(); 
                //獲取子View的測量寬、高 
                final int width = child.getMeasuredWidth(); 
                final int height = child.getMeasuredHeight(); 
                int childLeft; 
                int childTop; 
                //獲取子View 設置的Gravity，如果子View沒有設置Gravity，則用默認的Gravity:DEFAULT_CHILD_GRAVITY。 
                int gravity = lp.gravity; 
                if (gravity == -1) { 
                    gravity = DEFAULT_CHILD_GRAVITY; 
                } 
                final int layoutDirection = getLayoutDirection(); 
                final int absoluteGravity = Gravity.getAbsoluteGravity(gravity, layoutDirection); 
                final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK; 
                //水平方向上，通過設置的Gravity，來確定childLeft，即每個子View左上角的橫坐標 
                switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) { 
                    case Gravity.CENTER_HORIZONTAL: 
                        childLeft = parentLeft + (parentRight - parentLeft - width) / 2 + 
                        lp.leftMargin - lp.rightMargin; 
                        break; 
                    case Gravity.RIGHT: 
                        if (!forceLeftGravity) { 
                            childLeft = parentRight - width - lp.rightMargin; 
                            break; 
                        } 
                    case Gravity.LEFT: 
                    default: 
                        childLeft = parentLeft + lp.leftMargin; 
                } 
                //豎直方向上，通過設置的Gravity，來確定childTop，即每個子View左上角的縱坐標 
                switch (verticalGravity) { 
                    case Gravity.TOP: 
                        childTop = parentTop + lp.topMargin; 
                        break; 
                    case Gravity.CENTER_VERTICAL: 
                        childTop = parentTop + (parentBottom - parentTop - height) / 2 + 
                        lp.topMargin - lp.bottomMargin; 
                        break; 
                    case Gravity.BOTTOM: 
                        childTop = parentBottom - height - lp.bottomMargin; 
                        break; 
                    default: 
                        childTop = parentTop + lp.topMargin; 
                } 
                //調用子View的layout 方法 
                child.layout(childLeft, childTop, childLeft + width, childTop + height); 
            } 
        } 
    }

在該方法內部遍歷所有子View過程中，通過子View設置的Gravity，獲去其childLeft、childTop即子View的左上角的橫坐標和縱坐標，最后執行子View的layout方法，來確定子View的位置

5、LinearLayout#onLayout

LinearLayout復寫的onLayout()分析

/** 
  * 源碼分析：LinearLayout復寫的onLayout（） 
  * 注：復寫的邏輯 和 LinearLayout measure過程的 onMeasure()類似 
  */  
  @Override 
  protected void onLayout(boolean changed, int l, int t, int r, int b) { 
      // 根據自身方向屬性，而選擇不同的處理方式 
      if (mOrientation == VERTICAL) { 
          layoutVertical(l, t, r, b); 
      } else { 
          layoutHorizontal(l, t, r, b); 
      } 
  } 
      // 由于垂直/水平方向類似，所以此處僅分析垂直方向（Vertical）的處理過程 ->分析1 
/** 
  * 分析1：layoutVertical(l, t, r, b) 
  */ 
  void layoutVertical(int left, int top, int right, int bottom) { 
      // 子View的數量 
      final int count = getVirtualChildCount(); 
      // 1. 遍歷子View 
      for (int i = 0; i < count; i++) { 
          final View child = getVirtualChildAt(i); 
          if (child == null) { 
              childTop += measureNullChild(i); 
          } else if (child.getVisibility() != GONE) { 
              // 2. 計算子View的測量寬 / 高值 
              final int childWidth = child.getMeasuredWidth(); 
              final int childHeight = child.getMeasuredHeight(); 
              // 3. 確定自身子View的位置 
              // 即：遞歸調用子View的setChildFrame()，實際上是調用了子View的layout() ->分析2 
              setChildFrame(child, childLeft, childTop + getLocationOffset(child), 
                      childWidth, childHeight); 
              // childTop逐漸增大，即后面的子元素會被放置在靠下的位置 
              // 這符合垂直方向的LinearLayout的特性 
              childTop += childHeight + lp.bottomMargin + getNextLocationOffset(child); 
              i += getChildrenSkipCount(child, i); 
          } 
       } 
    } 
/** 
  * 分析2：setChildFrame() 
  */ 
  private void setChildFrame( View child, int left, int top, int width, int height){ 
    child.layout(left, top, left ++ width, top + height); 
    // setChildFrame()僅僅只是調用了子View的layout()而已 
    // 在子View的layout()又通過調用setFrame（）確定View的四個頂點 
    // 即確定了子View的位置 
    // 如此不斷循環確定所有子View的位置，最終確定ViewGroup的位置 
  }

總結

View的layout流程核心在于覆寫ViewGroup的onLayout方法，它的流程是拿到子View的寬高，然后實現自己的布局子View的邏輯，它一般結合onMeasure方法使用。

責任編輯：武曉燕來源： Android開發編程