View之layout過程

1. 介紹

  • View的繪制過程分為三部分:測量念恍、位置繪制

    測量View的寬和高: measure
    計算View的位置:layout
    繪制View: draw

  • 經(jīng)過measure之后就進(jìn)入了layout過程悬秉,measure過程可以查看這篇文章:自定義View原理篇-measure過程营密。

  • 本篇文章主要對layout過程進(jìn)行分析械媒。

2. layout的開始

measure一樣,layout也是始于ViewRootImplperformTraversals():

2.1 ViewRootImpl的performTraversals

    private void performTraversals() {

        //獲得view寬高的測量規(guī)格,mWidth和mHeight表示窗口的寬高评汰,lp.widthhe和lp.height表示DecorView根布局寬和高
        int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
        int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
        //進(jìn)行測量
        performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);

        //...
       //進(jìn)行布局
        performLayout(lp, mWidth, mHeight);

        //...
        //進(jìn)行繪制
        performDraw();
        //...
    }

進(jìn)一步看看performLayout():

2.2 ViewRootImpl的performLayout

    private void performLayout(WindowManager.LayoutParams lp, int desiredWindowWidth,
            int desiredWindowHeight) {

        //...

        //調(diào)用layout
        host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight());

        //...
    }

這里的host就是DecorView,如果不知道DecorView纷捞,可以自己私下找文章理解理解。
layout()方法傳入的0,0,host.getMeasuredWidth,host.getMeasuredHeight就是一個View的上下左右四個位置被去,可以看到主儡,DecorView都是從左上角位置(0,0)開始進(jìn)行布局的,其寬高則為測量寬高惨缆。

下面重點來分析Layout過程

3.layout過程分析

layout用來計算View的位置糜值,即確定ViewLeft丰捷、TopRightBottom這四個頂點的位置臀玄。如下圖所示:

View的位置坐標(biāo)展示.png

同樣瓢阴,layout過程根據(jù)View的類型也可以分為兩種情況:

  1. 計算單一View位置時,只需計算其自身即可健无;
  2. 計算ViewGroup位置時荣恐,需要計算ViewGroup自身的位置以及其包含的子ViewViewGroup中的位置。

我們對這兩種情況分別進(jìn)行分析累贤。

3.1 單一View的layout過程

單一Viewlayout過程是從Viewlayout()方法開始:

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

        //isLayoutModeOptical(mParent);//判斷該view布局模式是否有一些特殊的邊界
        //有特殊邊界則調(diào)用setOpticalFrame(l, t, r, b)
        //無特殊邊界則調(diào)用setFrame(l, t, r, b)
        boolean changed = isLayoutModeOptical(mParent) ?
                setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

        // 若View的大小或位置有變化
        // 會重新確定該View所有的子View在父容器的位置叠穆,通過調(diào)用onLayout()來實現(xiàn)。
        if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
            onLayout(changed, l, t, r, b);

        // ...
    }

我們接下來分別看看setOpticalFrame()臼膏,setFrame()硼被,onLayout()這三個方法。

3.1.2 View的setOpticalFrame

先來看看setOpticalFrame()

    private boolean setOpticalFrame(int left, int top, int right, int bottom) {
        Insets parentInsets = mParent instanceof View ?
                ((View) mParent).getOpticalInsets() : Insets.NONE;
        Insets childInsets = getOpticalInsets();

        //調(diào)用setFrame()
        return setFrame(
                left   + parentInsets.left - childInsets.left,
                top    + parentInsets.top  - childInsets.top,
                right  + parentInsets.left + childInsets.right,
                bottom + parentInsets.top  + childInsets.bottom);
    }

setOpticalFrame()里面最終還是會調(diào)用到setFrame()

3.1.3 View的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;

            //...

            //賦值渗磅,保存View的四個位置
            mLeft = left;
            mTop = top;
            mRight = right;
            mBottom = bottom;
            mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);

            //...
        }
        return changed;
    }

可以看到嚷硫,View的四個位置就在這里給確定下來了。

3.1.4 View的onLayout

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

onLayout()View中就是個空實現(xiàn)始鱼,由于單一的View沒有子View仔掸,因此不需要確定子View的布局,所以onLayout()也無需實現(xiàn)医清。

3.1.5 單一View的layout過程流程圖

所以起暮,單一ViewLayout還是很簡單的,來張流程圖簡單總結(jié)一下:

單一View的layout過程.png

3.2 ViewGroup的layout過程

ViewGrouplayout過程除了需要計算ViewGroup自身的位置外会烙,還需要計算其包含的子ViewViewGroup中的位置负懦。
計算ViewGroup自身的位置實際上跟單一View的過程是一樣的,這里就不重述;唯一不同的就是單一ViewonLayout()實現(xiàn)為空柏腻,ViewGroup需要具體實現(xiàn)onLayout()方法纸厉。

onLayout()方法在ViewGroup是一個抽象方法,需要其子類去重寫五嫂,因為確定子View的位置與具體的布局有關(guān)残腌,所以ViewGroup中沒有辦法統(tǒng)一實現(xiàn)。

我們在這里看看LinearLayoutonLayout()實現(xiàn):

3.2.1 LinearLayout的onLayout

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

LinearLayout會區(qū)分方向來進(jìn)行不同的layout方法贫导,我們主要看下豎向的layoutVertical(),橫向的原理差不多這里就不看了蟆盹。

3.2.2 LinearLayout的layoutVertical

    void layoutVertical(int left, int top, int right, int bottom) {
        final int paddingLeft = mPaddingLeft;

        int childTop;//記錄子View的Top位置
        int childLeft;//記錄子View的Left位置

        // ...

        // 子View的數(shù)量
        final int count = getVirtualChildCount();

        // ...

        for (int i = 0; i < count; i++) {//遍歷子View
            final View child = getVirtualChildAt(i);
            if (child == null) {
                childTop += measureNullChild(i);
            } else if (child.getVisibility() != GONE) {

                //獲取子View的測量寬 / 高值
                final int childWidth = child.getMeasuredWidth();
                final int childHeight = child.getMeasuredHeight();

                //...

                //childTop加上子View的topMargin的值
                childTop += lp.topMargin;

                //調(diào)用setChildFrame()孩灯,這里確定子View的位置
                setChildFrame(child, childLeft, childTop + getLocationOffset(child),
                        childWidth, childHeight);

                //childTop加上子View的高度、bottomMargin等值
                //因此后面的子View就順延往下放逾滥,這符合垂直方向的LinearLayout的特性
                childTop += childHeight + lp.bottomMargin + getNextLocationOffset(child);

                //...
            }
        }
    }

layoutVertical()通過遍歷子View峰档,并調(diào)用setChildFrame()方法來確定子View的位置败匹。

3.2.3 LinearLayout的setChildFrame

    private void setChildFrame(View child, int left, int top, int width, int height) {
        child.layout(left, top, left + width, top + height);
    }

setChildFrame()中就是調(diào)用子Viewlayout()方法來來確定子View的位置。

3.2.4 ViewGroup的layout過程流程圖

ViewGroup的layout過程.png

4. 自定義View

4.1 自定義單一view

自定義單一view一般無需重寫onLayout()方法讥巡。

4.2 自定義ViewGroup

由于ViewGroup沒實現(xiàn)onLayout()掀亩,所以自定義ViewGroup需要重寫onLayout()方法。這里給個簡單的模板:

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

        //遍歷子View
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);

            //獲取當(dāng)前子View寬/高值
            int width = child.getMeasuredWidth();
            int height = child.getMeasuredHeight();

            //計算當(dāng)前子View的四個位置值
            int mLeft = l + 100 * i;//具體邏輯請自行計算
            int mTop = t + 100 * i;//具體邏輯請自行計算
            int mRight = mLeft + width;//具體邏輯請自行計算
            int mBottom = mTop + height;//具體邏輯請自行計算

            //根據(jù)上面的計算結(jié)果設(shè)置子View的4個頂點
            child.layout(mLeft, mTop, mRight, mBottom);
        }
    }

5. 其他

5.1 getWidth()與getMeasuredWidth()區(qū)別欢顷,getHeight()與getMeasuredHeight()同理

  • getWidth():獲得View最終的寬;
  • getMeasuredWidth():獲得View測量的寬;

一般情況下槽棍,這兩者獲得的值是一樣的,我們可以來看看他們的代碼實現(xiàn):

    public final int getMeasuredWidth() {
        return mMeasuredWidth & MEASURED_SIZE_MASK;
    }

    public final int getWidth() {
        return mRight - mLeft;
    }

結(jié)合源碼中的各種賦值過程抬驴,getWidth()的值就是測量出的寬度炼七。

當(dāng)然,我們可以通過重寫layout()來修改最終的寬度布持,但一般這沒有任何的實際意義豌拙,如:

    @Override
    public void layout(int l, int t, int r, int b) {

        // 修改傳入的位置參數(shù),這樣一來题暖,getWidth()獲得的寬度就比測量出來的寬度大上100了
        super.layout(l, t, r + 100, b + 100);
    }

5.2

本篇文章只是大概的講解一下位置的流程按傅,還需要大家自己下去好好的理解理解

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市胧卤,隨后出現(xiàn)的幾起案子唯绍,更是在濱河造成了極大的恐慌,老刑警劉巖灌侣,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件推捐,死亡現(xiàn)場離奇詭異,居然都是意外死亡侧啼,警方通過查閱死者的電腦和手機牛柒,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來痊乾,“玉大人皮壁,你說我怎么就攤上這事∧纳螅” “怎么了蛾魄?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長湿滓。 經(jīng)常有香客問我滴须,道長,這世上最難降的妖魔是什么叽奥? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任扔水,我火速辦了婚禮,結(jié)果婚禮上朝氓,老公的妹妹穿的比我還像新娘魔市。我一直安慰自己主届,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布待德。 她就那樣靜靜地躺著君丁,像睡著了一般。 火紅的嫁衣襯著肌膚如雪将宪。 梳的紋絲不亂的頭發(fā)上绘闷,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音涧偷,去河邊找鬼簸喂。 笑死,一個胖子當(dāng)著我的面吹牛燎潮,可吹牛的內(nèi)容都是我干的喻鳄。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼确封,長吁一口氣:“原來是場噩夢啊……” “哼除呵!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起爪喘,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤颜曾,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后秉剑,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體泛豪,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年侦鹏,在試婚紗的時候發(fā)現(xiàn)自己被綠了诡曙。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡略水,死狀恐怖价卤,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情渊涝,我是刑警寧澤慎璧,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站跨释,受9級特大地震影響胸私,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜鳖谈,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一岁疼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧蚯姆,春花似錦五续、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至郭毕,卻和暖如春它碎,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背显押。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工扳肛, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人乘碑。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓挖息,卻偏偏與公主長得像,于是被迫代替她去往敵國和親兽肤。 傳聞我的和親對象是個殘疾皇子套腹,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,033評論 2 355

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