Android中View測量、佈局及繪製原理

一、View繪製的流程框架

View的繪製是從上往下一層層迭代下來的。DecorView–>ViewGroup（—>ViewGroup）–>View ，按照這個流程從上往下，依次measure(測量),layout(佈局),draw(繪製)。

二、Measure流程

顧名思義，就是測量每個控件的大小。

調用measure()方法，進行一些邏輯處理，然後調用onMeasure()方法，在其中調用
setMeasuredDimension()設定View的寬高信息，完成View的測量操作。

public final void measure(int widthMeasureSpec, int heightMeasureSpec) {

}

measure()方法中，傳入了兩個參數 widthMeasureSpec, heightMeasureSpec 表示View的寬高的一些信息。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
    getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}

由上述流程來看Measure流程很簡單，關鍵點是在於widthMeasureSpec,heightMeasureSpec這兩個參數信息怎麼獲得？

如果有了widthMeasureSpec, heightMeasureSpec，通過一定的處理(可以重寫，自定義處理步驟)，從中獲取View的寬/高，調用setMeasuredDimension()方法，指定View的寬高，完成測量工作。

MeasureSpec的確定

先介紹下什麼是MeasureSpec？

MeasureSpec由兩部分組成，一部分是測量模式，另一部分是測量的尺寸大小。

其中，Mode模式共分爲三類

UNSPECIFIED ：不對View進行任何限制，要多大給多大，一般用於系統內部

EXACTLY：對應LayoutParams中的match_parent和具體數值這兩種模式。檢測到View所需要的精確大小，這時候View的最終大小就是SpecSize所指定的值

AT_MOST ：對應LayoutParams中的wrap_content。View的大小不能大於父容器的大小。

那麼MeasureSpec又是如何確定的？？？

子View的MeasureSpec值是根據子View的佈局參數（LayoutParams）和父容器的MeasureSpec值計算得來的，具體計算邏輯封裝在getChildMeasureSpec()裏。

我們來看getChildMeasureSpec()的源碼分析：

//作用：
/ 根據父視圖的MeasureSpec & 佈局參數LayoutParams，計算單個子View的MeasureSpec
//即子view的確切大小由兩方面共同決定：父view的MeasureSpec 和 子view的LayoutParams屬性 


public static int getChildMeasureSpec(int spec, int padding, int childDimension) {  

 //參數說明
 * @param spec 父view的詳細測量值(MeasureSpec) 
 * @param padding view當前尺寸的的內邊距和外邊距(padding,margin) 
 * @param childDimension 子視圖的佈局參數（寬/高）

    //父view的測量模式
    int specMode = MeasureSpec.getMode(spec);     

    //父view的大小
    int specSize = MeasureSpec.getSize(spec);     

    //通過父view計算出的子view = 父大小-邊距（父要求的大小，但子view不一定用這個值）   
    int size = Math.max(0, specSize - padding);  

    //子view想要的實際大小和模式（需要計算）  
    int resultSize = 0;  
    int resultMode = 0;  

    //通過父view的MeasureSpec和子view的LayoutParams確定子view的大小  


    // 當父view的模式爲EXACITY時，父view強加給子view確切的值
   //一般是父view設置爲match_parent或者固定值的ViewGroup 
    switch (specMode) {  
    case MeasureSpec.EXACTLY:  
        // 當子view的LayoutParams>0，即有確切的值  
        if (childDimension >= 0) {  
            //子view大小爲子自身所賦的值，模式大小爲EXACTLY  
            resultSize = childDimension;  
            resultMode = MeasureSpec.EXACTLY;  

        // 當子view的LayoutParams爲MATCH_PARENT時(-1)  
        } else if (childDimension == LayoutParams.MATCH_PARENT) {  
            //子view大小爲父view大小，模式爲EXACTLY  
            resultSize = size;  
            resultMode = MeasureSpec.EXACTLY;  

        // 當子view的LayoutParams爲WRAP_CONTENT時(-2)      
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {  
            //子view決定自己的大小，但最大不能超過父view，模式爲AT_MOST  
            resultSize = size;  
            resultMode = MeasureSpec.AT_MOST;  
        }  
        break;  

    // 當父view的模式爲AT_MOST時，父view強加給子view一個最大的值。（一般是父view設置爲wrap_content）  
    case MeasureSpec.AT_MOST:  
        // 道理同上  
        if (childDimension >= 0) {  
            resultSize = childDimension;  
            resultMode = MeasureSpec.EXACTLY;  
        } else if (childDimension == LayoutParams.MATCH_PARENT) {  
            resultSize = size;  
            resultMode = MeasureSpec.AT_MOST;  
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {  
            resultSize = size;  
            resultMode = MeasureSpec.AT_MOST;  
        }  
        break;  

    // 當父view的模式爲UNSPECIFIED時，父容器不對view有任何限制，要多大給多大
    // 多見於ListView、GridView  
    case MeasureSpec.UNSPECIFIED:  
        if (childDimension >= 0) {  
            // 子view大小爲子自身所賦的值  
            resultSize = childDimension;  
            resultMode = MeasureSpec.EXACTLY;  
        } else if (childDimension == LayoutParams.MATCH_PARENT) {  
            // 因爲父view爲UNSPECIFIED，所以MATCH_PARENT的話子類大小爲0  
            resultSize = 0;  
            resultMode = MeasureSpec.UNSPECIFIED;  
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {  
            // 因爲父view爲UNSPECIFIED，所以WRAP_CONTENT的話子類大小爲0  
            resultSize = 0;  
            resultMode = MeasureSpec.UNSPECIFIED;  
        }  
        break;  
    }  
    return MeasureSpec.makeMeasureSpec(resultSize, resultMode);  
}

關於getChildMeasureSpec()裏對於子View的測量模式和大小的判斷邏輯有點複雜；
現總結如下表：

規律總結：(以子View爲標準，橫向觀察)

當子View採用具體數值（dp / px）時，無論父容器的測量模式是什麼，子View的測量模式都是EXACTLY且大小等於設置的具體數值；
當子View採用match_parent時，子View的測量模式與父容器的測量模式一致，若測量模式爲EXACTLY，則子View的大小爲父容器的剩餘空間；若測量模式爲AT_MOST，則子View的大小不超過父容器的剩餘空間
當子View採用wrap_parent時，無論父容器的測量模式是什麼，子View的測量模式都是AT_MOST且大小不超過父容器的剩餘空間。

對於DecorView，其確定是通過屏幕的大小，和自身的佈局參數LayoutParams。這部分很簡單，根據LayoutParams的佈局格式（match_parent，wrap_content或指定大小），將自身大小，和屏幕大小相比，設置一個不超過屏幕大小的寬高，以及對應模式。

從這裏看出MeasureSpec的指定也是從頂層佈局開始一層層往下去，父佈局影響子佈局。

關於MeasureSpec和View的Measure過程還可以看這篇文章

三、Layout流程

測量完View大小後，就需要將View佈局在Window中，View的佈局主要通過確定上下左右四個點來確定的。

其中佈局也是自上而下，不同的是ViewGroup先在layout()中確定自己的佈局，然後在onLayout()方法中再調用子View的layout()方法，讓子View佈局。在Measure過程中，ViewGroup一般是先測量子View的大小，然後再確定自身的大小。

layout（）作用：確定View本身的位置,即設置View本身的四個頂點位置
源碼分析如下：（僅貼出關鍵代碼）

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

    // 當前視圖的四個頂點
    int oldL = mLeft;  
    int oldT = mTop;  
    int oldB = mBottom;  
    int oldR = mRight;  

    // setFrame（） / setOpticalFrame（）：確定View的位置
    // 即初始化四個頂點的值，然後判斷當前View大小和位置是否發生了變化並返回  （具體請看下面源碼分析）
      boolean changed = isLayoutModeOptical(mParent) ?
            setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);

    //如果視圖的大小和位置發生變化，會調用onLayout（）
    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {  

        // onLayout（）：確定該View所有的子View在父容器的位置
        // 由於單一View是沒有子View的，所以onLayout（）是一個空實現（
        onLayout(changed, l, t, r, b);  
  ...

}

上面看出通過 setFrame（） / setOpticalFrame（）：確定View自身的位置，通過onLayout()確定子View的佈局。 setOpticalFrame（）內部也是調用了setFrame（），所以具體看setFrame（）怎麼確定自身的位置佈局。

protected boolean setFrame(int left, int top, int right, int bottom) {
    ...
// 通過以下賦值語句記錄下了視圖的位置信息，即確定View的四個頂點
// 即確定了視圖的位置
    mLeft = left;
    mTop = top;
    mRight = right;
    mBottom = bottom;

    mRenderNode.setLeftTopRightBottom(mLeft, mTop, mRight, mBottom);
}

確定了自身的位置後，就要通過onLayout()確定子View的佈局。onLayout()是一個可繼承的空方法。

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

}

如果當前View就是一個單一的View，那麼沒有子View，就不需要實現該方法。如果當前View是一個ViewGroup，就需要實現onLayout方法，該方法的實現個自定義ViewGroup時其特性有關，必須自己實現。

由此便完成了一層層的的佈局工作。

四、Draw過程

View的繪製過程遵循如下幾步：

①繪製背景 background.draw(canvas)
②繪製自己（onDraw）
③繪製Children(dispatchDraw)
④繪製裝飾（onDrawScrollBars）

從源碼中可以清楚地看出繪製的順序:

public void draw(Canvas canvas) {

// 特別注意：
// 所有的視圖最終都是調用 View 的 draw （）繪製視圖（ ViewGroup 沒有複寫此方法）
// 在自定義View時，不應該複寫該方法，而是複寫 onDraw(Canvas) 方法進行繪製。
// 如果自定義的視圖確實要複寫該方法，那麼需要先調用 super.draw(canvas)完成系統的繪製，然後再進行自定義的繪製。
    ...

    /*
     * 繪製過程如下：
     *   1. 繪製view背景
     *   2. 繪製view內容
     *   3. 繪製子View
     *   4. 繪製裝飾（漸變框，滑動條等等）
     */

    int saveCount;
    if (!dirtyOpaque) {
          // 步驟1： 繪製本身View背景
        drawBackground(canvas);
    }

        // 如果有必要，就保存圖層（還有一個復原圖層）
        // 優化技巧：
        // 當不需要繪製 Layer 時，“保存圖層“和“復原圖層“這兩步會跳過
        // 因此在繪製的時候，節省 layer 可以提高繪製效率
        final int viewFlags = mViewFlags;
        if (!verticalEdges && !horizontalEdges) {

        if (!dirtyOpaque) 
             // 步驟2：繪製本身View內容
            onDraw(canvas);
        //  View 中：默認爲空實現
        // ViewGroup中：自定義View時需要進行復寫！！！！

..
        // 步驟3：繪製子View
        dispatchDraw(canvas);
       // 由於單一View沒有子View，所以View 中：默認爲空實現


        ...

        // 步驟4：繪製滑動條和前景色等等
        onDrawScrollBars(canvas);

        // we're done...
        return;
    }
    ...    
}

無論是ViewGroup還是單一的View，都需要實現這套流程，不同的是，在ViewGroup中，實現了 dispatchDraw()方法，而在單一子View中不需要實現該方法。自定義View一般要重寫onDraw()方法，在其中繪製不同的樣式。

dispatchDraw()作用遍歷子View並繪製

// 僅貼出重要代碼

// 特別注意：
// ViewGroup中：由於 系統 已經爲我們實現了該方法，所以我們一般都不需要重寫該方法
// View中默認爲空實現（因爲沒有子View可以去繪製）
protected void dispatchDraw(Canvas canvas) {
    ......

// 遍歷子View
    final int childrenCount = mChildrenCount;
    ......

    for (int i = 0; i < childrenCount; i++) {
            ......
            if ((transientChild.mViewFlags & VISIBILITY_MASK) == VISIBLE ||
                    transientChild.getAnimation() != null) {
              // 繪製視圖
              // 繼續看下面源碼分析
                more |= drawChild(canvas, transientChild, drawingTime);
            }
            ......
    }
}


// drawChild（）源碼分析
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
    // 最終還是調用了子 View 的 draw （）進行子View的繪製
    return child.draw(canvas, this, drawingTime);
}

零下十五度w

發佈了63 篇原創文章 · 獲贊 6 · 訪問量 3萬+

私信關注

Android中View測量、佈局及繪製原理

一、View繪製的流程框架

二、Measure流程

三、Layout流程

四、Draw過程

Android中DialogFragment的簡單使用及常見問題

Android掃描銀行卡獲取銀行卡號

Android Studio如何打包簽名

關於Android方法數量限制的問題

Window、Activity、DecorView以及ViewRoot之間的關係

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結