2011年9月9日 星期五 | By: 雞米

[Android] layout_weight的妙用-讓View的大小以百分比率顯示(proportionate size)

Android所有的視覺物件(View)都是透過指定其layout_width、layout_height屬性來改變顯示大小,除了指定明確的數值外,另外還有特殊參數可以在特定需求下使用,例如,match_parent即填滿其父容器、wrap_content則根據其內容大小進行動態調整。

layout_width, layout_height並不支援百分比數值

有很多程式語言都可指定長寬一個百分比數值,讓其長寬以特定比例顯示,很遺憾Android的長寬屬性並無法透過指定百分比數值使其以特定比例顯示,但我相信對於需要開發適用於各種螢幕大小Application的程式設計者來說,長寬以百分比顯示這個功能是非常重要的。


以註冊功能為例,假設有個表單要讓使用者輸入,為了介面美觀考量總希望可以以滿版的形式呈現,雖然可以透過指定明確數值使其填滿介面,但因為Android的螢幕大小種類實在太多,以明確數值的方式絕對無法確保介面的一致性,例如下圖將表單放到螢幕較大的Device,就會發生介面留白過多的情況,如果介面大小可以以百分比的方式呈現,相信可以減少介面不一致的情況發生。



<?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"
>" 
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="姓名:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="50dp"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="電話:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="50dp"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="住址:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="50dp"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="備註:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="100dp"
  />
</LinearLayout>

layout_weight讓View的大小以百分比顯示

Linear layout提供了layout_weight屬性,讓其所有的子顯示物件可以透過設定該屬性來表明自己的重要性,這個重要權值主要影響的就是當linear layout中所有有定義明確長寬的物件都擺好之後,剩下的空間該如何分配給有宣告layout_weight屬性的物件,使所有剩下空間被填滿。

剩下空間的分配其實很簡單,weight權值愈高代表愈重要,因此剩下的空間會以權值比來分配,以下圖為例,假設剩下空間有三個View(A、B、C)要分配,其權值大小分別為3、1、1,因此它們所分配到的空間大小將會是3:1:1。



透過這樣的性質,你就可以針對自己開發的需求讓某些介面元件以百分比大小呈現,以維持介面的一致性,以上面的例子來說,將其以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"
>" 
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="姓名:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="0dp"
     android:layout_weight="1"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="電話:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="0dp"
     android:layout_weight="1"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="住址:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="0dp"
     android:layout_weight="1"
  />
  <TextView
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:text="備註:"
  />
  <EditText
     android:layout_width="fill_parent"
     android:layout_height="0dp"
     android:layout_weight="2"
  />
</LinearLayout>

0 意見:

張貼留言