1. 程式人生 > >自定義View原理篇(2)- layout過程

自定義View原理篇(2)- layout過程

1. 簡介

  • View的繪製過程分為三部分:measurelayoutdraw

    measure用來測量View的寬和高。
    layout用來計算View的位置。
    draw用來繪製View。

  • 經過measure之後就進入了layout過程,measure過程可以檢視這篇文章:自定義View原理篇(1)-measure過程

  • 本章主要對layout過程進行詳細的分析。

  • 本文原始碼基於android 27

2. layout的始點

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

2.1 ViewRootImpl的performTraversals

    private void performTraversals() {

        //...

        //獲得view寬高的測量規格,mWidth和mHeight表示視窗的寬高,lp.widthhe和lp.height表示DecorView根佈局寬和高
        int childWidthMeasureSpec = getRootMeasureSpec(mWidth, lp.width);
        int childHeightMeasureSpec = getRootMeasureSpec(mHeight, lp.height);
        performMeasure(childWidthMeasureSpec, childHeightMeasureSpec);//執行測量
//... performLayout(lp, mWidth, mHeight);//執行佈局 //... performDraw();//執行繪製 //... }

再來看看performLayout():

2.2 ViewRootImpl的performLayout

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

        //...
//呼叫layout host.layout(0, 0, host.getMeasuredWidth(), host.getMeasuredHeight()); //... }

這裡的host就是DecorView,如果不知道DecorView,可以看看這篇文章:從setContentView揭開DecorView
layout()方法傳入的0,0,host.getMeasuredWidth,host.getMeasuredHeight就是一個View的上下左右四個位置,可以看到,DecorView都是從左上角位置(0,0)開始進行佈局的,其寬高則為測量寬高。

下面重點來分析Layout過程

3.layout過程分析

layout用來計算View的位置,即確定ViewLeftTopRightBottom這四個頂點的位置。如下圖所示:
View的位置座標.png

同樣,layout過程根據View的型別也可以分為兩種情況:

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

我們對這兩種情況分別進行分析。

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佈局模式是否有一些特殊的邊界
        //有特殊邊界則呼叫setOpticalFrame(l, t, r, b)
        //無特殊邊界則呼叫setFrame(l, t, r, b)
        boolean changed = isLayoutModeOptical(mParent) ?
                setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

        // 若View的大小或位置有變化
        // 會重新確定該View所有的子View在父容器的位置,通過呼叫onLayout()來實現。
        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();

        //呼叫setFrame()
        return setFrame(
                left   + parentInsets.left - childInsets.left,
                top    + parentInsets.top  - childInsets.top,
                right  + parentInsets.left + childInsets.right,
                bottom + parentInsets.top  + childInsets.bottom);
    }

setOpticalFrame()裡面最終還是會呼叫到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中就是個空實現,由於單一的View沒有子View,因此不需要確定子View的佈局,所以onLayout()也無需實現。

3.1.5 單一View的layout過程流程圖

所以,單一ViewLayout還是很簡單的,來張流程圖簡單總結一下:
單一View的layout過程.png

3.2 ViewGroup的layout過程

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

onLayout()方法在ViewGroup是一個抽象方法,需要其子類去重寫,因為確定子View的位置與具體的佈局有關,所以ViewGroup中沒有辦法統一實現。

我們在這裡看看LinearLayoutonLayout()實現:

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會區分方向來進行不同的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的數量
        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;

                //呼叫setChildFrame(),這裡確定子View的位置
                setChildFrame(child, childLeft, childTop + getLocationOffset(child),
                        childWidth, childHeight);

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

                //...
            }
        }
    }

layoutVertical()通過遍歷子View,並呼叫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()中就是呼叫子Viewlayout()方法來來確定子View的位置。

3.2.4 ViewGroup的layout過程流程圖

ViewGroup的layout過程.png

4. 自定義View

4.1 自定義單一view

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

4.2 自定義ViewGroup

由於ViewGroup沒實現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);

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

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

            //根據上面的計算結果設定子View的4個頂點
            child.layout(mLeft, mTop, mRight, mBottom);
        }
    }

5. 其他

5.1 getWidth()與getMeasuredWidth()區別,getHeight()與getMeasuredHeight()同理

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

一般情況下,這兩者獲得的值是一樣的,我們可以來看看他們的程式碼實現:

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

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

結合原始碼中的各種賦值過程,getWidth()的值就是測量出的寬度。

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

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

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