1.4　用戶界面設計

點擊activity_main.xml布局文件頁，會在編輯工具窗口打開布局編輯器，如圖1-9所示。如果看不到布局文件，請在項目工具窗口展開app/res/layout/找到它并雙擊打開。如果看到的是activity_main.xml文件的XML代碼，請點擊底部的Design頁，切換顯示布局預覽。

圖1-9　布局編輯器

按照約定，布局文件的命名基于其關聯的activity：activity_作為前綴，activity子類名的其余部分全部轉小寫并緊隨其后，單詞之間以下劃線隔開。例如，當前新建項目的布局文件名為activity_main.xml，或者說你有個activity名為SplashScreenActivity，那么對應的布局就命名為activity_splash_screen。對于后續章節中的所有布局以及將要學習的其他資源，都建議采用這種命名風格。

布局編輯器展示的是文件的圖形化預覽界面，你可以點擊底部的Text頁切換顯示布局的XML代碼。

當前，activity_main.xml文件定義了默認的activity布局。默認的XML布局文件內容經常有變，但相比代碼清單1-1，一般不會有很大出入。

代碼清單1-1　默認的activity布局（res/layout/activity_main.xml）

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

應用activity的默認布局定義了兩個視圖（view）：ConstraintLayout和TextView。

視圖是用戶界面的構造模塊。顯示在屏幕上的一切都是視圖。用戶能看到并與之交互的視圖稱為部件（widget）。有些部件可以用來顯示文字或圖像，有些部件（比如按鈕）可以點擊以觸發事件任務。

Android SDK內置了多種部件，通過配置各種部件可獲得應用所需的外觀及行為。每一個部件都是View類或其子類（比如TextView或Button）的一個具體實例。

我們得想辦法告訴部件它們在屏幕上該位于哪里。ViewGroup就是這樣一種特殊的View，它包含并布置其他視圖。ViewGroup視圖本身不顯示內容，它規劃其他視圖內容應該顯示在哪里。ViewGroup通常又稱為布局。

在當前默認布局里，ConstraintLayout這個ViewGroup布置了一個TextView部件，這是它唯一的子部件。有關布局和部件的知識，以及如何使用ConstraintLayout，第10章將詳述。

圖1-10展示了代碼清單1-1中定義的ConstraintLayout和TextView是如何在屏幕上顯示的。

圖1-10　顯示在屏幕上的默認視圖

不過，圖1-10所示的默認部件并不是我們需要的，MainActivity的用戶界面需要以下五個部件：

• 一個垂直LinearLayout部件；
• 一個TextView部件；
• 一個水平LinearLayout部件；
• 兩個Button部件。

圖1-11展示了以上部件是如何構成MainActivity用戶界面的。

圖1-11　布置并顯示在屏幕上的部件

下面我們在布局XML文件中定義這些部件。對照代碼清單1-2，修改activity_main.xml文件內容。注意，需刪除的XML代碼已打上刪除線，需添加的XML以粗體顯示。本書統一使用這樣的代碼增刪處理模式。

代碼清單1-2　在XML文件中定義部件（res/layout/activity_main.xml）

<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

    <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="24dp"
        android:text="@string/question_text" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

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

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

    </LinearLayout>

</LinearLayout>

參照代碼清單輸入代碼，暫時不理解這些代碼也沒關系，你會在后續學習中逐漸弄明白的。注意，開發工具無法校驗布局XML內容，拼寫錯誤早晚會出問題，應盡量避免。

可以看到，有三行以android:text開頭的代碼出現了錯誤信息。暫時忽略它們，稍后會處理。

對照圖1-11所示的用戶界面查看XML文件，可以看出部件與XML元素一一對應。元素名稱就是部件的類型。

各元素均有一組XML屬性。屬性可以看作關于如何配置部件的指令。

為方便理解元素與屬性的工作原理，接下來我們將以層級視角來研究布局。

1.4.1　視圖層級結構

部件包含在視圖對象的層級結構中，這種結構又稱作視圖層級結構（view hierarchy）。圖1-12展示了代碼清單1-2所示的XML布局對應的視圖層級結構。

圖1-12　布局部件的層級結構

從布局的視圖層級結構可以看到，其根元素是一個LinearLayout部件。作為根元素，LinearLayout部件必須指定Android XML資源文件的命名空間屬性。

LinearLayout部件繼承自ViewGroup部件（也是一個View子類）。ViewGroup部件是包含并布置其他視圖的特殊視圖。想要以一列或一排的樣式布置部件，就可以使用LinearLayout部件。其他ViewGroup子類還有ConstraintLayout和FrameLayout。

如果某個視圖包含在一個ViewGroup中，該視圖與ViewGroup即構成父子關系。根LinearLayout有兩個子部件：TextView和另一個LinearLayout。作為子部件的LinearLayout自己還有兩個Button子部件。

1.4.2　部件屬性

下面來看看配置部件時常用的一些屬性。

1. android:layout_width和android:layout_height屬性

   幾乎每類部件都需要android:layout_width和android:layout_height屬性。以下是它們的兩個常見屬性值（二選一）。

   • match_parent：視圖與其父視圖大小相同。
   • wrap_content：視圖將根據其顯示內容自動調整大小。

   根LinearLayout部件的高度與寬度屬性值均為match_parent。LinearLayout雖然是根元素，但它也有父視圖——Android提供該父視圖來容納應用的整個視圖層級結構。

   其他包含在界面布局中的部件，其高度與寬度屬性值均被設置為wrap_content。請參照圖1-11理解該屬性值定義尺寸大小的作用。

   TextView部件比其包含的文字內容區域稍大一些，這主要是android:padding="24dp"（dp即density-independent pixel，指與密度無關的像素，詳見第10章）屬性的作用。該屬性告訴部件在決定大小時，除內容本身外，還需增加額外指定量的空間。這樣屏幕上顯示的問題與按鈕之間便會留有一定的空間，使整體顯得更為美觀。

2. android:orientation屬性

   android:orientation屬性是兩個LinearLayout部件都具有的屬性，它決定兩者的子部件是水平放置還是垂直放置。根LinearLayout是垂直的，子LinearLayout是水平的。

   子部件的定義順序決定其在屏幕上顯示的順序。在垂直的LinearLayout中，第一個定義的子部件出現在屏幕的最上端；而在水平的LinearLayout中，第一個定義的子部件出現在屏幕的最左端。（如果設備文字從右至左顯示，比如阿拉伯語或者希伯來語，則第一個定義的子部件出現在屏幕的最右端。）

3. android:text屬性

   TextView與Button部件具有android:text屬性。該屬性指定部件要顯示的文字內容。

   請注意，android:text屬性值不是字符串值，而是以@string/語法形式對字符串資源（string resource）的引用。

   字符串資源包含在一個獨立的名叫strings的XML文件中（strings.xml），雖然可以硬編碼設置部件的文本屬性值，比如android:text="True"，但這通常不是個好辦法。比較好的做法是將文字內容放置在獨立的字符串資源XML文件中，然后引用它們。這樣會方便應用的本地化（詳見第17章）。

   需要在activity_main.xml文件中引用的字符串資源還沒添加，現在就來處理。

1.4.3　創建字符串資源

每個項目都包含一個默認字符串資源文件res/values/strings.xml。

打開res/values/strings.xml文件，可以看到，項目模板已經添加了一個字符串資源。如代碼清單1-3所示，添加應用布局需要的三個新字符串。

代碼清單1-3　添加字符串資源（res/values/strings.xml）

<resources>
    <string name="app_name">GeoQuiz</string>
    <string name="question_text">Canberra is the capital of Australia.</string>
    <string name="true_button">True</string>
    <string name="false_button">False</string>
</resources>

（Android Studio某些版本的strings.xml默認帶有其他字符串，這些字符串可能與其他文件有關聯，請勿隨意刪除。）

現在，在GeoQuiz項目的任何XML文件中，只要引用到@string/false_button，應用運行時，就會得到“False”文本。

保存strings.xml文件。這時，activity_main.xml布局缺少字符串資源的提示信息應該消失了。（如仍有錯誤提示，請檢查一下這兩個文件，確認沒有拼寫錯誤。）

默認的字符串文件雖然已命名為strings.xml，但你仍可以按個人喜好重新命名。一個項目也可以有多個字符串文件。只要這些文件都放在res/values/目錄下，含有一個resources根元素，以及多個string子元素，應用就能找到并正確使用它們。

1.4.4　預覽布局

至此，應用的界面布局已經完成，可以使用圖形布局工具實時預覽了。回到activity_main.xml文件，在編輯器工具窗口的底部點擊Design頁進行布局預覽，結果如圖1-13所示。

圖1-13　在Design頁預覽activity_main.xml布局

圖1-13展示了兩種布局預覽模式。在工具欄左上角，有個鉆石按鈕，我們可以通過它的下拉菜單切換顯示不同的布局預覽模式——設計（Design）預覽或藍圖（Blueprint）預覽，或者并排顯示設計預覽和藍圖預覽。

在圖1-13中，左邊是設計預覽模式，用來展示布局在設備上的效果，也包括主題樣式；右邊是藍圖預覽模式，用來展示部件的尺寸以及它們之間的位置關系。

在設計預覽模式下，你還可以查看布局在不同的設備配置下的樣子。通過預覽窗口上方的面板，可以指定設備類型、Android模擬器版本、設備主題以及設備使用區域，查看布局的不同渲染結果。你甚至可以模擬某個語言區域的自右到左的文字顯示模式。

除了預覽，你也可以直接使用布局編輯器擺放部件，布置布局。如圖1-14所示，項目窗口左邊有個面板，包括了Android所有的內置部件。你可以將它們從面板拖曳到視圖上，或者拖到左下方的部件樹上，更精準地控制如何擺放部件。

圖1-14　圖形化布局編輯器

圖1-14展示了帶布局裝飾（layout decoration）的布局預覽。這些裝飾元素有設備狀態欄、帶GeoQuiz標簽的應用欄，以及虛擬設備按鈕欄。要添加這些裝飾，點擊預覽窗口上方工具欄中的眼睛圖標，選擇Show Layout Decorations菜單項即可。

圖形化布局編輯器非常有用，尤其是在使用ConstraintLayout時，后面學習第10章內容時，你將有所體會。