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

前言

上一篇文章,筆者詳細(xì)講述了View三大工作流程的第一個(gè)蜕提,Measure流程忧风,如果對(duì)測(cè)量流程還不熟悉的讀者可以參考一下上一篇文章。測(cè)量流程主要是對(duì)View樹(shù)進(jìn)行測(cè)量融痛,獲取每一個(gè)View的測(cè)量寬高壶笼,那么有了測(cè)量寬高,就是要進(jìn)行布局流程了酌心,布局流程相對(duì)測(cè)量流程來(lái)說(shuō)簡(jiǎn)單許多拌消。那么我們開(kāi)始對(duì)layout流程進(jìn)行詳細(xì)的解析。

ViewGroup的布局流程

上一篇文章提到安券,三大流程始于ViewRootImpl#performTraversals方法墩崩,在該方法內(nèi)通過(guò)調(diào)用performMeasure、performLayout侯勉、performDraw這三個(gè)方法來(lái)進(jìn)行measure鹦筹、layout、draw流程址貌,那么我們就從performLayout方法開(kāi)始說(shuō)铐拐,我們先看它的源碼:

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;
}

由上面的代碼可以看出,直接調(diào)用了①號(hào)的host.layout方法练对,host也就是DecorView遍蟋,那么對(duì)于DecorView來(lái)說(shuō),調(diào)用layout方法螟凭,就是對(duì)它自身進(jìn)行布局虚青,注意到傳遞的參數(shù)分別是0,0,host.getMeasuredWidth,host.getMeasuredHeight,它們分別代表了一個(gè)View的上下左右四個(gè)位置,顯然螺男,DecorView的左上位置為0棒厘,然后寬高為它的測(cè)量寬高。由于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;
}

首先看①號(hào)代碼,調(diào)用了setFrame方法淆院,并把四個(gè)位置信息傳遞進(jìn)去何乎,這個(gè)方法用于確定View的四個(gè)頂點(diǎn)的位置,即初始化mLeft,mRight,mTop,mBottom這四個(gè)值,當(dāng)初始化完畢后宪赶,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;
}

可以看出脯燃,它對(duì)mLeft搂妻、mTop、mRight辕棚、mBottom這四個(gè)值進(jìn)行了初始化欲主,對(duì)于每一個(gè)View,包括ViewGroup來(lái)說(shuō)逝嚎,以上四個(gè)值保存了Viwe的位置信息扁瓢,所以這四個(gè)值是最終寬高,也即是說(shuō)补君,如果要得到View的位置信息引几,那么就應(yīng)該在layout方法完成后調(diào)用getLeft()、getTop()等方法來(lái)取得最終寬高挽铁,如果是在此之前調(diào)用相應(yīng)的方法伟桅,只能得到0的結(jié)果,所以一般我們是在onLayout方法中獲取View的寬高信息叽掘。

在設(shè)置ViewGroup自身的位置完成后楣铁,我們看到會(huì)接著調(diào)用②號(hào)方法,即onLayout()方法更扁,該方法在ViewGroup中調(diào)用盖腕,用于確定子View的位置,即在該方法內(nèi)部浓镜,子View會(huì)調(diào)用自身的layout方法來(lái)進(jìn)一步完成自身的布局流程溃列。由于不同的布局容器的onMeasure方法均有不同的實(shí)現(xiàn),因此不可能對(duì)所有布局方式都說(shuō)一次膛薛,另外上一篇文章是用FrameLayout#onMeasure進(jìn)行講解的听隐,那么現(xiàn)在也對(duì)FrameLayout#onLayout方法進(jìn)行講解:

@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

    //把父容器的位置參數(shù)傳遞進(jìn)去
    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();

    //以下四個(gè)值會(huì)影響到子View的布局參數(shù)
    //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的測(cè)量寬高
            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;

            //當(dāng)子View設(shè)置了水平方向的layout_gravity屬性時(shí),根據(jù)不同的屬性設(shè)置不同的childLeft
            //childLeft表示子View的 左上角坐標(biāo)X值
            switch (absoluteGravity & Gravity.HORIZONTAL_GRAVITY_MASK) {

                /* 水平居中相叁,由于子View要在水平中間的位置顯示遵绰,因此,要先計(jì)算出以下:
                 * (parentRight - parentLeft -width)/2 此時(shí)得出的是父容器減去子View寬度后的
                 * 剩余空間的一半增淹,那么再加上parentLeft后椿访,就是子View初始左上角橫坐標(biāo)(此時(shí)正好位于中間位置),
                 * 假如子View還受到margin約束虑润,由于leftMargin使子View右偏而rightMargin使子View左偏成玫,所以最后
                 * 是 +leftMargin -rightMargin .
                 */
                case Gravity.CENTER_HORIZONTAL:
                    childLeft = parentLeft + (parentRight - parentLeft - width) / 2 +
                    lp.leftMargin - lp.rightMargin;
                    break;

                //水平居右,子View左上角橫坐標(biāo)等于 parentRight 減去子View的測(cè)量寬度 減去 margin
                case Gravity.RIGHT:
                    if (!forceLeftGravity) {
                        childLeft = parentRight - width - lp.rightMargin;
                        break;
                    }

                //如果沒(méi)設(shè)置水平方向的layout_gravity,那么它默認(rèn)是水平居左
                //水平居左哭当,子View的左上角橫坐標(biāo)等于 parentLeft 加上子View的magin值
                case Gravity.LEFT:
                default:
                    childLeft = parentLeft + lp.leftMargin;
            }

            //當(dāng)子View設(shè)置了豎直方向的layout_gravity時(shí)猪腕,根據(jù)不同的屬性設(shè)置同的childTop
            //childTop表示子View的 左上角坐標(biāo)的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;
            }

            //對(duì)子元素進(jìn)行布局,左上角坐標(biāo)為(childLeft钦勘,childTop)陋葡,右下角坐標(biāo)為(childLeft+width,childTop+height)
            child.layout(childLeft, childTop, childLeft + width, childTop + height);
        }
    }
}

由源碼看出,onLayout方法內(nèi)部直接調(diào)用了layoutChildren方法彻采,而layoutChildren則是具體的實(shí)現(xiàn)腐缤。
先梳理一下以上邏輯:首先先獲取父容器的padding值,然后遍歷其每一個(gè)子View肛响,根據(jù)子View的layout_gravity屬性岭粤、子View的測(cè)量寬高、父容器的padding值特笋、來(lái)確定子View的布局參數(shù)剃浇,然后調(diào)用child.layout方法,把布局流程從父容器傳遞到子元素猎物。

那么虎囚,現(xiàn)在就分析完了ViewGroup的布局流程,那么我們接著分析子元素的布局流程霸奕。

子View的布局流程

子View的布局流程也很簡(jiǎn)單溜宽,如果子View是一個(gè)ViewGroup,那么就會(huì)重復(fù)以上步驟质帅,如果是一個(gè)View适揉,那么會(huì)直接調(diào)用View#layout方法,根據(jù)以上分析煤惩,在該方法內(nèi)部會(huì)設(shè)置view的四個(gè)布局參數(shù)嫉嘀,接著調(diào)用onLayout方法,我們看看View#onLayout方法:

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

這是一個(gè)空實(shí)現(xiàn)魄揉,主要作用是在我們的自定義View中重寫該方法剪侮,實(shí)現(xiàn)自定義的布局邏輯。

那么到目前為止洛退,View的布局流程就已經(jīng)全部分析完了瓣俯。可以看出兵怯,布局流程的邏輯相比測(cè)量流程來(lái)說(shuō)彩匕,簡(jiǎn)單許多,獲取一個(gè)View的測(cè)量寬高是比較復(fù)雜的媒区,而布局流程則是根據(jù)已經(jīng)獲得的測(cè)量寬高進(jìn)而確定一個(gè)View的四個(gè)位置參數(shù)驼仪。在下一篇文章掸犬,將會(huì)講述最后一個(gè)流程:繪制流程。希望這篇文章給大家對(duì)View的工作流程的理解帶來(lái)幫助绪爸,謝謝閱讀湾碎。

更多閱讀
Android View 測(cè)量流程(Measure)完全解析
Android View 繪制流程(Draw) 完全解析

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市奠货,隨后出現(xiàn)的幾起案子介褥,更是在濱河造成了極大的恐慌,老刑警劉巖仇味,帶你破解...
    沈念sama閱讀 216,591評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件呻顽,死亡現(xiàn)場(chǎng)離奇詭異雹顺,居然都是意外死亡丹墨,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門嬉愧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)贩挣,“玉大人,你說(shuō)我怎么就攤上這事没酣⊥醪疲” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 162,823評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵裕便,是天一觀的道長(zhǎng)绒净。 經(jīng)常有香客問(wèn)我,道長(zhǎng)偿衰,這世上最難降的妖魔是什么挂疆? 我笑而不...
    開(kāi)封第一講書人閱讀 58,204評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮下翎,結(jié)果婚禮上缤言,老公的妹妹穿的比我還像新娘。我一直安慰自己视事,他們只是感情好胆萧,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,228評(píng)論 6 388
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著俐东,像睡著了一般跌穗。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上虏辫,一...
    開(kāi)封第一講書人閱讀 51,190評(píng)論 1 299
  • 那天蚌吸,我揣著相機(jī)與錄音,去河邊找鬼乒裆。 笑死套利,一個(gè)胖子當(dāng)著我的面吹牛推励,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播肉迫,決...
    沈念sama閱讀 40,078評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼验辞,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了喊衫?” 一聲冷哼從身側(cè)響起跌造,我...
    開(kāi)封第一講書人閱讀 38,923評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎族购,沒(méi)想到半個(gè)月后壳贪,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡寝杖,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,550評(píng)論 2 333
  • 正文 我和宋清朗相戀三年违施,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瑟幕。...
    茶點(diǎn)故事閱讀 39,727評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡磕蒲,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出只盹,到底是詐尸還是另有隱情辣往,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評(píng)論 5 343
  • 正文 年R本政府宣布殖卑,位于F島的核電站站削,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏孵稽。R本人自食惡果不足惜许起,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,022評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望肛冶。 院中可真熱鬧街氢,春花似錦、人聲如沸睦袖。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,672評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)馅笙。三九已至伦乔,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間董习,已是汗流浹背烈和。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,826評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留皿淋,地道東北人招刹。 一個(gè)月前我還...
    沈念sama閱讀 47,734評(píng)論 2 368
  • 正文 我出身青樓恬试,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親疯暑。 傳聞我的和親對(duì)象是個(gè)殘疾皇子训柴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,619評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容