我們將為應用程序項目添加布局方案，在這方面 XML 與 Eclipse ADT 接口將成為工作中的得力助手——不過在后面兩節(jié)中還會用到一部分 Java 開發(fā)知識。

內容簡介

我們將為應用程序項目添加布局方案，在這方面 XML 與 Eclipse ADT 接口將成為工作中的得力助手——不過在后面兩節(jié)中還會用到一部分 Java 開發(fā)知識。XML 與 Java 在 Android 平臺的開發(fā)工作當中可謂無處不在，如果大家對二者還缺乏基本的了解，請盡快想辦法補補課。對于剛剛入門的讀者朋友來說，本文所介紹的要點將成為各位日后開發(fā)工作的重要基礎。

1. XML 基礎知識

在我們開始討論布局之前，先來梳理作為標記語言的 XML 的基礎知識。如果大家對于 XML 已經很熟悉，可以直接跳過本節(jié)。XML 是一種用于保存數據值的語言。XML 文件在多個領域發(fā)揮作用。它們在某些項目中的功能與數據庫非常相近，而且通常被作為網頁的輸出機制。如果大家之前曾經使用過 HTML，應該會對 XML 的基本功能感到熟悉。

在 XML 中，數據值被保存在元素當中。單一元素通常包含一個開始標記與一個結束標記，如下所示：

<product>Onion</product> 

如大家所見，開始標記與結束標記幾乎完全一樣，惟一的區(qū)別在于結束標記中多了一個“/”符號。在上面的例子中，數據值也就是元素內容，即文本字符串“Onion”。開始標記也可以容納與數據項目相信的其它屬性信息，如下所示：

<product type="vegetable">Onion</product>

每項屬性都有一個名稱與一個值，其中值就是引號內的部分。元素中還可以包含其它元素：

<section name="food"><font></font> 
<product type="vegetable">Onion</product><font></font> 
<product type="fruit">Banana</product><font></font> 
</section><font></font> 

在這種結構中，我們將 section 元素稱為主元素、products 元素則被稱為子元素。兩個子元素之間屬于“兄弟關系”。在 XML 文檔當中，必須存在一個 root 元素作為主元素，或者被稱為“嵌套”。這就構成了一種 tree 結構，其中子元素作為自主元素延伸出去的分支。如果某個子元素之下還包含其它子元素，那么它本身同時也具有主元素屬性。

大家還會遇到另一種自結束元素，其中開始與結束標記并非獨立存在：

<order number="12345" customerID="a4d45s"/> 

其中元素末尾的“/”符號代表結束。

我們在 Android 平臺上所使用的全部資源文件都要用到 XML 標記，其中包括布局文件、可繪制元素、數據值以及 Manifest。

2. Android 布局

第一步

當大家在安裝了 ADT 的 Eclipse IDE 當中使用 XML 時，輸入過程中顯示的相關背景提示能讓編碼過程變得更輕松一些。在編輯器中打開新應用中的主布局文件，確保 XML 編輯標簽已經被選中，這樣我們就能直接對代碼進行編輯了。我們首先要處理的是用于主屏幕的布局方案，用戶在啟動應用之后最先看到的就是它。Eclipse 會提供一套基礎布局，供我們進行個性化修改：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"<font></font> 
    xmlns:tools="http://schemas.android.com/tools"<font></font> 
    android:layout_width="match_parent"<font></font> 
    android:layout_height="match_parent"<font></font> 
    android:paddingBottom="@dimen/activity_vertical_margin"<font></font> 
    android:paddingLeft="@dimen/activity_horizontal_margin"<font></font> 
    android:paddingRight="@dimen/activity_horizontal_margin"<font></font> 
    android:paddingTop="@dimen/activity_vertical_margin"<font></font> 
    tools:context=".MainActivity" ><font></font> 
    <TextView<font></font> 
        android:layout_width="wrap_content"<font></font> 
        android:layout_height="wrap_content"<font></font> 
        android:text="@string/hello_world" /><font></font> 
</RelativeLayout><font></font> 

如大家所見，root 元素是一項布局元素，在上面的示例中為 RelativeLayout。Android 當中還提供其它幾種布局類型，我們可以將一種布局嵌套到另一種當中。這里的 root 布局元素擁有幾項額外屬性且與布局效果密切相關，例如寬度、高度以及邊距等等。布局元素當中的 TextView 允許開發(fā)人員顯示一條文本字符串。TextView 是 View 的一種，View 屬于可見及交互性元素，用以構成我們的應用程序 UI。因此，應用程序中的每套分屏方案都要選擇一種 View，并在其中包含一種或者多種布局機制。在 Android 系統(tǒng)中，這些布局被稱為 ViewGroup 對象，每個 ViewGroup 內包含一套或者多套 View。

第二步

為了專注于一套布局的基礎創(chuàng)建工作，我們要把主布局文件中的現(xiàn)有內容全部刪掉，這樣才能從零開始著手設計。正如我們之前所提到，大家可以利用 Java 代碼創(chuàng)建自己的布局或者 View，不過 Android 上的多種工具允許開發(fā)者利用 XML 設計自己的應用 UI——這樣各位就可以在創(chuàng)建元素的同時直接觀察設計效果了。在某些實例中，大家可能見過單純通過 Java 代碼創(chuàng)建一些或者全部 UI 的做法，但現(xiàn)實情況下大部分創(chuàng)建工作還是要由 XML 完成的。這種做法還能保證應用程序邏輯與顯示元素彼此獨立。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"<font></font> 
    android:layout_width="fill_parent"<font></font> 
    android:layout_height="fill_parent"<font></font> 
    android:orientation="vertical" ><font></font> 
    <!-- views go here --><font></font> 
</LinearLayout><font></font> 

LinearLayout 會沿橫向或者縱向顯示我們打算使用的 View。在以上示例中顯示方向為垂直，因此每個 View 都會沿屏幕下方依次排列。如果采取橫向布局，那么各個 View 將由左至右依次排列。如果使用“l(fā)ayout width”與“l(fā)ayout height”兩種屬性（在 Android 當中，它們往往被稱為布局參數），那么布局會被拉伸至橫向與縱向的最大長度。

在“l(fā)ayout height”聲明行之后再添加一條新行，通過鍵入“android：”準備開始輸入屬性。當大家輸入對應內容，Eclipse 就會提供一套與該屬性相關的列表。大家可以繼續(xù)輸入內容以縮小屬性列表，也可以直接在列表中用鼠標進行點選?，F(xiàn)在我們選擇“android：gravity”屬性。

鍵入“center_horizontal”作為 gravity 值，這樣其中包含的元素就會以 X 軸為中心加以顯示：

android:gravity="center_horizontal" 

這種方式適用于布局中的一切元素。我們可以添加其它幾種額外顯示屬性，例如填充、邊距以及背景等。不過在今天的文章中，我們先從最簡單的項目入手。

3. 添加 View

第一步

正面我們開始向布局中添加 View。所謂 View，是指 UI 當中的可見元素。讓我們首先添加一些文本內容和一個按鈕。進入 LinearLayout 元素（在開始忹結束標記之間），輸入“<”之后 Eclipse 就會提示大家與屬性相關的可用元素列表。

在列表中選擇 TextView。請注意，與大部分 View 一樣，這是一種自結束元素。為 TextView 設置兩種屬性，分別為 layout width 與 layout height（鍵入‘android：’并選擇對應提示）：

<TextView<font></font> 
    android:layout_width="wrap_content"<font></font> 
    android:layout_height="wrap_content" /><font></font>

通過“wrap_content”，我們可以保證 View 的寬度足以容納其顯示內容——這就避免了像布局那樣以填充方式顯示元素?，F(xiàn)在再為 TextView 添加另一項屬性，這一次通過列舉文本字符串實現(xiàn)顯示功能：

android:text="Hello there" 

在保存文件之后，大家會看到 Eclipse 顯示出一條警告消息。如果將鼠標懸停在消息之上，編輯器的邊框處將顯示該文本——這部分內容也會同時顯示在 Problem 視圖當中。警告內容為“Hardcoded string……should use @string resource（硬編碼字符串……應使用@string 資源）?！毕到y(tǒng)推薦的做法是將每一個文本字符串值保存為一項值資源，而不應將其直接包含在布局 XML 當中。盡管從起步階段來看這樣的處理方式既麻煩又毫無意義，但一旦養(yǎng)成良好習慣、大家會在今后的工作中逐漸發(fā)現(xiàn)其在大型項目中的價值。通過 Package Explorer 找出“res/values/strings.xml”文件并打開，切換到“strings.xml”標簽并對代碼進行編輯。

可以看到，Eclipse 已經添加了幾條字符串。要另行添加，只需為其設定名稱與值：

<string name="hello">Hello there</string> 

這意味著如果大家需要在應用程序 UI 當中不止一次使用同一條字符串，而且稍后又需要對其進行修改，則只需在一處做出變更即可。保存字符串文件并切換到布局文件。將 TextView 的“text”屬性引用到值文件的對應字符串中：

android:text="@string/hello" 

我們通過在字符串名稱前加上“@string”的方式告知 Android 工具需要在哪里尋找字符串資源。這樣一來，警告信息就不會再出現(xiàn)了。Eclipse 通常會在我們編碼的過程中發(fā)出這些提醒，從而通知我們當前存在的錯誤或者警示問題。大家可以選擇遵循或者忽略警告信息的內容，但對于錯誤則必須加以調整，否則應用程序將無法正常工作。

第二步

在 TextView 之后添加一個 Button：

<Button<font></font> 
    android:layout_width="wrap_content"<font></font> 
    android:layout_height="wrap_content"<font></font> 
    android:text="@string/click" /><font></font> 

在我們的示例中，Button 使用的屬性與 TextView 相同。不過在其它情況下，它可能會使用更多屬性，而且一般來說不同視圖需要配合不同屬性。按鈕上顯示的是“text”屬性值。將這條字符串同之前一樣添加到我們的“res/values/strings.xml”文件當中：

<string name="click">Click Me!</string> 

在接下來的教程中，我們將處理按鈕的點擊效果。切換到布局文件，查看編輯器右側的 Outline 視圖——它顯示的是另一套指向文件元素的界面。雙擊列出的項目以跳轉到對應代碼位置。大家也可以展開或者折疊主元素。當布局變得更加復雜時，這種處理方式就變得非常實用。

提示:要整理 Eclipse 編輯中所打開的全部文件，我們只需按下“Ctrl+A”對其進行全選，然后按下“Ctrl+I”即可。

4. Graphical Layout

第一步

確保我們的布局文件已經正確保存，然后切換到 Graphical Layout 標簽。

大家可以看到自己所設計的布局已經能夠直接查看。界面左側的 Palette 區(qū)域允許我們選擇 UI 項目并將其拖動到布局當中。不過我們應該首先使用 XML，直至對基本框架擁有初步概念。XML 能幫助我們控制細節(jié)設計，所以即使在使用圖形化工具的時候，我們也可能需要對 XML 結果進行編輯。

在 Graphical Layout 視圖上方是一套下拉清單，我們可以從中選擇用于查看布局效果的設備類型，其中也提供切換顯示方向及縮放效果的工具。大家需要在設計布局的過程中不斷利用 Graphical Layout 對效果加以控制。另外，這里也提供其它一些值得嘗試的布局元素與設置。

第二步

大家可能已經注意到，在這一次的布局設計當中可見元素的顯示位置與屏幕上邊緣靠得比較近。下面就來解決這個問題。切換到 XML 編輯標簽并向 LinearLayout 當中添加邊距屬性：

android:layout_margin="10dp" 

我們使用“dp”來設置像素的獨立密度，這樣設計就會讓像素密度自動與用戶設備相匹配。保存文件并切換到 Graphical Layout 以查看實際效果。

在我們進行布局設計時，Graphical Layout 是一款非常實用的參考工具，但只能起到引導的效果。要了解我們的布局在應用程序運行時以怎樣的方式顯示、又能實現(xiàn)怎樣的功能，大家需要將其載入虛擬或者物理設備進行實際難。我們會在后續(xù)文章中進一步討論這個話題。

5. 選項

大家可以在應用程序屏幕中包含各類布局類型以及 View，但其基本處理方式都是一致的。我們前面所使用的是 LinearLayout，但還有其它多種方案可供選擇，其中比較常見的有 RelativeLayout、FrameLayout、AbsoluteLayout 以及 GridLayout。大家可以在 LinearLayout Palette 當中找到這些類型，建議各位放松心態(tài)、在自己的 View 中任意選擇并觀察其顯示效果。當添加來自 Graphical Layout 工具的元素時，請務必切換到 XML 以觀察新元素的加入會產生什么樣的標記代碼。

Android 平臺針對多種常見需求提供 View 方案，例如單選按鈕、復選框以及文本輸入區(qū)等。這些方案能夠大大節(jié)約我們需要手動執(zhí)行的功能數量；但如果各位需要使用非自帶 UI 元素，則需要創(chuàng)建一個自定義 View 類。一般來說，最好是在沒有其它選擇時再這樣處理，畢竟標準化 UI 元素在用戶設備上的表現(xiàn)更為可靠，同時也能節(jié)約開發(fā)及測試的時間。

結論

在今天的教程中，我們討論了 Android 平臺上用戶界面布局的基本設計流程，但并未做深層次挖掘。在本系列文章的下一部分，我們將嘗試在應用程序添加用戶交互元素、檢測并響應按鈕點擊。接下來，我們將著眼于同 Android 開發(fā)關系最密切的 Java 相關概念，并進一步探討應用程序開發(fā)過程中所涉及的要素及實踐方式。

原文鏈接：

http://mobile.tutsplus.com/tutorials/android/android-sdk-user-interface-design/

原文標題：Android SDK: User Interface Design