建立簡單的用戶界面

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

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

Android的圖形用戶界面是由多個View和ViewGroup構(gòu)建出來的。View是通用的UI窗體小組件，比如按鈕(Button)或者文本框(text field)，而ViewGroup是不可見的，是用于定義子View布局方式的容器，比如網(wǎng)格部件(grid)和垂直列表部件(list)。

Android提供了一個對應(yīng)于View和ViewGroup子類的一系列XMl標簽，我們可以在XML里使用層級視圖元素創(chuàng)建自己的UI。

Layouts是ViewGroup的子類，接下來的練習將使用LinearLayout。

http://wiki.jikexueyuan.com/project/android-training-geek/images/viewgroup.png" alt="viewgroup" />

Figure 1. 關(guān)于viewgroup對象如何組織布局分支和包含其他view對象。

可選的布局文件：在XML中定義界面布局而不是在運行時去動態(tài)生成布局是有多個原因的，其中最重要的一點是這樣可以使得你為不同大小的屏幕創(chuàng)建不同的布局文件。例如，你可以創(chuàng)建2個版本的布局文件，告訴系統(tǒng)在小的屏幕上使用其中一個布局文件，在大的屏幕上使用另外一個布局文件。更多信息，請參考兼容不同的設(shè)備

創(chuàng)建一個LinearLayout

1 在Android Studio中，從res/layout目錄打開activity_my.xml文件。上一節(jié)創(chuàng)建新項目時生成的BlankActivity，包含一個activity_my.xml文件，該文件根元素是一個包含TextView的RelativeLayout。

2 在Preview面板點擊http://wiki.jikexueyuan.com/project/android-training-geek/images/as-hide-side.png" alt="image" />關(guān)閉右側(cè)Preview面板，在Android Studio中，當打開布局文件時，可以看到一個Preview面板，點擊這個面板中的標簽，可利用WYSIWYG（所見即所得）工具在Design面板看到對應(yīng)的圖形化效果，但在本節(jié)直接操作XML文件即可。

3 刪除 TextView 標簽.

4 把 RelativeLayout 標簽改為 LinearLayout.

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

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

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

res/layout/activity_my.xml

<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設(shè)定。LinearLayout里的子布局按照XML里定義的順序顯示在屏幕上。

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

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

更多關(guān)于Layout屬性的信息，請參照XML布局向?qū)А?/p>

添加一個文本輸入框

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

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

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

3 設(shè)置hint屬性為一個string 值的引用edit_message.

代碼如下：

res/layout/activity_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

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

當想從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

對于寬和高不建議指定具體的大小，使用wrap_content指定之后，這個視圖將只占據(jù)內(nèi)容大小的空間。如果你使用了match_parent，這時EditText將會布滿整個屏幕，因為它將適應(yīng)父布局的大小。更多信息，請參考 布局向?qū)?/a>。

android:hint

當文本框為空的時候,會默認顯示這個字符串。對于字符串@string/edit_message的值所引用的資源應(yīng)該是定義在單獨的文件里，而不是直接使用字符串。因為使用的值是存在的資源，所以不需要使用+號。然而，由于你還沒有定義字符串的值，所以在添加@string/edit_message時候會出現(xiàn)編譯錯誤。下邊你可以定義字符串資源值來去除這個錯誤。

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

增加字符串資源

默認情況下，你的Android項目包含一個字符串資源文件，res/values/string.xml。打開這個文件，為"edit_message"增加一個供使用的字符串定義，設(shè)置值為"Enter a message."

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

2 添加一個string名為"edit_message" ,值為 "Enter a message".

3 再添加一個string名為 "button_send"，值為"Send".下面的內(nèi)容將使用這個string來創(chuàng)建一個按鈕.

4 刪除 "hello world" string這一行.

下邊就是修改好的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>
    <string name="title_activity_main">MainActivity</string>
</resources>

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

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

添加一個按鈕

1 在 Android Studio里, 編輯 res/layout下的 activity_my.xml 文件.

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

3 設(shè)置Button的width 和 height 屬性值為 "wrap_content" 以便讓Button大小能完整顯示其上的文本.

4 定義button的文本使用android:text 屬性，設(shè)置其值為之前定義好的 button_send 字符串.

此時的 LinearLayout 看起來應(yīng)該是這樣

res/layout/activity_my.xml

<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" />
      <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

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

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

http://wiki.jikexueyuan.com/project/android-training-geek/images/edittext_wrap.png" alt="edittext_wrap" />

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

權(quán)重的值指的是每個部件所占剩余空間的大小，該值與同級部件所占空間大小有關(guān)。就類似于飲料的成分配方：“兩份伏特加酒，一份咖啡利口酒”，即該酒中伏特加酒占三分之二。例如，我們設(shè)置一個View的權(quán)重是2，另一個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ù)空間小)。

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

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

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

1 在activity_my.xml文件里，設(shè)置EditText的layout_weight屬性值為1 .

2 設(shè)置EditText的layout_width值為0dp.

res/layout/activity_my.xml

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

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

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

http://wiki.jikexueyuan.com/project/android-training-geek/images/edittext_gravity.png" alt="edittext_gravity" />

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

res/layout/activity_my.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">
    <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按鈕

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

ant debug
adb install bin/MyFirstApp-debug.apk

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