Android LinearLayout

大家好, 我是奶綠茶
LinearLayout：
子元素依序排成一列(或是一行), 就像是 Flex 裡的 HBox(或VBox)
我們在一個 LinearLayout (horizontal)裡，放置三個 Button , 其寬、高皆為 wrap_content
語法：

<LinearLayout
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:background="#ff0000" >        
   <Button
     android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A_btn"          
        />
        <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"         
         android:text="B_btn" 
        />
        <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="C_btn" 
        />
</LinearLayout> 

結果：




如果現在想要讓三個 Button 能夠自動置滿整個 LinearLayout 寬度的話
可以使用 android:layout_weight 屬性, 指的就是"重要度"

layout_weight 屬性 在 LinearLyaout 和該子物件裡, 會有二種不同的結果
先看比較好瞭解的部份, layout_weight 寫在子物件裡

件條：當子物件的 layout_width="wrap_content" 時 (android:orientation="horizontal")
設定三個 Button 的 weight 值
A_btn weight = 2
B_btn weight = 1
C_btn weight = 0 (default value)

這樣指的意思就是
三個 Button 先依自已的寬度排好, 如上圖片所示
結果依剩下的空間, 來做分配
A_btn weight 為 2 , 較為重要, 所以分到剩下空間的 2/3
B_btn weight 為 1 , 分到剩下空間的 1 /3
C_btn weight 為 0 , 所以寬度不變
結論就是 weight 為大, 重要度也越大
修正一下 xml layout

<LinearLayout
  android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#ff0000" >
        
        <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="2"
         android:text="A_btn"          
        />
        <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"         
         android:text="B_btn" 
        />
        <Button
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="C_btn" 
        />
     </LinearLayout> 

結果




第二種情況
layout_weight 寫在 LinearLayout
假設現在有二個 LinearLayout 分邊叫 R , G

<LinearLayout
 android:orientation="horizontal"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#ff0000" >
 <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="2"
  android:text="A_btn"          
 />
 <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_weight="1"         
  android:text="B_btn" 
 />
 <Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="C_btn" 
 />
</LinearLayout>  



<LinearLayout
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#00ff00" >
 <EditText 
        android:text="abcx" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1" />
    <TextView 
        android:text="13456" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout> 

結果, 你會看到只有紅色的 LinearLayout
因寫他怖滿了整個 layout




加入 weight 屬性
R LinearLayout weight = 2
G LinearLayout weight = 1
結果是
畫面的 2/3 分給 weight 為1 的 G
畫面的 1/3 分給 weight 為2 的 R
剛好倒過來
結論就是 weight 越大, 比重越小

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2"
    android:background="#ff0000" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="A_btn"          
 />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"         
        android:text="B_btn" 
 />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C_btn" 
        />
</LinearLayout>  
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:background="#00ff00" >
    <EditText 
        android:text="abcx" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1" />
    <TextView 
        android:text="13456" 
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
        android:layout_weight="1" />
</LinearLayout>