View之layout過程

1. 介紹

  • View的繪制過程分為三部分：測(cè)量、位置、繪制。

    測(cè)量View的寬和高： measure
    計(jì)算View的位置：layout
    繪制View： draw

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

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

2. layout的開始

跟measure一樣,layout也是始于ViewRootImpl的performTraversals():

2.1 ViewRootImpl的performTraversals

    private void performTraversals() {

        //獲得view寬高的測(cè)量規(guī)格，mWidth和mHeight表示窗口的寬高，lp.widthhe和lp.height表示DecorView根布局寬和高
        int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
        int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
        //進(jìn)行測(cè)量
        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就是一個(gè)View的上下左右四個(gè)位置，可以看到，DecorView都是從左上角位置（0,0）開始進(jìn)行布局的，其寬高則為測(cè)量寬高。

下面重點(diǎn)來分析Layout過程

3.layout過程分析

layout用來計(jì)算View的位置，即確定View的Left、Top、Right 和 Bottom這四個(gè)頂點(diǎn)的位置。如下圖所示：

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

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

  1. 計(jì)算單一View位置時(shí)，只需計(jì)算其自身即可；
  2. 計(jì)算ViewGroup位置時(shí)，需要計(jì)算ViewGroup自身的位置以及其包含的子View在ViewGroup中的位置。

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

3.1 單一View的layout過程

單一View的layout過程是從View的layout()方法開始：

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的大小或位置有變化
        // 會(huì)重新確定該View所有的子View在父容器的位置，通過調(diào)用onLayout（）來實(shí)現(xiàn)。
        if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
            onLayout(changed, l, t, r, b);

        // ...
    }

我們接下來分別看看setOpticalFrame()，setFrame()，onLayout()這三個(gè)方法。

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()里面最終還是會(huì)調(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的四個(gè)位置
            mLeft = left;
            mTop = top;
            mRight = right;
            mBottom = bottom;
            mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);

            //...
        }
        return changed;
    }

可以看到，View的四個(gè)位置就在這里給確定下來了。

3.1.4 View的onLayout

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

onLayout()在View中就是個(gè)空實(shí)現(xiàn)，由于單一的View沒有子View，因此不需要確定子View的布局，所以onLayout()也無需實(shí)現(xiàn)。

3.1.5 單一View的layout過程流程圖

所以，單一View的Layout還是很簡(jiǎn)單的，來張流程圖簡(jiǎn)單總結(jié)一下：

單一View的layout過程.png

3.2 ViewGroup的layout過程

ViewGroup的layout過程除了需要計(jì)算ViewGroup自身的位置外，還需要計(jì)算其包含的子View在ViewGroup中的位置。
計(jì)算ViewGroup自身的位置實(shí)際上跟單一View的過程是一樣的，這里就不重述;唯一不同的就是單一View的onLayout()實(shí)現(xiàn)為空，ViewGroup需要具體實(shí)現(xiàn)onLayout()方法。

onLayout()方法在ViewGroup是一個(gè)抽象方法，需要其子類去重寫，因?yàn)榇_定子View的位置與具體的布局有關(guān)，所以ViewGroup中沒有辦法統(tǒng)一實(shí)現(xiàn)。

我們?cè)谶@里看看LinearLayout的onLayout()實(shí)現(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會(huì)區(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的測(cè)量寬 / 高值
                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)用子View的layout()方法來來確定子View的位置。

3.2.4 ViewGroup的layout過程流程圖

ViewGroup的layout過程.png

4. 自定義View

4.1 自定義單一view

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

4.2 自定義ViewGroup

由于ViewGroup沒實(shí)現(xiàn)onLayout()，所以自定義ViewGroup需要重寫onLayout()方法。這里給個(gè)簡(jiǎn)單的模板：

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

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

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

5. 其他

5.1 getWidth()與getMeasuredWidth()區(qū)別，getHeight()與getMeasuredHeight()同理

  • getWidth()：獲得View最終的寬;
  • getMeasuredWidth()：獲得View測(cè)量的寬;

一般情況下，這兩者獲得的值是一樣的，我們可以來看看他們的代碼實(shí)現(xiàn)：

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

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

結(jié)合源碼中的各種賦值過程，getWidth()的值就是測(cè)量出的寬度。

當(dāng)然，我們可以通過重寫layout()來修改最終的寬度，但一般這沒有任何的實(shí)際意義，如：

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

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

5.2

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

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容