在 Android 開發實務上,由於每隻手機所提供的解析度都不一樣,所以如果要依比例切割版型,最好的方式還是使用「android:layout_weight」,但就開發的實務上,「android:layout_weight」並不一定會依我們所預想的比例來實現切割版型,舉例來說,如果有以下的程式碼:

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="9">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
</LinearLayout>

 


以一般人的邏輯來想,這是將上面切成兩等份,其中 Button4 佔了1/10,而 Button 3 佔了 9/10,而實際上也正是如我們所預料的結果。但再看看以下的程式碼:

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="9">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
</LinearLayout>

 

如果執行以上的程式碼,可以發現同樣的想法,不同的是,只將「 android:layout_height」改為「match_parent (fill_parent)」, Button4 竟佔了9/10,而 Button 3 只佔了 1/10,這是為什麼呢?

答案就是「match_parent」和「wrap_content」的差異!

「wrap_content」是指依內容填塞,而填塞的內容要符合子元件的內容,也就是說要盡可能的小,也因此,Android 先去參考權重值,這時發現有兩個權重值,分別是 1/10 和 9/10,因為 Button 4 的權重值較低,所以將 Button 4 設為 1/10,Button 3 設定為 9/10。

但是如果是使用「match_parent」,元件要愈大愈好,所以 Android 在初使化時,也一樣會參考權重值,一樣是發現已經算好了兩種權重值,分別是 1/10 和 9/10,基於元件愈大愈好的原則,所以在「match_parent」的情況下,權重值愈高的元件,所分配到的比例就愈低,就將 Button 4 設為 9/10,便把 Button 3 設定為 1/10 了!

但是聰明的人馬上就想到另一種變形。

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="3">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button5" />
   </LinearLayout>
</LinearLayout>

 

這就就會問的是,在使用「match_parent」的情況下,為什麼 Button 5 不見了呢?這點只能猜測的是, Android 在「match_parent」設定權重值的情況下,只會將視窗切成兩個等分,而挑法是去找權重值最低的兩個,來做分配。以這個例子來說,會去找權重值最低的 Button 4 和 Button 3,而 Button 5 因為權重值較高,所以就不予理會。所以就將 Button 4 設為 2/3,將 Button 3 設為 1/3。

最後一種情況是,同樣是採用 match_parent,有兩個 layout_weight 是相同的,如下列程式碼:

<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/layout_outer"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1" >
 <Button
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:text="Button4" />       
  </LinearLayout>

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button3" />
   </LinearLayout>
   <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:layout_weight="2">
        <Button
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:text="Button5" />
   </LinearLayout>
</LinearLayout>

 

為什麼 Button4 會分到 3/5 呢?因為這時三個權重值有兩個是相同的,Android 無法挑掉最高的權重值的情況下,,基於元件愈大愈好的原則,所以在「match_parent」的情況下,權重值愈高的元件,所分配到的比例就愈低,所以Button5 和 Button3 分別分到 1/5,那剩下的就會直接分給 Button4 囉!

以上是開發的小小心得,是以比較白話的方式來呈現,當然 Android 實做的細節海芋沒有去研究,只是寫這篇文章來記錄自己的開發過程,有錯的地方也請大家多多指導囉!

Written by 

城市裡的小小迷僮工程師,喜歡用鍵盤記錄個人生活的點滴,身邊的人事物都我的靈感,用心踏出每個腳步,用文字灌溉《海芋小站》,用專業解決問題。

發表迴響