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

什么是布局？

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

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

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

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

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

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

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

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

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

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

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

定義XML布局資源

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

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

下面是一個(gè)簡單的XML布局資源，一個(gè)LinearLayout模板包含一個(gè)TextView和一個(gè)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> 

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

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

setContentView(R.layout.main); 

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

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

例如，下面的代碼展示了如何用程序?qū)嵗粋€(gè)LinearLayout視圖并向里面放置兩個(gè)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 – 用于顯示一堆子視圖控件。多視圖控件可以添加到這個(gè)布局中。它可以用來在相同的屏幕空間展示多個(gè)控件。

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

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

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

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

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

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

提供可選布局資源

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

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

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

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

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

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

總結(jié)

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

【編輯推薦】

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