建立簡單的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

公眾號
微信公眾號

編程獅公眾號