Android中的Layout_weight終極研究

以前在做UI佈局時,也經常用Layout_weight屬性,有時會遇到莫名其妙的佈局問題,但總沒研究懂。一直想做深入分析,但總是沒耐心。遇到問題就找替代方法解決,但終非長久之計。這次下決心給它弄透!

以前一直沒弄懂Layout_weight是什麼意思,自己寫代碼測試也出來了不同的情況,最近看了一篇帖子感覺分析的很好,轉貼出來學習下


佈局文件是:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button1"
/>
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:text="Button2"
/>
</LinearLayout>
出現的佈局是:button1佔了2/3,button2佔了1/3。
57e34f80d09736ec6d811907.jpg.png

但是如果將佈局文件中的button的屬性android:layout_width="fill_parent"改爲android:layout_width="wrap_content"那麼出現的結果爲:button1佔了1/3,button2佔了2/3。
3.png
出現這樣的結局是什麼意思呢?下面是人家的詳解:轉載過來:

*******轉載的解釋*********
linearLayout中包含有weight的child時,linearLayout會measure兩次:
設屏幕寬度爲X
第一次:button1的measuredWidth爲X,button2也爲X (因爲用了weight,所以linearLayout每次measure child時不考慮前一個已經佔用的大小),total_width爲2X
第二次:計算delta=x-total_width=-x,然後會將button1的寬度設爲
x+delta*1/3=0.66x, button2的寬度爲 x+delta*2/3=0.33x
      那我現在對這句話重新概括一下:“因爲設置了button1的權重最小,所以它佔用的佈局優先級就越高”,也許在Android裏面佈局並沒有優先級之說,我這裏只是爲了說明問題,自己定義的,所以朋友們不要拍磚。
      那首先分析一下當layout_width屬性設置為fill_parent的時候,即充滿父佈局,當然意思是這個控件要根據weight的設置盡可能 的大,因此,依上例而論,button1的weight設為1,button2的weight設置為2.即button的優先級最高,因此,要填充父佈局 就要button1先來填充,盡可能的大,那這個盡可能又是多少呢,這就要綜合layout裡其他控件的weight值了,然後做一下運 算,button1佔據2/3,button2佔據1/3.你也可以把button2設置為一個非常大的數,比如2000,此時在Graphical Layout模式下可以看到button1填充滿了整個寬度,而看不到button2的影子,事實上button2還是存在的,你把鼠標指向 button1的後面就可以看到一個長長的豎條,那個就是button2,已經非常非常小了。因此,在layout_width設置為fill_parent的時候,weight所代表的是你的控件要優先盡可能的大。

     接著是當layout_weight設置為wrap_content的時候,即適應內容的寬度,意思是這個控件要盡可能的小,只要能把內容顯示出來 就可以了,同樣的,如果把button1和button2的layout_weight設置為wrap_content後,button1的weight 為1,button2的weight為2.那麼button1要優先盡可能的小,而button2也要盡可能的小,只是優先級不一樣,因為設置了 weight,所以這兩個控件總的寬度要填滿父佈局的寬度,所以就又要計算每個控件所佔據的大小,此時,button1的優先級較高,共有兩份,一份 1/3,一份2/3,button1要盡可能的小,那button1當然要選1/3,因此,我們看到的效果反而是button2佔據的較大。這裡要說的是 如果把權值同樣做如下設置:button1為1,button2為2000,那button1是不是就要佔據1/2000的空間呢?這麼理解就錯了,剛才 說了,要盡可能的小,但這個小是有一個限度的,那就 是wrap_content,就是還要是內容完完整整的顯示出來,同樣的,盡可能的大也是有一個限度的,那就是父佈局的寬度。因此,在 layout_width設置為wrap_content的時候,weight所代表的是你的控件要優先盡可能的大。
所以,要對weight做了解,要深深的理解下面兩句話:
在layout_width設置為fill_parent的時候,layout_weight所代表的是你的控件要優先盡可能的大,但這個大是有限度的,即fill_parent.
在layout_width設置為wrap_content的時候,layout_weight所代表的是你的控件要優先盡可能的小,但這個小是有限度的,即wrap_content.

layout_height 同 layout_width.



最後貼幾張圖出來:
1. layout_width="fill_parent", button1的weight=1,button2的weight=2;

1.png


2.layout_width="fill_parent", button1的weight=1,button2的weight=2000;
2.png


3.layout_width="wrap_content", button1的weight=1,button2的weight=2;



4.layout_width="wrap_content", button1的weight=1,button2的weight=2000;
4.png
*******轉載的解釋*********轉載地址:http://hi.baidu.com/ljlkings/blog/item/fa2a59803f839a82f603a6b2.html?timeStamp=1305190390481

 

 

  SDK中的解釋

 

Indicates how much of the extra space in the LinearLayout will be allocated to the view associated with these LayoutParams. Specify 0 if the view should not be stretched. Otherwise the extra pixels will be pro-rated among all views whose weight is greater than 0.

 

  重點有兩個,一個是layout_weight表示LinearLayout中額外空間的劃分(可能擴展應用layout_weight前的大小也可能壓縮),另一個是按比例.

 

  以下說的都以 android:orientation="horizontal" 爲例

 

  看了一下源碼,雖說不太懂,但瞭解了下大概意思,按照自己的理解總結一下,直接寫一下簡化的代碼吧(下面的代碼是LinearLayout源文件中一部分的精簡,變量名稱含義可能不準確,爲敘述方便暫作此解釋):

 

複製代碼
//Either expand children with weight to take up available space or
// shrink them if they extend beyond our current boundsint delta = widthSize - mTotalLength;
if (delta != 0 && totalWeight > 0.0f) {
    float weightSum = mWeightSum > 0.0f ? mWeightSum : totalWeight;
    for (int i = 0; i < count; ++i) {
        final View child = getVirtualChildAt(i);

        if (child == null || child.getVisibility() == View.GONE) {
            continue;
        }
        
        final LinearLayout.LayoutParams lp =
                (LinearLayout.LayoutParams) child.getLayoutParams();

        float childExtra = lp.weight;
        if (childExtra > 0) {
            int share = (int) (childExtra * delta / weightSum);
       weightSum -= childExtra;
        delta  -= share;
            int childWidth = child.getMeasuredWidth() + share;
            if (childWidth < 0) {
                childWidth = 0;
            }
        }
    }
}
複製代碼

 

變量含義

 

widthSize:     LinearLayout的寬度

 

mTotalLength:  所有子View的寬度的和(還沒用考慮layout_weight)

 

totalWeight:   所有子View的layout_weight的和

 

mWeihtSUm:    LinearLayout的android:weightSum屬性

 

過程分析:

 

首先計算出額外空間(可以爲負)如果額外空間不爲0並且有子View的layout_weight不爲0的話按layout_weight分配額外空間:

 

int delta = widthSize - mTotalLength;
if (delta != 0 && totalWeight > 0.0f) {
  ...
}

 

如果LinearLayout設置了weightSum則覆蓋子View的layout_weight的和:

 

float weightSum = mWeightSum > 0.0f ? mWeightSum : totalWeight;

 

然後遍歷LinearLayout的子元素,如果不爲null且Visibility不爲GONE的話,取得它的LayoutParams,如果它的layout_weight大於0,根據weightSum與它的weight計算出分配給它的額外空間

 

複製代碼
if (childExtra > 0) {
    int share = (int) (childExtra * delta / weightSum);
   weightSum -= childExtra;
   delta -= share;

    int childWidth = child.getMeasuredWidth() + share;
    if (childWidth < 0) {
        childWidth = 0;
    }
}
複製代碼

 


網上有解釋說layout_weight表示重要程度,表示劃分額外空間的優先級,通過代碼可以知道這種觀點是錯誤 的.layout_weight表示劃分的比例,至於當View的layout_width爲fill_parent時layout_weight比例相 反的問題按我的理解可以作以下解釋:

 

比如說如下XML:

 

複製代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#00ff00"
    android:weightSum="0"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/imageViewLoginState"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="1" >
    </Button>

    <Button
        android:id="@+id/imageViewLoginState1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="2" >
    </Button>

    <Button
        android:id="@+id/imageViewLoginState2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:text="3" >
    </Button>

</LinearLayout>
複製代碼

 



 

按一般理解,3個Button的比例應該爲1:1:2,但實際情況是這樣的:

 

 

按我的理解,系統是這樣設置按鈕的大小的,變量名按前面代碼的意義:

 

假設Container即LinearLayout的寬度爲PARENT_WIDTH

 

三個按鈕的寬度都是FILL_PARENT,所以在應用layout_width之前,三個按鈕的寬度都爲PARENT_WIDTH

 

所以額外空間 delta = PARENT_WIDTH - 3 * PARENT_WIDTH = -2 * PARENT

 

因爲LinearLayout沒有設置android:weightSum(默認爲0,設置爲0就當沒設置吧),所以 mWeightSum = 1 + 1 +2 =4

 

所以:

 

  第一個按鈕的寬度爲PARENT_WIDTH + share = PARENT_WIDTH + (layout_weight * delta / mWeightSum) = PARENT_WIDTH + (1 * (-2 * PARENT_WIDTH) /4) = 1 /2 *PARENT_WIDTH

 

    weightSum -= childExtra;(=3)
    delta  -= share;(=-3/2 * PARENT_WIDTH)

 

  第二個按鈕的寬度爲PARENT_WIDTH + share = PARENT_WIDTH + (layout_weight * delta / mWeightSum) = PARENT_WIDTH + (1 * (-3 / 2 * PARENT_WIDTH) /3) = 1 /2 *PARENT_WIDTH

 

    weightSum -= childExtra;(=2)
    delta  -= share;(=-PARENT_WIDTH)

 

  第三個按鈕的寬度爲PARENT_WIDTH + share = PARENT_WIDTH + (layout_weight * delta / mWeightSum) = PARENT_WIDTH + (2 * (- PARENT_WIDTH) /2) = 0

 

所以最終的而已就是前兩個按鈕平分LinearLayout,第三個按鈕消失了.

 

 

 

  大致過程是這樣,但不全對,比如如果上例中LinearLayout的weightSum設置爲2的話,前兩個按鈕的寬度爲0,但當計算第三個 按鈕的寬度是mWeightSum = 0,但layout_weight * delta / mWeightSum無法計算,不知道系統怎麼處理的,在我的能力之外了,weightSum爲2時的效果圖:

 

 

  weightSum爲3時的效果圖:

 

 

 

 

  SDK中說明的是,layout_weight表示額外空間怎麼劃分,要注意額外2字,要有額外的空間纔可以將按比例將其分配給設置了 layout_weight的子View,所以,如果LinearLayout設置爲WRAP_CONTENT的話是沒有額外的空間 的,layout_weight就沒有用處,所只要layout_width不設置爲WRAP_CONTENT就行,也可以設置爲具體的值,如果值太小的 話,額外空間爲負,可能壓縮子控件,使其大小比XML文件中定義的小,例如:

 

複製代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:background="#00ff00"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="1" >
    </Button>

    <Button
        android:id="@+id/button2"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="2" >
    </Button>

    <Button
        android:id="@+id/button3"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_weight="2"
        android:text="3" >
    </Button>

</LinearLayout>
複製代碼

 

額外空間 delta = 100- 3 * 60 = -80

 

mWeightSum = 1 + 1 +2 =4

 

所以:

 

  第一個按鈕的寬度爲60+ share = 60 + (layout_weight * delta / mWeightSum) = 60 + (1 * (-80) /4) = 40

 

    weightSum -= childExtra;(=3)
    delta  -= share;(=-60)

 

  第二個按鈕的寬度爲60 + share = 60 + (layout_weight * delta / mWeightSum) = 60 + (1 * (-60) /3) = 40

 

    weightSum -= childExtra;(=2)
    delta  -= share;(=-40)

 

  第三個按鈕的寬度爲60 + share = 60 + (layout_weight * delta / mWeightSum) = 60 + (2 * (-40) /2) = 20

 

效果圖:

 

 

 

 

以下代碼也說明了layout_weight表示額外空間的分配:

 

複製代碼
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:background="#00ff00"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="60dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="1" >
    </Button>

    <Button
        android:id="@+id/button2"
        android:layout_width="40dp"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="2" >
    </Button>

   
</LinearLayout>
複製代碼

額外空間爲100,所以Button1的寬度爲60+100/2=110,Button2的寬度爲40+100/2=90

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章