理解布局對于好的Android應(yīng)用設(shè)計來說是非常重要的。在這個教程里，我們提供一個關(guān)于布局如何適應(yīng)Android應(yīng)用程序架構(gòu)的概述。我們還探討了一些特定的可用布局控件，用它們來以各種各樣的方式組織應(yīng)用程序屏幕內(nèi)容。

什么是布局？

Android開發(fā)者使用術(shù)語“布局”，指的是兩種含意中的一種。兩種定義在這篇教程中都會用到，而且很不幸的是在Android開發(fā)社區(qū)它們被混著使用。布局的兩種定義如下：

一種資源，它定義了在屏幕上畫什么。布局資源存儲在應(yīng)用程序的/res/layout資源目錄下的XML文件中。布局資源簡單的說就是一個用于用戶界面屏幕，或屏幕的一部分，以及內(nèi)容的模板。

一種視圖類，它的主要是組織其它控件。這些布局類（LinearLayout,，RelativeLayout，TableLayout等）用于在屏幕上顯示子控件，如文本控件或按鈕或圖片。

Android用戶界面可以定義為XML中的布局資源或程序動態(tài)創(chuàng)建。

使用Eclipse設(shè)計布局資源

Eclipse的Android開發(fā)插件包含了一個很方便的用于設(shè)計和預(yù)覽布局資源的布局資源設(shè)計器。這個工具包括兩個標(biāo)簽視圖：布局視圖允許你預(yù)覽在不同的屏幕下以及對于每一個方向控件會如何展現(xiàn)；XML視圖告訴你資源的XML定義。布局資源設(shè)計器如下圖：

這里有一些關(guān)于在Eclipse中使用布局資源編輯器的技巧：

◆使用概要（Outline）窗格來在你的布局資源中添加和刪除控件。

◆選擇特定的控件（在預(yù)覽或概要窗口）并使用屬性窗格來調(diào)整特定控件的屬性。

◆使用XML標(biāo)簽來直接編輯XML定義。

很重要的是要記住一點(diǎn)，Eclipse布局資源編輯器不能完全精確的模擬出布局在最終用戶那的展現(xiàn)。對此，你必須在適當(dāng)配置的模擬器中測試，更重要的是在目標(biāo)設(shè)備上測試。而且一些“復(fù)雜”控件，包括標(biāo)簽或視頻查看器，也不能在Eclipse中預(yù)覽。#p#

定義XML布局資源

設(shè)計程序用戶界面最方便且可維護(hù)的方式是創(chuàng)建XML布局資源。這個訪法極大地簡化了UI設(shè)計過程，將許多用戶界面控件的靜態(tài)產(chǎn)物和布局，以及控件屬性定義移動XML中，代替了寫代碼。它適應(yīng)了UI設(shè)計師（更關(guān)心布局）和開發(fā)者（了解Java和實現(xiàn)應(yīng)用程序功能）潛在的區(qū)別。開發(fā)者依然可以在必要的時候動態(tài)的改變屏幕內(nèi)容。復(fù)雜控件，像ListView或GridView，通常用程序動態(tài)地處理數(shù)據(jù)。

XML布局資源必須存放在項目目錄的/res/layout下。對于每一屏（與某個活動緊密關(guān)聯(lián)）都創(chuàng)建一個XML布局資源是一個通用的做法，但這并不是必須的。理論上來說，你可以創(chuàng)建一個XML布局資源并在不同的活動中使用它，為屏幕提供不同的數(shù)據(jù)。如果需要的話，你也可以分散你的布局資源并用另外一個文件包含它們。

下面是一個簡單的XML布局資源，一個LinearLayout模板包含一個TextView和一個ImageView，定義在XML中：

<?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" 
   
android:gravity="center"> 
 <TextView 
   
android:layout_width="fill_parent" 
 android:id="@+id/PhotoLabel" 
   
android:layout_height="wrap_content" 
 android:text="@string/my_text_label" 
   
android:gravity="center_horizontal" 
 android:textSize="20dp" /> 
   
<ImageView 
 android:layout_width="wrap_content" 
   
android:layout_height="wrap_content" 
 android:src="@drawable/matterhorn" 
   
android:adjustViewBounds="true" 
 android:scaleType="fitXY" 
   
android:maxHeight="250dp" 
 android:maxWidth="250dp" 
   
android:id="@+id/Photo" /> 
 </LinearLayout> 

這個布局資源表示屏幕包含兩個控件：首先有一些文字，然后在它下面有一個圖片。這些控件組織在一個垂直方向的LinearLayout中。下面兩幅圖片展示了這個布局在橫屏和豎屏下可能的樣式：

在屏幕上顯示一個布局資源只需要有包括onCreate()的一行代碼就可以搞定。如果布局資源存放在/res/layout/main.xml文件，代碼可能是：

setContentView(R.layout.main); 

用程序動態(tài)定義布局

你也可以用程序創(chuàng)建用戶界面組件。為了易組織和可維護(hù)性，僅在特殊時候這樣做，而不是在一般情況下。不是直接使用setContentView()方法來加載布局資源，你必須創(chuàng)建屏幕內(nèi)容然后向setContentView()方法提供包含所有要顯示的子控件內(nèi)容的父布局對象。

例如，下面的代碼展示了如何用程序?qū)嵗粋€LinearLayout視圖并向里面放置兩個TextView。沒有使用任何資源。

public void onCreate(Bundle savedInstanceState) {  
 super.onCreate(savedInstanceState);  
 // setContentView(R.layout.main);  
   
 TextView label = new TextView(this);  
 label.setText(R.string.my_text_label);  
 label.setTextSize(20);  
 label.setGravity(Gravity.CENTER_HORIZONTAL);  
   
 ImageView pic = new ImageView(this);  
 pic.setImageResource(R.drawable.matterhorn);  
 pic.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
 pic.setAdjustViewBounds(true);  
 pic.setScaleType(ScaleType.FIT_XY);  
 pic.setMaxHeight(250);  
 pic.setMaxWidth(250);  
 LinearLayout ll = new LinearLayout(this);  
 ll.setOrientation(LinearLayout.VERTICAL);  
 ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));  
 ll.setGravity(Gravity.CENTER);  
 ll.addView(label);  
 ll.addView(pic);  
 setContentView(ll);  
} 

如你所見，這些代碼的大小將隨著更多的控制添加到屏幕而迅速增加，使得屏幕內(nèi)容更加難以維護(hù)和重用。#p#

探索不同的布局類型

現(xiàn)在讓我們把注意力轉(zhuǎn)向?qū)M織其它控件很有用的布局控件。最常用的布局類是：

◆FrameLayout – 用于顯示一堆子視圖控件。多視圖控件可以添加到這個布局中。它可以用來在相同的屏幕空間展示多個控件。

◆LinearLayout – 用于在單行或單列中顯示子視圖控件。這對于創(chuàng)建表單來說是非常方便的布局方法。

◆RelativeLayout – 用于相對彼此地顯示子視圖控件。比如，你可以設(shè)置一個控件相對另一個控件“在上方”或“在下方”或“在左邊”或“在右邊”。你也可以相對于父級元素的邊界來放置子視圖控件。

◆TableLayout – 用于將子視圖控件組織到行或列。對于表格的每一行，單個視圖控件使用TableRow布局視圖被添加到表格的每一行。

用復(fù)合布局來組織控件

布局（LinearLayout，TableLayout，RelativeLayout等）像其它控件一樣也是一個控件。這意味著布局控件可以被嵌套。比如，為了組織屏幕上的控件你可以在一個LinearLayout中使用一個RelativeLayout，反過來也行。下面的圖展示了一個屏幕，它有一個LinearLayout（父級），一個TableLayout（頂部子節(jié)點(diǎn)）以及一個FrameLayout（底部子節(jié)點(diǎn)）。

但是小心！保證你的屏幕相對簡單，復(fù)雜布局加載很慢并且可能引起性能問題。

提供可選布局資源

在你設(shè)計你的程序布局資源時考慮設(shè)備的差異性。通常情況下是可能設(shè)計出在各種不同設(shè)備上看著都不錯的靈活布局的，不管是豎屏還是模屏模式。必要的時候，你可以引入可選布局資源來處理特殊情況。例如，你可以根據(jù)設(shè)備的方向或設(shè)備是不是有超大屏幕（如網(wǎng)絡(luò)平板）來提供不同的布局供加載。

想了解更多的關(guān)于如何使用可選資源的信息，查看Android SDK的Android資源方面的文檔.

布局工具和優(yōu)化

Android SDK包括幾個可以幫助我們設(shè)計，調(diào)試和優(yōu)化布局資源的工具。除了Eclipse的Android插件中內(nèi)置的布局資源設(shè)計器，你可以使用Android SDK提供的Hierarchy Viewer（層次結(jié)構(gòu)查看器）和layoutopt。這些工具在你的Android SDK的/tools目錄下可以找到。

你可以使用Hierarchy Viewer來查看布局運(yùn)行時的詳細(xì)情況?？梢栽贏ndroid開發(fā)者網(wǎng)站的Hierarchy Viewer部分了解更多信息。

你可以使用layoutopt（布局優(yōu)化）命令行工具來優(yōu)化你的布局文件。優(yōu)化布局非常重要，因為復(fù)雜的布局文件加載很慢。layoutopt工具簡單地掃描XML布局文件并找出不必要的控件。在Android開發(fā)者網(wǎng)站的layoutopt部分查看更多信息。

總結(jié)

Android應(yīng)用程序用戶界面使用布局來定義。有許多不同類型的布局類型可以用來組織屏幕上的控件。布局可以使用XML資源定義，也可以通過Java程序在運(yùn)行時來定義?？蛇x布局可以在特殊情況下被加載，比如在橫屏和豎屏模式下提供一個可選用戶界面。***，設(shè)計良好的布局對于應(yīng)用程序性能很重要；使用像Hierarchy Viewer和layoutopt之類的Android SDK工具來調(diào)試和優(yōu)化你的應(yīng)用程序布局。

【編輯推薦】

1. Android用戶界面設(shè)計：基本按鈕  
2. Android用戶界面設(shè)計模板Dashboard反例展示  
3. Android用戶界面設(shè)計模板Dashboard產(chǎn)品展示