在本課中，您將學習如何創建一個 XML 格式的布局，其中包含一個文本字段和一個按鈕。 在下一課中，在按下此按鈕時，您的應用會將文本字段的內容發送給另一個 Activity 作為響應。

Android 應用的圖形界面使用 View 對象和 ViewGroup 對象層次結構而構建。View 對象通常為按鈕或文本字段之類的 UI 小部件。而 ViewGroup 對象則為不可見的視圖容器，它們定義子視圖的布局，比如是網格布局還是垂直列表布局。

Android 提供對應於 View 和 ViewGroup 子類的 XML 詞匯，以便您使用 UI 元素層次結構以 XML 格式定義 UI。

布局是 ViewGroup

替代布局

以 XML 格式（而不是運行時代碼的方式）聲明 UI 布局有若幹用處，但其中最重要的用處便是，您可以創建不同的布局來適應不同的屏幕尺寸。 例如，您可以創建兩個版本的布局，並指示系統在“小”屏幕上使用哪個版本，在“大”屏幕上使用哪個版本。 如需了解詳細信息，請參閱支持不同設備課程。

圖 1. ViewGroup 對象如何在布局中形成分支並容納其他 View 對象的圖解。

創建線性布局

1. 在 Android Studio 的 Project 窗口中，打開 app > res > layout > activity_main.xml
   。

   此 XML 文件定義 Activity 的布局。它包含默認的“Hello World”文本視圖。

2. 在布局編輯器中，當您打開一個布局文件時，首先顯示的是設計編輯器。 在本課中，您將直接使用 XML，因此請點擊窗口底部的 Text 標簽以切換到文本編輯器。
3. 刪除所有內容並插入以下 XML：

   <?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">
   </LinearLayout>
   

LinearLayout 是一個視圖組（ViewGroup 的子類），它會按照 android:orientation 屬性的指定，將子視圖設置為垂直或水平方向布局。LinearLayout 的每個子視圖都會按照它們各自在 XML 中的出現順序顯示在屏幕上。

其他兩個屬性 android:layout_width 和 android:layout_height 則是所有視圖的必備屬性，用於指定它們的尺寸。

LinearLayout 是布局中的根視圖，因此應將寬度和高度設置為 "match_parent"，從而填滿可供應用使用的整個屏幕區域。 該值表示視圖應擴大其寬度或高度，以匹配父視圖的寬度或高度。

如需了解有關布局屬性的詳細信息，請參閱布局指南。

添加文本字段

在 activity_main.xml 文件的 <LinearLayout> 元素內，添加以下 <EditText> 元素：

<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_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
</LinearLayout>

無需擔心出現 @string/edit_message 錯誤；您很快就會修復該錯誤。

下面說明了您添加的 <EditText> 中的屬性：

android:id

這會為視圖賦予唯一的標識符，您可以使用該標識符從應用代碼中引用對象，例如讀取和操作對象（下一課中將有介紹）。

從 XML 引用任何資源對象時，都需要使用 @ 符號。 請在該符號後依次輸入資源類型（本例中為 id）、斜杠和資源名稱 (edit_message)。

資源對象

資源對象是一個唯一的整型名稱，它與應用資源（如位圖、布局文件或字符串）相關聯。

每個資源在您項目的 R.java 文件中都定義有相應的資源對象。您可以使用 R 類中的對象名稱來引用您的資源，例如當您需要為 android:hint 屬性指定字符串值時，就可以這樣做。您也可以使用 android:id 屬性創建任意與視圖相關聯的資源 ID，從而可以從其他代碼中引用該視圖。

SDK 工具會在您每次編譯應用時生成 R.java 文件。切勿手動修改該文件。

如需了解詳細信息，請閱讀提供資源指南。

只有在第一次定義資源 ID 時，才需要在資源類型之前加一個加號 (+)。 當您編譯應用時，SDK 工具會使用 ID 名稱在項目的 R.java 文件中新建一個引用 EditText 元素的資源 ID。一旦以此方式聲明資源 ID，其他對該 ID 的引用皆無需使用加號。 只有在指定新資源 ID 時才必須使用加號，對於字符串或布局等具體資源則不必如此。 如需了解有關資源對象的詳細信息，請參閱邊欄。

android:layout_width 和 android:layout_height

"wrap_content" 值並不規定寬度和高度的具體大小，而是指定根據需要縮放視圖，使其適合視圖的內容。 如果您要改用 "match_parent"，則 EditText 元素將填滿屏幕，因為它會匹配父 LinearLayout 的大小。如需了解詳細信息，請參閱布局指南。

android:hint

這是文本字段為空時顯示的默認字符串。"@string/edit_message" 並非使用硬編碼字符串作為其值，而是引用另一個文件中定義的一個字符串資源。 由於它引用的是一個具體資源（而不僅僅是標識符），因此不需要加號。 不過，由於您尚未定義字符串資源，所以最初會出現編譯錯誤。 在下一節中，您可以通過定義字符串來修正該錯誤。

註：此字符串資源與元素 ID edit_message 同名。不過，對資源的引用始終都按資源類型（如 id 或 string）確定其作用域，因此使用相同的名稱不會引起沖突。

添加字符串資源

默認情況下，您的 Android 項目在 res > values > strings.xml 位置包含一個字符串資源文件。您需要在此處添加兩個新字符串。

1. 從 Project 窗口中，打開 res > values > strings.xml。
2. 添加兩個字符串，使您的文件如下所示：

   <?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>
   </resources>
   

對於用戶界面中的文本，務必將每個字符串都指定為資源。 字符串資源允許您在單一位置管理所有 UI 文本，從而簡化文本的查找和更新。 此外，將字符串外部化還可讓您為每個字符串資源提供替代定義，從而將您的應用本地化為不同的語言。

如需了解有關使用字符串資源將應用本地化為其他語言的詳細信息，請參閱支持不同設備課程。

添加按鈕

返回到 activity_main.xml 文件並在 <EditText> 後添加一個按鈕。您的文件應如下所示：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <EditText android:id="@+id/edit_message"
          android:layout_width="wrap_content"
          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>

註：此按鈕不需要 android:id 屬性，因為不需要從 Activity 代碼中引用它。

如圖 2 所示，該布局當前設計為根據內容大小調整 EditText 和 Button 小部件的尺寸。

圖 2. EditText 小組件和 Button 小部件的寬度均設置為 "wrap_content"。

這對按鈕很適合，但不太適合文本字段，因為用戶鍵入的內容可能更長。 最好讓文本字段填滿未使用的屏幕寬度。 您可以在 LinearLayout 內通過 weight 屬性來實現此目的，該屬性可使用 android:layout_weight 屬性來指定。

Weight 值是一個數字，用於指定每個視圖與其他同級視圖在剩余空間中的占比。 這有點像飲料配方中各種成分的比例： “2 份蘇打、1 份糖漿”是指飲料中三分之二是蘇打。例如，如果您將一個視圖的 weight 值指定為 2，將另一個視圖的 weight 值指定為 1，總和是 3，那麽第一個視圖將填滿剩余空間的 2/3，而第二個視圖則填滿其余部分。 如果您添加了第三個視圖，將其 weight 值指定為 1，那麽現在第一個視圖（weight 值為 2）將獲得 1/2 的剩余空間，其余兩個視圖則各占 1/4。

所有視圖的默認 weight 值都為 0，所以如果您僅將一個視圖的 weight 值指定為大於 0，那麽等到其他所有視圖都獲得所需空間後，該視圖便會填滿所有剩余空間。

使輸入框填滿屏幕寬度

在 activity_main.xml 中，修改 <EditText> ，使這些屬性如下所示：

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

將寬度設置為零 (0dp) 可提高布局性能，這是因為如果將寬度設置為 "wrap_content"，則會要求系統計算寬度，而該計算最終毫無意義，因為 weight 值還需要計算另一個寬度，才能填滿剩余空間。

圖 3. EditText 小部件獲得了布局的所有 weight，因此它填滿了 LinearLayout 中的剩余空間。

完整的 activity_main.xml 布局文件現在看上去應該像下面這樣：

<?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:orientation="horizontal"
   android:layout_width="match_parent"
   android:layout_height="match_parent">
    <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>

運行您的應用

要查看應用目前在設備或模擬器上的外觀，請點擊工具欄中的 Run 。

要添加諸如響應按鈕和啟動另一個 Activity 等應用行為，請繼續學習下一課。

1.3 構建簡單的用戶界面