[安卓教學] 建立你的第一個安卓應用 - 第三課 - 創建一個簡單的用戶界面

一個安卓應用（Android app）的圖形用戶界面（graphical user interface）是由一系列有層級關係的View（視圖組件）和ViewGroup（視圖組件組）對象構成。View對象通常是像按鈕（buttons）或者文字輸入框（text fields）之類的圖形界面部件（UI widgets），同時，ViewGroup對象是定義子視圖對象如何佈局的不可見容器（invisible view containers），好比一個網格（grid）或者一個縱向列表（vertical list）。

Android對於View和ViewGroup的子類提供一系列基於XML的命名和定義，所以，你能夠用XML來定義你的用戶界面。此類XML包含一系列有層級關係的UI元素（UI elements）。

圖示1：展現ViewGroup是如何生成佈局分支以及如何包含其餘View對象

在這節課中，你將使用XML建立包含一個文字輸入項和一個按鈕的佈局（layout）。而後，在下一節課，你將響應這個按鈕的按下事件（button is pressed，譯者注：就是按下按鈕的事件），而且將文字輸入項的內容發送到另一個activity。

佈局選擇（Alternative Layouts）

有不少緣由能夠說明使用XML而不是在運行時代碼中聲明你的用戶界面佈局是很是重要的，但之中最重要的一點是你能夠針對不一樣的屏幕大小建立不一樣的佈局。例如，你能夠建立兩個版本的佈局，而後告訴系統針對小屏幕使用其中之一，針對大屏幕使用另一個佈局。需更多信息，請參考「Supporting Different Devices」課程。

建立一個線性佈局（Linear Layout）

打開「res/layout/」目錄中的「fragment_main.xml」（譯者注：最新的ADT會生成此文件，若是使用舊版本的ADT，打開activity_main.xml。建議升級更新你的ADT，不然之後會和文檔對不上。）文件。

注意：在Eclipse中，當你打開一個佈局文件，首先是在圖形佈局編輯器中打開。此編輯器幫助你以所見即所得的方式建造佈局。在這節課中，你將直接面對XML。因此，點擊位於屏幕底部的「fragment_main.xml」標籤頁，打開XML編輯器。

在建立此項目時選擇的BlankActivity模板包含「fragment_main.xml」文件。此佈局文件包含一個RelativeLayout根視圖組件（root view）和一個TextView子視圖組件（child view）。

第一步，刪除「<TextView>」節點（element，譯者注：這裏是XML節點的意思，也翻譯成XML元素。在英文文檔中，佈局文件中的視圖組件都稱爲element，其中也有元件的意思。在譯文中，若是不影響理解有時會省去element的翻譯）而且替換「<RelativeLayout>」節點爲「<LinearLayout>」。而後，添加「android:orientation」屬性（attribute），而且設置爲「horizontal」（水平的）。結果以下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
</LinearLayout>

LinearLayout（譯者注：線性佈局，顧名思義，就是按照線性順序的佈局。）是一個視圖組件組（ViewGroup的一個子類）。它依照「android:orientation」的設置使子視圖組件基於水平（horizontal）或者豎直（vertical）方向對齊分佈。LinearLayout的每一個子視圖組件按照在XML文件中出現的順序展示在屏幕上。

另外兩個屬性「android:layout_width」和「android:layout_height」是用來設置視圖組件大小的，對於全部視圖組件都是必須設置的。

由於LinearLayout是此佈局的根視圖組件，它應該設置寬度（width）和高度（height）爲「match_parent」以充滿此應用可用的整個屏幕區域。

如需更多關於佈局屬性的信息，請參閱Layout指南。

添加一個文字輸入組件（Text Field）

要建立一個用戶可編輯的文字輸入項，需在「<LinearLayout>」內添加一個「<TextEdit>」節點。

像每一個視圖（View）對象同樣，你必須經過定義某些XML屬性（attributes）來指定「EditText」對象的特性（properties）。下面示例展現如何在「<LinearLayout>」節點（element）內部聲明它：

<EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

關於以上屬性（attributes）：

• android:id

  此屬性指定該視圖的惟一標識符。你可使用此標識符在你的應用代碼中引用該視圖對象，好比，讀取和控制（manipulate）這個對象（你將在下一課看到如何實現）。

  當你從XML中引用任何資源對象（resource object）時，必須使用@符號。而後接資源類型（此例爲「id」），一個斜線（slash，「/」），再而後是資源名稱（「edit_message」）。

  在資源類型以前的加號（「+」）僅當你第一次定義一個資源ID的時候須要。當你編譯此應用，SDK工具將使用這個ID的名字在你的項目的「gen/R.java」文件中生成一個新的資源ID。這個新的資源ID能夠用來用「EditText」元素。一旦這個資源ID按照此方法聲明，其餘對於此ID的引用就不須要加號了。加號只在指定一個新的資源ID的時候必須，同時，對於實體資源，好比，字符串和佈局，是不須要加號的。對於資源對象更多的信息，參見下面的介紹。

  關於資源對象（resource objects）

  每一個資源對象就是一個惟一整形數的名字，這個名字與一個應用的資源綁定，好比一個位圖，佈局文件或者字符串。

  每一個資源都有一個對應的資源對象定義在項目的「gen/R.java」文件中。你可使用R這個類中的對象名字來引用你的資源，好比當你須要一個字符串來指定「android:hint」屬性的時候。你也能夠經過「android:id」屬性來鏈接一個視圖組件和一個指定的資源ID，此資源ID將能夠用來在代碼中引用這個視圖組件。

  每次編譯，SDK工具都會自動生成「R.java」文件。你不該該編輯此文件。

  須要更多信息，請閱讀「Providing Resources」指南。

• android:layout_width和android:layout_height

  相對於使用肯定的值設置寬度和高度，「wrap_content」值能夠用來指定此視圖組件只需按照內容須要調整大小。若是使用了「match_parent」值，這個「EditText」元素將填滿屏幕，應爲他將適應它的父件「LinearLayout」的大小。更多信息，參見Layouts指南。

• android:hint

  此值是這個文字輸入項爲空時所顯示的默認字符串。與其使用代碼中寫死的字符串，「@string/edit_message」引用一個在另一個文件中定義的字符串資源。由於它引用一個實體資源（不只僅是一個標識符），因此不須要加號。可是，因爲你尚未定義此字符串資源，你將看到一個編譯錯誤。你將在下一章節定義一個字符串以修復這個錯誤。

  注意：此字符串資源使用了與這個節點的ID相同的名字：「edit_message」。可是，資源的引用老是以資源類型來決定做用域的（好比，「id」或「string」），因此使用了一樣的名字並不會產生衝突。

添加字符串資源

當你須要在用戶界面上添加文字時，應該總使用字符串資源。字符串資源容許你在一個地方管理全部的UI文字，這將使查找和更新文字更簡單。外部定義字符串也能夠經過提供不一樣的字符串資源使你能夠對於不一樣語言本地化你的應用。

默認狀況下，你的Android項目包含一個字符串資源文件「res/values/string.xml」。在此文件中添加一個名字爲「edit_message」的字符串，而且設置值爲「Enter a message.」（你能夠刪除「hello_world」字符串。）

在這個文件中，同時爲一個即將用到的按鈕添加一個「Send」字符串。名字使用「button_send」。

「string.xml」結果以下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">My First App</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="action_settings">Settings</string>
    <string name="title_activity_main">MainActivity</string>
</resources>

須要更多爲其餘語言本地化你的應用的信息，請參閱課程「Supporting Different Devices」。

添加一個按鈕

如今，在「<EditText>」節點下面，緊接着在佈局（layout）中添加一個「<button>」。

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

高度和寬度設置爲「wrap_content」，由於此按鈕只須要適合按鈕中文字的大小。此按鈕不須要「android:id」屬性，由於目前它不會被activity的代碼所引用到。

設置輸入框的寬度充滿屏幕

目前，EditText和Button在當前設計的佈局中大小僅爲適合它們的內容，像圖示2所顯示的。

圖示2：寬度設置爲「wrap_content」的EditText和Button部件

對於按鈕來講，這沒問題，可是對於文字輸入框，這並很差，由於用戶可能輸入較長的內容。因此，讓文字輸入框佔據剩餘的屏幕寬度會比較好。咱們能夠經過「LinearLayout」的「weight」（權重）屬性（property）來實現。使用「android:layout_weight」屬性來指定。

「weight」（權重）值是一個數字，該數字指定每一個視圖組件相對於與它同級別的其餘視圖組件所應該佔據的剩餘空間的量。這相似於在一個飲料配方中的原料量：「2份伏特加，1份咖啡甜酒」表示飲料中的2/3是伏特加。例如，若是你設置一個視圖組件的權重爲2，另一個爲1，總和爲3，因此第一個視圖組件佔據2/3的剩餘空間，第二個佔據其他的。若是你再添加一個視圖組件，而且設置權重爲1，這時，第一個視圖組件（權重爲2的）將得到1/2的剩餘空間，另外的兩個各得1/4。

全部視圖組件的缺省權重爲「0「。因此若是給其中任意一個視圖組件指定一個大於0的權重，這個視圖組件將佔據除去其餘視圖所須要的空間後剩餘的全部空間。因此，要讓EditText在佈局中佔據剩下的空間，只須要設置它的權重爲1同時保留按鈕爲無權重。

<EditText
        android:layout_weight="1"
        ... />

當你設置了權重，爲了加強佈局的效率，你應該更改「EditText」的寬度爲0（0dp）。設置寬度爲0將加強佈局的性能，由於使用「wrap_content」做爲寬度，要求系統計算一個此處徹底沒有用的寬度數值，由於設置的權重值將致使另外的計算來填充剩餘的空間。

<EditText
        android:layout_weight="1"
        android:layout_width="0dp"
        ... />

圖示3展現設置權重以後的「EditText」：

圖示3：EditText因爲設置了權重，佔據了LinearLayout中的剩餘的空間

下面爲你的佈局文件如今的樣子：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <EditText android:id="@+id/edit_message"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

此佈局將被用於在建立項目時SDK工具生成的缺省Activity類，因此你如今能夠經過運行你的應用看到結果：

• 經過Eclipse，點擊工具欄上的「Run」。

• 或者經過命令行，切換到你的Android項目的根目錄，而後運行：

  ant debug
  adb install bin/MyFirstApp-debug.apk

繼續下一課，你將學習到如何響應按按鈕的事件，如何從字符輸入框中讀取內容，如何啓動另外一個activity，等等。

此文章總體或部分翻譯自Android Open Source Project的文檔。依照Creative Commons 2.5 Attribution License使用並分享。此文章（譯文，中文）原始連接爲「[安卓教學] 建立你的第一個安卓應用 - 第三課 - 創建一個簡單的用戶界面」。原文（英文）連接爲「Building a Simple User Interface」。

< 上一課

課程介紹

下一課 >