Android用戶界面設計：布局基礎

Android用戶界面設計：布局基礎

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

什么是布局？

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

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

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

Android用戶界面可以定義為XML中的布局資源或程序動態創建。

使用Eclipse設計布局資源

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

這里有一些關於在Eclipse中使用布局資源編輯器的技巧：

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

◆選擇特定的控件（在預覽或概要窗口）並使用屬性窗格來調整特定控件的屬性。

◆使用XML標簽來直接編輯XML定義。

很重要的是要記住一點，Eclipse布局資源編輯器不能完全精確的模擬出布局在最終用戶那的展現。對此，你必須在適當配置的模擬器中測試，更重要的是在目標設備上測試。而且一些“復雜”控件，包括標簽或視頻查看器，也不能在Eclipse中預覽。

定義XML布局資源

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

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

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

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:orientation="vertical"   
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:gravity="center">
7. <TextView
8. android:layout_width="fill_parent"
9. android:id="@+id/PhotoLabel"
10. android:layout_height="wrap_content"
11. android:text="@string/my_text_label"   
12. android:gravity="center_horizontal"
13. android:textSize="20dp" />
14. <ImageView
15. android:layout_width="wrap_content"
16. android:layout_height="wrap_content"
17. android:src="@drawable/matterhorn"
18. android:adjustViewBounds="true"
19. android:scaleType="fitXY"
20. android:maxHeight="250dp"
21. android:maxWidth="250dp"
22. android:id="@+id/Photo" />
23. </LinearLayout>

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

 

 

 

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

1. setContentView(R.layout.main);

用程序動態定義布局

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

 

例如，下面的代碼展示了如何用程序實例化一個LinearLayout視圖並向里面放置兩個TextView。沒有使用任何資源。

1. public void onCreate(Bundle savedInstanceState) {
2. super.onCreate(savedInstanceState);
3. // setContentView(R.layout.main);  
4. TextView label = new TextView(this);
5. label.setText(R.string.my_text_label);
6. label.setTextSize(20);
7. label.setGravity(Gravity.CENTER_HORIZONTAL); 
8. ImageView pic = new ImageView(this);
9. pic.setImageResource(R.drawable.matterhorn);
10. pic.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
11. pic.setAdjustViewBounds(true);
12. pic.setScaleType(ScaleType.FIT_XY);
13. pic.setMaxHeight(250);
14. pic.setMaxWidth(250);
15. LinearLayout ll = new LinearLayout(this);
16. ll.setOrientation(LinearLayout.VERTICAL);
17. ll.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
18. ll.setGravity(Gravity.CENTER);
19. ll.addView(label);
20. ll.addView(pic);
21. setContentView(ll);
22. }

 

如你所見，這些代碼的大小將隨着更多的控制添加到屏幕而迅速增加，使得屏幕內容更加難以維護和重用。

探索不同的布局類型

現在讓我們把注意力轉向對組織其它控件很有用的布局控件。最常用的布局類是：

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

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

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

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

 

 

 

 

 

用復合布局來組織控件

 

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

 

 

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

提供可選布局資源

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

想了解更多的關於如何使用可選資源的信息，查看Android SDK的Android資源方面的文檔.

布局工具和優化

Android SDK包括幾個可以幫助我們設計，調試和優化布局資源的工具。除了Eclipse的Android插件中內置的布局資源設計器，你可以使用Android SDK提供的Hierarchy Viewer（層次結構查看器）和layoutopt。這些工具在你的Android SDK的/tools目錄下可以找到。

你可以使用Hierarchy Viewer來查看布局運行時的詳細情況。可以在Android開發者網站的Hierarchy Viewer部分了解更多信息。

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

 

總結

Android應用程序用戶界面使用布局來定義。有許多不同類型的布局類型可以用來組織屏幕上的控件。布局可以使用XML資源定義，也可以通過Java程序在運行時來定義。可選布局可以在特殊情況下被加載，比如在橫屏和豎屏模式下提供一個可選用戶界面。最后，設計良好的布局對於應用程序性能很重要；使用像Hierarchy Viewer和layoutopt之類的Android SDK工具來調試和優化你的應用程序布局。