你真的瞭解android:layout_weight嗎？

一直以來對android:layout_weight 屬性的理解停留在對其相對於的View按權重（或者說是比例）平分的概念中，因爲之前學習時看的書上就是這麼講的。最近才發現原來不僅僅是按權重平分，是對當前剩餘空間按權重平分。

初探

日常開發中，在LinearLayout中使用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="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">


    <TextView
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_weight="1.5"
        android:layout_height="wrap_content"
        android:text="用戶名"
        android:gravity="center"
        android:id="@+id/textView2" />

    <EditText
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text=""
        android:ems="10"
        android:id="@+id/editText"
        android:layout_weight="3" />
</LinearLayout>

    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="密碼"
            android:gravity="center"
            />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="確認面膜"
            android:gravity="center"
             />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>

</LinearLayout>

這裏使TextView和EditText的寬度爲0，讓後使其權重分別爲1.5和3，這樣整體效果會看起來比較整齊，當然用RelativeLayout也是能實現的，但是這樣更簡單一些，也更高效。

進階

在Android沒有推出android-percent-support-lib之前，甚至在其推出後，一直使用layout_weight實現“百分比”佈局。相比於wrap_content和match_parent ,巧妙的使用layout_weight可以很簡潔的實現界面按“百分比”佈局，當然這其中也有一些奧妙，這裏就做一下記錄。

首先看一下下面的佈局文件

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

ps:代碼高亮加粗不會弄呀

這段代碼實現的UI效果如下：

整個佈局是個垂直的LinearLayout，裏面有三個水平方向的LinearLayout，內部放置了三個TextView，三個TextView高度爲wrap_content；其內容和背景色也不同（這裏只是爲了看起來方便），重點是其寬度：

• 第一行內三個TextView

layout_width="wrap_content"

• 第二行內三個TextView

android:layout_width="match_parent"

• 第三行內三個TextView

android:layout_width="0dp"

而每一個LinearLayout內部三個TextView的layout_weight分別1，2，3。由此，看見由於其wrap_content的不同，是其layout_weight的分配收到了影響。這裏就來分析一下，按照之前所說，layout_weight會按屏幕剩餘空間，按權重分配空間。

• 第一種情況（第一個LinearLayout）

系統先給3個TextView分配他們的寬度值wrap_content（寬度足以包含他們的內容1,2,3即可），然後會把剩下來的屏幕空間按照1:2:3的比列分配給3個textview，
上面的UI 比重爲 ：
6*1/6 ，6*2/6，6*3/6 即1:2:3 ，如UI 第一行呈現的那樣。

• 第二種情況（第二個LinearLayout）

系統先給3個textview分配他們所要的寬度match_parent，也就是說每一都是填滿他的父控件，這裏就是屏幕的寬度
那麼這時候的剩餘空間=
1個parent_width-3個parent_width=-2個parent_width (parent_width指的是屏幕寬度 )

那麼第一個TextView的實際所佔寬度應該=match_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的比列顯示了。

即如UI第二行呈現的那樣。

• 第三種情況

  這種情況，其實和第一種是一樣的。

看到這裏，下次使用layout_weight時，如果放置的控件看不見了，就不會覺得奇怪了。

舉一反三

好了，接下來想想，如果把上面代碼裏三個TextView的權重依次改爲3，2，1 又會是一種怎樣的UI效果呢，想好了，看下面代碼和實際效果圖。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF424242"
        android:orientation="vertical">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">


            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

應該和你想的一樣吧。

好了，這裏就是對android:layout_weight的學習筆記，雖然是一個很簡單的屬性，但是巧妙的設置後，很方便的實現一些佈局。

---