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

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

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

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

Layouts是ViewGroup的子類(lèi)，接下來(lái)的練習(xí)將使用LinearLayout。

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

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

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

創(chuàng)建一個(gè)LinearLayout

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

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

3 刪除 TextView 標(biāo)簽.

4 把 RelativeLayout 標(biāo)簽改為 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的一個(gè)子類(lèi)，用于放置水平或者垂直方向的子視圖部件，放置方向由屬性android:orientation設(shè)定。LinearLayout里的子布局按照XML里定義的順序顯示在屏幕上。

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

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

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

添加一個(gè)文本輸入框

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

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

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

3 設(shè)置hint屬性為一個(gè)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" />

各屬性說(shuō)明:

android:id

這是定義View的唯一標(biāo)識(shí)符?？梢栽诔绦虼a中通過(guò)該標(biāo)識(shí)符對(duì)對(duì)象進(jìn)行引用，例如對(duì)這個(gè)對(duì)象進(jìn)行讀和修改的操作(在下一課里將會(huì)用到)。

當(dāng)想從XML里引用資源對(duì)象的時(shí)候必須使用@符號(hào)。緊隨@之后的是資源的類(lèi)型(這里是id)，然后是資源的名字(這里使用的是edit_message)。

+號(hào)只是當(dāng)你第一次定義一個(gè)資源ID的時(shí)候需要。這里是告訴SDK此資源ID需要被創(chuàng)建出來(lái)。在應(yīng)用程序被編譯之后，SDK就可以直接使用ID值，edit_message是在項(xiàng)目gen/R.java文件中創(chuàng)建一個(gè)新的標(biāo)識(shí)符，這個(gè)標(biāo)識(shí)符就和EditText關(guān)聯(lián)起來(lái)了。一旦資源ID被創(chuàng)建了，其他資源如果引用這個(gè)ID就不再需要+號(hào)了。這里是唯一一個(gè)需要+號(hào)的屬性。

android:layout_width 和android:layout_height

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

android:hint

當(dāng)文本框?yàn)榭盏臅r(shí)候,會(huì)默認(rèn)顯示這個(gè)字符串。對(duì)于字符串@string/edit_message的值所引用的資源應(yīng)該是定義在單獨(dú)的文件里，而不是直接使用字符串。因?yàn)槭褂玫闹凳谴嬖诘馁Y源，所以不需要使用+號(hào)。然而，由于你還沒(méi)有定義字符串的值，所以在添加@string/edit_message時(shí)候會(huì)出現(xiàn)編譯錯(cuò)誤。下邊你可以定義字符串資源值來(lái)去除這個(gè)錯(cuò)誤。

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

增加字符串資源

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

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

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

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

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>

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

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

添加一個(gè)按鈕

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

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

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

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

此時(shí)的 LinearLayout 看起來(lái)應(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"，這時(shí)按鈕占據(jù)的大小就是按鈕里文本的大小。這個(gè)按鈕不需要指定android:id的屬性，因?yàn)锳ctivity代碼中不會(huì)引用該Button。

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

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

這樣設(shè)置對(duì)按鈕來(lái)說(shuō)很合適，但是對(duì)于文本框來(lái)說(shuō)就不太好了，因?yàn)橛脩?hù)可能輸入更長(zhǎng)的文本內(nèi)容。因此如果能夠占滿(mǎn)整個(gè)屏幕寬度會(huì)更好。LinearLayout使用權(quán)重屬性來(lái)達(dá)到這個(gè)目的，你可以使用android:layout_weight屬性來(lái)設(shè)置。

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

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

讓輸入框充滿(mǎn)整個(gè)屏幕的寬度

為讓 EditText充滿(mǎn)剩余空間，做如下操作：

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)重的時(shí)候，應(yīng)該把EditText的寬度設(shè)為0dp。如果設(shè)置"wrap_content"作為寬度，系統(tǒng)需要自己去計(jì)算這個(gè)部件所占有的寬度，而此時(shí)的因?yàn)樵O(shè)置了權(quán)重，所以系統(tǒng)自動(dòng)會(huì)占據(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ùn)行應(yīng)用

整個(gè)布局默認(rèn)被應(yīng)用于創(chuàng)建項(xiàng)目的時(shí)候SDK工具自動(dòng)生成的Activity，運(yùn)行看下效果:

• 在Android Studio里，點(diǎn)擊工具欄里的Run按鈕

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

ant debug
adb install bin/MyFirstApp-debug.apk

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