建立簡單的Android用戶界面

2018-08-02 18:32 更新

編寫：yuanfentiank789 - 原文：http://developer.android.com/training/basics/firstapp/building-ui.html

在本小節(jié)里，我們將學(xué)習如何用 XML 創(chuàng)建一個帶有文本輸入框和按鈕的界面。下一節(jié)課將學(xué)會使 APP 對按鈕做出響應(yīng)——按鈕被按下時，文本框里的內(nèi)容被發(fā)送到另外一個 Activity。

Android 的圖形用戶界面由多個視圖（View）和視圖組（ViewGroup）構(gòu)建而成。View 是通用的 UI 窗體小組件，如：按鈕（Button）、文本框（Text field）；而 ViewGroup 則是用來定義子視圖布局的不可見的容器，如：網(wǎng)格部件（grid）、垂直列表部件（vertical list）。

Android 提供了一系列對應(yīng)于 View 和 ViewGroup 子類的 XML 標簽，以便我們用 XML 創(chuàng)建自己的 UI。

Layouts 是 ViewGroup 的子類。我們將在接下來的教程中練習如何使用 LinearLayout。

圖 1: ViewGroup

圖 1 關(guān)于 ViewGroup 對象如何組織布局分支和包含其他 View 對象。

可選的布局文件

有很多理由使得我們選擇在 XML 中定義界面布局，而不是在運行時動態(tài)生成布局。其中最重要的一點是——這可以讓你為不同大小的屏幕創(chuàng)建不同的布局文件。例如，你可以創(chuàng)建兩個版本的布局文件，告訴系統(tǒng)在小屏幕上使用其中一個布局文件，在大屏幕上使用另外一個布局文件。參見 兼容不同的設(shè)備。

創(chuàng)建一個 LinearLayout

  1. 在 Android Studio 中，從 res/layout 目錄打開 content_my.xml 文件。

    上一節(jié)創(chuàng)建新項目時生成的 BlankActivity 包含一個 content_my.xml 文件，該文件根元素是一個包含 TextView 的 RelativeLayout。

  2. 在 Preview 面板點擊 圖標：隱藏 關(guān)閉右側(cè) Preview 面板。

    在 Android Studio 中打開布局文件時，可以看到一個 Preview 面板。點擊這個面板中的標簽，可利用 WYSIWYG（所見即所得）工具在 Design 面板看到對應(yīng)的圖形化效果。但在本節(jié)中，我們將學(xué)習如何直接修改 XML 文件。

  3. 刪除 [<TextView>] 標簽。

  4. 把 [<RelativeLayout>] 標簽改為 [<LinearLayout>]。

  5. 為 [<LinearLayout>] 添加 android:orientation 屬性并設(shè)置值為 "horizontal"。

  6. 去掉 android:padding 屬性和 tools:context 屬性。

修改后結(jié)果如下：

res/layout/content_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_my">

LinearLayout 是 ViewGroup 的子類，用于放置水平或者垂直方向的子視圖部件，放置方向由屬性 android:orientation 決定。LinearLayout 里的子布局按照 XML 里定義的順序顯示在屏幕上。

所有的 Views 都會用到 android:layout_width 和 android:layout_height 這兩個屬性來設(shè)置自身的大小。

由于 LinearLayout 是整個視圖的根布局，所以通過指定 width 和 height 屬性為 "match_parent" 可以使其寬度和高度充滿整個屏幕。該值表示子 View 擴張自己寬度和高度來 匹配 父控件的寬度和高度。

更多關(guān)于布局屬性的內(nèi)容，請參考 布局向?qū)?/a>。

添加一個文本輸入框

與其它 View 一樣，我們需要定義 XML 里的某些屬性來指定 EditText 的屬性值。以下是應(yīng)該在線性布局里指定的一些屬性元素：

  1. 在 content_my.xml 文件的 [<LinearLayout>] 標簽內(nèi)定義一個 [<EditText>] 標簽，并設(shè)置 id 屬性為 @+id/edit_message。

  2. 設(shè)置 layout_width 和 layout_height 屬性為 wrap_content。

  3. 設(shè)置 hint 屬性為一個名為 edit_message 的字符串。

代碼如下：

res/layout/content_my.xml

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

各屬性說明:

android:id

這是視圖的唯一標識符。可以在程序代碼中通過該標識符引用對象。例如對這個對象進行讀和修改的操作（在下一課里將會用到）。

當需要從 XML 里引用資源對象時，必須使用 @ 符號。緊隨 @ 之后的是資源的類型（這里是 id），然后是資源的名字（這里使用的是 edit_message）。

+ 號只在第一次定義一個資源 ID 的時候需要。它是告訴 SDK——此資源 ID 需要被創(chuàng)建。在應(yīng)用程序被編譯之后，SDK 就可以直接使用這個 ID。edit_message 是在項目文件 gen/R.java 中創(chuàng)建一個新的標識符，這個標識符和 EditText 關(guān)聯(lián)。一旦資源 ID 被創(chuàng)建了，其他資源如果引用這個 ID 就不再需要 + 號。

android:layout_width 和 android:layout_height

不建議指定寬度和高度的具體尺寸，應(yīng)使用 "wrap_content"。因為這樣可以保證視圖只占據(jù)內(nèi)容大小的空間。如果你使用了 "match_parent"，這時 EditText 將會布滿整個屏幕，因為它將適應(yīng)父布局的大小。參見 布局向?qū)?/a>。

android:hint

當文本框為空的時候，會默認顯示這個字符串。對于字符串 "@string/edit_message" 的值所引用的資源應(yīng)該定義在單獨的文件里，而不是直接使用字符串。因為使用的值是存在的資源，所以不需要使用 + 號。當然，由于你現(xiàn)在還沒有定義字符串，所以在添加 @string/edit_message 的時候會出現(xiàn)編譯錯誤。在下一節(jié)的教程中你將學(xué)會如何定義字符串資源，到時候就不會報錯了。

資源對象

資源對象是與 APP 資源（如：位圖、布局文件、字符串）關(guān)聯(lián)的唯一整數(shù)。

在項目文件 gen/R.java 中，每個資源都有一個與之對應(yīng)的資源對象。你可以使用 R 類中的對象名稱代指資源（如：在指定 android:hint 屬性時需要的字符串）。同時，也可以通過 android:id 屬性隨時為 View 創(chuàng)建資源 ID，以便在代碼中引用這個 View。

每次編譯 APP 時，SDK 工具都會生成 R.java 文件。所以，請永遠不要修改這個文件。

參閱 資源配備。

注：該字符串資源與 ID 使用了相同的名稱（edit_message）。然而，對于資源的引用是區(qū)分類型的（比如 id 和 字符串），因此，使用相同的名稱不會引起沖突。

增加字符串資源

默認情況下，你的 Android 項目包含一個字符串資源文件，即 res/values/string.xml。打開這個文件，為 "edit_message" 增加一個定義，其值為“Enter a message”。

  1. 在 Android Studio 里，編輯 res/values 下的 strings.xml 文件。

  2. 添加一個名為 "edit_message" 的字符串，值為“Enter a message”。

  3. 再添加一個名為 "button_send" 的字符串，值為“Send”。

    下一節(jié)中將使用這個字符串創(chuàng)建按鈕。

下邊就是修改好的 res/values/strings.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>
</resources>

當你在用戶界面定義一個文本時，應(yīng)該把每一個文本字符串列入資源文件。這樣做的好處是：對于所有字符串值，字符串資源能夠單獨的修改，在資源文件里你可以很容易的找到并且做出相應(yīng)的修改。通過選擇定義每個字符串，還允許你用不同語言本地化 APP。

更多關(guān)于不同語言本字符串資源本地化的問題，請參考 兼容不同的設(shè)備。

添加一個按鈕

  1. 在 Android Studio 里，編輯 res/layout 下的 content_my.xml 文件。

  2. 在 [<LinearLayout>] 內(nèi)部的 [<EditText>] 標簽之后定義一個 [<Button>] 標簽。

  3. 設(shè)置按鈕的 width 和 height 屬性值為 "wrap_content" 以便讓按鈕的大小能完整顯示文字。

  4. 定義按鈕的文本使用 android:text 屬性，設(shè)置值為相似上一節(jié)中定義好的 button_send 字符串資源。

此時的 [<LinearLayout>] 看起來應(yīng)該是這樣：

res/layout/content_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_my">

    <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>

注：寬和高被設(shè)置為 "wrap_content"，這時按鈕占據(jù)的大小就是按鈕里文本的大小。這個按鈕不需要指定 android:id 的屬性，因為 Activity 代碼中不會引用該 Button。

當前 EditText 和 Button 部件只是適應(yīng)了他們各自內(nèi)容的大小，如圖 2 所示：

圖 2: EditText Wrap

圖 2 EditText 和 Button 窗體小組件使用 "wrap_content" 作為寬度屬性的值。

這樣設(shè)置對按鈕來說很合適，但是對于文本框來說就不太好了，因為用戶可能輸入更長的文本內(nèi)容。因此如果能夠占滿整個屏幕寬度會更好。LinearLayout 使用 權(quán)重 屬性達到這個目，即 android:layout_weight 屬性。

權(quán)重的值指的是每個部件所占剩余空間的大小，該值與同級部件所占空間大小有關(guān)。這就類似于飲料的成分配方：“兩份伏特加酒，一份咖啡利口酒”，即該酒中伏特加酒占三分之二。例如，我們定義一個權(quán)重為 2 的 View，另一個 View 的權(quán)重是 1，那么總數(shù)就是 3；這時第一個 View 占據(jù) 2/3 的空間，第二個占據(jù) 1/3 的空間。如果再加入第三個 View，權(quán)重設(shè)為 1，那么第一個 View（權(quán)重為 2 的）會占據(jù) 1/2 的空間，剩余的另外兩個 View 各占 1/4。（請注意，使用權(quán)重的前提一般是給 View 的寬或者高的大小設(shè)置為 0dp，然后系統(tǒng)根據(jù)上面的權(quán)重規(guī)則來計算 View 應(yīng)該占據(jù)的空間。但在很多情況下，如果給 View 設(shè)置了 match_parent 的屬性，那么在計算權(quán)重時則不是通常的正比，而是反比。也就是說，權(quán)重值大的反而占據(jù)空間?。?/p>

對于所有的 View 默認的權(quán)重是 0，如果只設(shè)置了一個 View 的權(quán)重大于 0，則該 View 將占據(jù)除去別的 View 本身占據(jù)的空間的所有剩余空間。因此這里設(shè)置 EditText 的權(quán)重為 1，使其能夠占據(jù)除了按鈕之外的所有空間。

讓輸入框充滿整個屏幕的寬度

為讓 EditText 充滿剩余空間，做如下操作：

  1. 在 content_my.xml 文件里，設(shè)置 [<EditText>] 的 layout_weight 屬性值為 1。

  2. 設(shè)置 [<EditText>] 的 layout_width 值為 0dp。

res/layout/content_my.xml

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

為了提升布局的效率，在設(shè)置權(quán)重時，應(yīng)該把 EditText 的寬度設(shè)為 0dp。如果設(shè)置寬度為 "wrap_content"，系統(tǒng)需要計算這個部件所占用的寬度；而此時的 EditText 因為設(shè)置了權(quán)重，所以會占據(jù)剩余空間；所以，最終導(dǎo)致的結(jié)果是：EditText 的寬度成了不起作用的屬性。

設(shè)置 EditText 權(quán)重后的效果如圖 3：

圖 3: EditText Gravity

圖 3 因 EditText 窗體小組件被設(shè)置了全部權(quán)重，所以占據(jù)了 LinearLayout 的剩余空間。

現(xiàn)在看一下完整的布局文件內(nèi)容：

res/layout/content_my.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:showIn="@layout/activity_my">
    <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>

運行應(yīng)用

整個布局默認被應(yīng)用于創(chuàng)建項目的時候 SDK 工具自動生成的 Activity，運行看下效果：

  • 在 Android Studio 里，點擊工具欄里的 Run 按鈕 Run 按鈕。

  • 或者使用命令行，進入你項目的根目錄直接執(zhí)行:

    $ ant debug
adb install -r app/build/outputs/apk/app-debug.apk

下一小節(jié)將學(xué)習有關(guān)如何對按鈕做出相應(yīng)，同時讀取文本中的內(nèi)容，啟動另外一個 Activity 等。

下一節(jié)：啟動另一個 Activity


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號