Android使用者介面設計：線性布局(1)

理解布局對於良好的Android程式設計來說很重要。在這個教程中，你將學習到所有關於線性布局的東西，它在螢幕上垂直地或水平地組織使用者介面控制項或者小工具。使用得當，線性布局可以作為基本的布局，基於這個布局來可以設計出許多有趣的Android程式使用者介面。

什麼是線性布局

線性布局是最簡單，Android開發人員使用得最多的布局類型之一，開發人員用它來組織你們的使用者介面上的控制項。線性布局的作用就像它的名字一樣：它將控制群組織在一個垂直或水平的形式。當布局方向設定為垂直時，它裡面的所有子控制項被組織在同一列中；當布局方向設定為水平時，所有子控制項被組織在一行中。

線性布局可以在XML布局資源檔中定義，也可以用Java代碼在程式中動態定義。

展示了一個包含7個TextView控制項的線性布局。這個線性布局方向被設定為垂直，導致每個TextView控制項被顯示在一列當中。每一個TextView控制項的文字屬性都是一個顏色值，背景色就是這個顏色；通過將控制項的layout_width屬性設定為fill_parent，每個控制項都展開到螢幕寬度。

 

用XML布局資源定義線性布局

設計程式使用者介面最方便和可維護的方法是建立XML布局資源。這個方法極大地簡化了UI設計過程，它將很多靜態建立和使用者介面控制項的布局以及控制項屬性的定義移到了XML中，而不是寫代碼。

XML布局資源必須被儲存在項目目錄的/res/layout下。讓我們看看前一節介紹的彩虹線性布局。這個螢幕基本上就是一個設定為鋪滿整個螢幕的垂直線性布局，這通過設定它的layout_width和layout_height屬性為fill_parent來實現。適當地將其命名為/res/layout/rainbow.xml，XML定義如下：

 

  
<?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="fill_parent" 
  
   
  
android:orientation="vertical"> 
  
   
  
<TextView android:text="RED" android:id="@+id/TextView01" 
  
   
  
android:layout_height="wrap_content" android:background="#f00" 
  
   
  
android:layout_width="fill_parent" android:layout_weight=".14" 
  
   
  
android:gravity="center" android:textColor="#000"></TextView> 
  
   
  
<TextView android:text="ORANGE" android:id="@+id/TextView02" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".15" android:background="#ffa500" 
  
   
  
android:gravity="center" android:textColor="#000"></TextView> 
  
   
  
<TextView android:text="YELLOW" android:id="@+id/TextView03" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".14" android:background="#ffff00" 
  
   
  
android:gravity="center" android:textColor="#000"></TextView> 
  
   
  
<TextView android:text="GREEN" android:id="@+id/TextView04" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".15" android:background="#0f0" android:gravity="center" 
  
   
  
android:textColor="#000"></TextView> 
  
   
  
<TextView android:text="BLUE" android:id="@+id/TextView05" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".14" android:background="#00f" android:gravity="center" 
  
   
  
android:textColor="#fff"></TextView> 
  
   
  
<TextView android:text="INDIGO" android:id="@+id/TextView06" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".14" android:background="#4b0082" 
  
   
  
android:gravity="center" android:textColor="#fff"></TextView> 
  
   
  
<TextView android:text="VIOLET" android:id="@+id/TextView07" 
  
   
  
android:layout_height="wrap_content" android:layout_width="fill_parent" 
  
   
  
android:layout_weight=".14" android:background="#ee82ee" 
  
   
  
android:gravity="center" android:textColor="#000"></TextView> 
  
   
  
</LinearLayout> 
 

可能你會注意到這個線性布局的每一個子控制項都有很多有趣的屬性，包括一個叫做layout_weight的屬性。一會我們會講到