Android View 佈局流程(Layout)完全解析

yangxi_001發表於2017-01-06
AndroidView

前言

上一篇文章，筆者詳細講述了View三大工作流程的第一個，Measure流程，如果對測量流程還不熟悉的讀者可以參考一下上一篇文章。測量流程主要是對View樹進行測量，獲取每一個View的測量寬高，那麼有了測量寬高，就是要進行佈局流程了，佈局流程相對測量流程來說簡單許多。那麼我們開始對layout流程進行詳細的解析。

ViewGroup的佈局流程

上一篇文章提到，三大流程始於ViewRootImpl#performTraversals方法，在該方法內通過呼叫performMeasure、performLayout、performDraw這三個方法來進行measure、layout、draw流程，那麼我們就從performLayout方法開始說，我們先看它的原始碼：

private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
        int desiredWindowHeight) {
    mLayoutRequested = false;
    mScrollMayChange = true;
    mInLayout = true;

    final View host = mView;
    if (DEBUG_ORIENTATION || DEBUG_LAYOUT) {
        Log.v(TAG, "Laying out " + host + " to (" +
                host.getMeasuredWidth() + ", " + host.getMeasuredHeight() + ")");
    }

    Trace.traceBegin(Trace.TRACE_TAG_VIEW, "layout");
    try {
        host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight()); // 1

        //省略...
    } finally {
        Trace.traceEnd(Trace.TRACE_TAG_VIEW);
    }
    mInLayout = false;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

由上面的程式碼可以看出，直接呼叫了①號的host.layout方法，host也就是DecorView，那麼對於DecorView來說，呼叫layout方法，就是對它自身進行佈局，注意到傳遞的引數分別是0,0,host.getMeasuredWidth,host.getMeasuredHeight,它們分別代表了一個View的上下左右四個位置，顯然，DecorView的左上位置為0，然後寬高為它的測量寬高。由於View的layout方法是final型別，子類不能重寫，因此我們直接看View#layout方法即可：

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); // 1

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

        ListenerInfo li = mListenerInfo;
        if (li != null && li.mOnLayoutChangeListeners != null) {
            ArrayList<OnLayoutChangeListener> listenersCopy =
                    (ArrayList<OnLayoutChangeListener>)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;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

首先看①號程式碼，呼叫了setFrame方法，並把四個位置資訊傳遞進去，這個方法用於確定View的四個頂點的位置，即初始化mLeft,mRight,mTop,mBottom這四個值，當初始化完畢後，ViewGroup的佈局流程也就完成了 
那麼，我們先看View#setFrame方法：

protected boolean setFrame(int left, int top, int right, int bottom) {
    //省略...

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

    //省略...
    return changed;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

可以看出，它對mLeft、mTop、mRight、mBottom這四個值進行了初始化，對於每一個View，包括ViewGroup來說，以上四個值儲存了Viwe的位置資訊，所以這四個值是最終寬高，也即是說，如果要得到View的位置資訊，那麼就應該在layout方法完成後呼叫getLeft()、getTop()等方法來取得最終寬高，如果是在此之前呼叫相應的方法，只能得到0的結果，所以一般我們是在onLayout方法中獲取View的寬高資訊。

在設定ViewGroup自身的位置完成後，我們看到會接著呼叫②號方法，即onLayout()方法，該方法在ViewGroup中呼叫，用於確定子View的位置，即在該方法內部，子View會呼叫自身的layout方法來進一步完成自身的佈局流程。由於不同的佈局容器的onMeasure方法均有不同的實現，因此不可能對所有佈局方式都說一次，另外上一篇文章是用FrameLayout#onMeasure進行講解的，那麼現在也對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 */);
}

void layoutChildren(int left, int top, int right, int bottom,
                                  boolean forceLeftGravity) {
    final int count = getChildCount();

    //以下四個值會影響到子View的佈局引數
    //parentLeft由父容器的padding和Foreground決定
    final int parentLeft = getPaddingLeftWithForeground();
    //parentRight由父容器的width和padding和Foreground決定
    final int parentRight = right - left - getPaddingRightWithForeground();

    final int parentTop = getPaddingTopWithForeground();
    final int parentBottom = bottom - top - getPaddingBottomWithForeground();

    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;

            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;

            //當子View設定了水平方向的layout_gravity屬性時，根據不同的屬性設定不同的childLeft
            //childLeft表示子View的 左上角座標X值
            switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {

                /* 水平居中，由於子View要在水平中間的位置顯示，因此，要先計算出以下：
                 * (parentRight - parentLeft -width)/2 此時得出的是父容器減去子View寬度後的
                 * 剩餘空間的一半，那麼再加上parentLeft後，就是子View初始左上角橫座標(此時正好位於中間位置)，
                 * 假如子View還受到margin約束，由於leftMargin使子View右偏而rightMargin使子View左偏，所以最後
                 * 是 +leftMargin -rightMargin .
                 */
                case Gravity.CENTER_HORIZONTAL:
                    childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
                    lp.leftMargin - lp.rightMargin;
                    break;

                //水平居右，子View左上角橫座標等於 parentRight 減去子View的測量寬度 減去 margin
                case Gravity.RIGHT:
                    if (!forceLeftGravity) {
                        childLeft = parentRight - width - lp.rightMargin;
                        break;
                    }

                //如果沒設定水平方向的layout_gravity，那麼它預設是水平居左
                //水平居左，子View的左上角橫座標等於 parentLeft 加上子View的magin值
                case Gravity.LEFT:
                default:
                    childLeft = parentLeft + lp.leftMargin;
            }

            //當子View設定了豎直方向的layout_gravity時，根據不同的屬性設定同的childTop
            //childTop表示子View的 左上角座標的Y值
            //分析方法同上
            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;
            }

            //對子元素進行佈局，左上角座標為(childLeft，childTop)，右下角座標為(childLeft+width,childTop+height)
            child.layout(childLeft, childTop, childLeft + width, childTop + height);
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93

由原始碼看出，onLayout方法內部直接呼叫了layoutChildren方法，而layoutChildren則是具體的實現。 
先梳理一下以上邏輯：首先先獲取父容器的padding值，然後遍歷其每一個子View，根據子View的layout_gravity屬性、子View的測量寬高、父容器的padding值、來確定子View的佈局引數，然後呼叫child.layout方法，把佈局流程從父容器傳遞到子元素。

那麼，現在就分析完了ViewGroup的佈局流程，那麼我們接著分析子元素的佈局流程。

子View的佈局流程

子View的佈局流程也很簡單，如果子View是一個ViewGroup，那麼就會重複以上步驟，如果是一個View，那麼會直接呼叫View#layout方法，根據以上分析，在該方法內部會設定view的四個佈局引數，接著呼叫onLayout方法，我們看看View#onLayout方法：

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
}
  • 1
  • 2
  • 1
  • 2

這是一個空實現，主要作用是在我們的自定義View中重寫該方法，實現自定義的佈局邏輯。

那麼到目前為止，View的佈局流程就已經全部分析完了。可以看出，佈局流程的邏輯相比測量流程來說，簡單許多，獲取一個View的測量寬高是比較複雜的，而佈局流程則是根據已經獲得的測量寬高進而確定一個View的四個位置引數。在下一篇文章，將會講述最後一個流程：繪製流程。希望這篇文章給大家對View的工作流程的理解帶來幫助，謝謝閱讀。

轉自：http://blog.csdn.net/a553181867/article/details/51524527

相關文章