Android布局屬性Layout_weight學習教程

Layout_weight是Android開發中一個比較常用的布局屬性,在面試中也經常被問到.下面通過執行個體徹底搞懂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="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3"/>
</LinearLayout>

在水平方向的線性布局中,有三個TextView,layout_width都是0dp,layout_weight分別為1,2,3,所以這三個TextView應該按1:2:3的比例分布,

　　 顯示效果:

　　

　　可以看到,雖然三個TextView是按1:2:3的比例進行分布的,但是第一個TextView卻沒有和另外兩個對齊,這是為什麼呢?

　　仔細看就能發現,雖然三個TextView不是對齊的,但是第一行的文本是對齊的.

　

　　我們只需將LinearLayout的baselineAligned屬性設定為false即可,baselineAligned表示是否以文本基準線對齊.

　　
　　這隻是對layout_weight屬性最基本的用法.假如把第一個TextView的layout_width該為wrap_content,會出現什麼情況呢?


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:baselineAligned="false">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="48dp"
        android:layout_weight="3"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3"/>
</LinearLayout>

　　看下效果:

　　

　　發現三個TextView並沒有再按照1:2:3的比例進行分配.其實,layout_weight屬性是先按控制項聲明的尺寸進行分配,然後將剩餘的尺寸按layout_weight的比例進行分配.　　

　　設螢幕總寬度為sum,第一個TextView聲明的尺寸為x,那麼,

　　第一個TextView的寬度為: x + (sum - x) * 1/6

　　第二個TextView的寬度為: (sum - x) * 2/6

　　第三個TextView的寬度為: (sum - x) * 3/6

　　為了證實這個結論,接下來繼續修改布局,將三個TextView的layout_width都設定為match_parent,把layout_weight分別設定為1,2,2


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:baselineAligned="false">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="1"
        android:background="#44ff0000"
        android:gravity="center"
        android:text="111111111111"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#4400ff00"
        android:gravity="center"
        android:text="2"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:layout_weight="2"
        android:background="#440000ff"
        android:gravity="center"
        android:text="3"/>
</LinearLayout>

　　先看下效果:

　　

　　看到這個結果可能會感到很詫異,第一個TextView的layout_weight明明比其它兩個的小,為什麼寬度卻比它們大呢?

　　我們按剛才得出的結論算一下.

　　依然設螢幕總寬度為sum,由於這三個TextView聲明的尺寸都是match_parent,也就是sum,那麼,

　　第一個TextView的寬度為: sum + (sum - 3*sum) * 1/5 = sum*3/5

　　第二個TextView的寬度為: sum + (sum - 3*sum) * 2/5 = sum*1/5

　　第三個TextView的寬度為: sum + (sum - 3*sum) * 2/5 = sum*1/5

　　三個TextView的寬度比例為 3:1:1,所以我們的結論是正確的.　　　　

　　需要注意的是,我們結論所說的剩餘的尺寸可能是負的,如 sum - 3*sum,

　　另外,通過最後這個例子可以看出,並不是layout_weight越大,寬度越大.

Android Layout_weight的深刻理解

首先看一下Layout_weight屬性的作用：它是用來分配屬於空間的一個屬性，你可以設定他的權重。很多人不知道剩餘空間是個什麼概念，下面 我先來說說剩餘空間。

看下面代碼：
 

    <?xml version="1.0" encoding="utf-8"?>     

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     

        android:orientation="vertical"     

        android:layout_width="fill_parent"     

        android:layout_height="fill_parent"     

        >     

    <EditText     

        android:layout_width="fill_parent"     

        android:layout_height="wrap_content"     

        android:gravity="left"     

        android:text="one"/>     

    <EditText     

        android:layout_width="fill_parent"     

        android:layout_height="wrap_content"     

        android:gravity="center"     

        android:layout_weight="1.0"     

        android:text="two"/>     

        <EditText     

        android:layout_width="fill_parent"     

        android:layout_height="wrap_content"     

        android:gravity="right"     

        android:text="three"/>     

    </LinearLayout>     

運行結果是：

看上面代碼：只有Button2使用了Layout_weight屬性，並賦值為了1，而Button1和Button3沒有設定 Layout_weight這個屬性，根據API，可知，他們預設是0

下面我就來講，Layout_weight這個屬性的真正的意思：Android系統先按照你設定的3個Button高度 Layout_height值wrap_content,給你分配好他們3個的高度，

然後會把剩下來的螢幕空間全部賦給Button2,因為只有他的權重值是1，這也是為什麼Button2佔了那麼大的一塊空間。

有了以上的理解我們就可以對網上關於Layout_weight這個屬性更讓人費解的效果有一個清晰的認識了。

我們來看這段代碼：

 

     <？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:orientation="horizontal" >   

        <TextView   

            android:background="＃ff0000"   

            android:layout_width="**"   

            android:layout_height="wrap_content"   

            android:text="1"   

            android:textColor="＠android:color/white"   

            android:layout_weight="1"/>   

        <TextView   

            android:background="＃cccccc"   

            android:layout_width="**"   

            android:layout_height="wrap_content"   

            android:text="2"   

            android:textColor="＠android:color/black"   

            android:layout_weight="2" />   

         <TextView   

            android:background="＃ddaacc"   

            android:layout_width="**"   

            android:layout_height="wrap_content"   

            android:text="3"   

            android:textColor="＠android:color/black"   

            android:layout_weight="3" />   

    </LinearLayout>

三個文字框的都是 layout_width=“wrap_content ”時，會得到以下效果

按照上面的理解，系統先給3個TextView分配他們的寬度值 wrap_content（寬度足以包含他們的內容1,2,3即可），然後會把剩下來的螢幕空間按照1:2:3的比列分配給3個textview，所以就 出現了上面的映像。

而當layout_width=“fill_parent”時， 如果分別給三個TextView設定他們的Layout_weight為1、2、2的話，就會出現下面的效果：

你會發現 1的權重小，反而分的多了，這是為什麼呢？？？網上很多人說是當layout_width=“fill_parent”時，weighth 值越小權重越大，優先順序越高，就好像在背口訣

一樣，其 實他們並沒有真正理解這個問題，真正的原因是Layout_width="fill_parent"的原因造成的。依照上面理解我們來分析：

系統先給3個textview分配他們所要的寬度fill_parent，也就是說每一都是填滿他的父控制項，這裡就死螢幕的寬度

那麼這時候的剩餘空間=1個parent_width-3個parent_width=-2個parent_width (parent_width指的是螢幕寬度 )

那麼第一個TextView的實際所佔寬度應該=fill_parent的寬度,即parent_width + 他所佔剩餘空間的權重比列1/5 * 剩餘空間大小（-2 parent_width）=3/5parent_width

同理第二個TextView的實際所佔寬度=parent_width + 2/5*(-2parent_width)=1/5parent_width;

第三個TextView的實際所佔寬度=parent_width + 2/5*(-2parent_width)=1/5parent_width；所以就是3:1:1的比列顯示了。

這樣你也就會明白為什麼當你把三個Layout_weight設定為1、2、3的話,會出現下面的效果了：

第三個直接不顯示了，為什麼呢？一起來按上面方法算一下吧：

系統先給3個textview分配他們所要的寬度fill_parent，也就是說每一都是填滿他的父控制項，這裡就死螢幕的寬度

那麼這時候的剩餘空間=1個parent_width-3個parent_width=-2個parent_width (parent_width指的是螢幕寬度 )

那麼第一個TextView的實際所佔寬度應該=fill_parent的寬度,即parent_width + 他所佔剩餘空間的權重比列1/6 * 剩餘空間大小（-2 parent_width）=2/3parent_width

同理第二個TextView的實際所佔寬度=parent_width + 2/6*(-2parent_width)=1/3parent_width;

第三個TextView的實際所佔寬度=parent_width + 3/6*(-2parent_width)=0parent_width；所以就是2:1:0的比列顯示了。第三個就直接沒有空間了。