注：本文翻譯自Google官方的Android Developers Training文檔，譯者技術(shù)一般，由于喜愛(ài)安卓而產(chǎn)生了翻譯的念頭，純屬個(gè)人興趣愛(ài)好。

原文鏈接： http://developer.android.com/training/basics/firstapp/building-ui.html

?

一.?構(gòu)建一個(gè)簡(jiǎn)單UI

一個(gè)Android應(yīng)用通過(guò) View 和 ViewGroup 對(duì)象所組成的層次結(jié)構(gòu)來(lái)構(gòu)建圖形用戶(hù)接口（GUI）。通常 View 對(duì)象是一些UI控件，比如按鈕（ buttons ），文本框（ text fields ）等。 ViewGroup 對(duì)象則是一些可見(jiàn)的裝載 View 對(duì)象的“容器”，同時(shí)它定義了它的子 View 對(duì)象是如何布局的，比如，定義子對(duì)象是應(yīng)該在網(wǎng)格狀布局列表中還是再垂直布局的列表中。

Android為每一種 View 和 ViewGroup 的子類(lèi)提供了在XML中所對(duì)應(yīng)的詞匯，所以用戶(hù)可以在XML中通過(guò)使用一個(gè)UI元素的層次關(guān)系來(lái)定義自己的UI。 ?

圖1.? ViewGroup 的分支布局結(jié)構(gòu)，每個(gè) ViewGroup 下包含了其他的 View 對(duì)象。

在這堂課中，你將會(huì)通過(guò)XML語(yǔ)句創(chuàng)建一個(gè)布局，這當(dāng)中包含了一個(gè)文本框和一個(gè)按鈕。在后續(xù)課程中，你將會(huì)實(shí)現(xiàn)按鈕按下后的響應(yīng)操作：把文本框中的內(nèi)容發(fā)送給另一個(gè)Activity。

實(shí)現(xiàn)布局方式的選擇 ：在XML中聲明UI布局而不是在運(yùn)行時(shí)通過(guò)代碼來(lái)聲明是更加有效的，這其中有一些原因，最重要的，是你可以為不同規(guī)格的屏幕創(chuàng)建不同的布局。比如，你可以創(chuàng)建兩個(gè)版本的布局文件，并且告訴一同在小屏幕設(shè)備上使用其中一種布局，在大屏幕設(shè)備上使用另一種。可以通過(guò)閱讀 Supporting Different Devices 獲取更多這方面的信息。

?

一）. 創(chuàng)建一個(gè)線性布局

在“ res/layout/ ”這一目錄下，打開(kāi)文件：“ activity_main.xml ”

注 ：在Eclipse中，當(dāng)你打開(kāi)一個(gè)布局文件，你首先看到的將會(huì)是圖形布局編輯器（ Graphical Layout editor ），通過(guò)使用 WYSIWYG工具（譯者注： WYSIWYG意為所見(jiàn)即所得 ），這個(gè)工具可以幫助你構(gòu)建布局。在這一堂課當(dāng)中，你將直接通過(guò)XML語(yǔ)句實(shí)現(xiàn)布局，所以點(diǎn)擊屏幕底部 activity_main.xml 這一標(biāo)簽進(jìn)入XML編輯器。

當(dāng)你創(chuàng)建這個(gè)項(xiàng)目工程的時(shí)候，你選擇的 BlankActivity模板包含了這個(gè) activity_main.xml 布局文件，在該文件當(dāng)中，有一個(gè) RelativeLayout 的根View和一個(gè) TextView 的子 View 。

首先，刪除 ? <TextView> 這一標(biāo)簽，同時(shí)將 <RelativeLayout> 改為 <LinearLayout> ，并且加上 android:orientation 這一屬性字段，將它設(shè)置為： “ horizontal ”。修改后的結(jié)果如下：

      
        <?
      
      
        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"
      
      
        >
      
      
        </
      
      
        LinearLayout
      
      
        >
      
    

這里 LinearLayout 是一個(gè)View Group對(duì)象（ ViewGroup 的一個(gè)子類(lèi)），從方向上來(lái)說(shuō)，它將它的子View布局在水平方向或垂直方向上，具體的方向由 android:orientation 這一屬性字段定義。每一個(gè) LinearLayout 的子View在屏幕上出現(xiàn)的先手順序與它在XML代碼里出現(xiàn)的先后順序一致。

另外兩個(gè)屬性字段： android:layout_width 和 android:layout_height 對(duì)所有View對(duì)象來(lái)說(shuō)都是必須的，因?yàn)樗鼈兌x了View的尺寸。

由于 LinearLayout 是布局的根View，所以應(yīng)該通過(guò)把它的寬和高設(shè)置為 "match_parent" ,以此使它填滿(mǎn)整個(gè)屏幕區(qū)域。上述提到的這一屬性值的含義即將該View的寬和高延展只和它的父View的寬高一致。

更多信息，可以閱讀 Layout 幫助文檔。

?

二）. 添加一個(gè)文本框

為了創(chuàng)建一個(gè)用戶(hù)可編輯的文本框，添加一個(gè) <EditText> 標(biāo)簽在 <LinearLayout> 中。

如同每一個(gè) View 對(duì)象，你必須通過(guò)定義特定的XML屬性字段來(lái)定義 EditText 對(duì)象的屬性。這里展示你應(yīng)該在 <LinearLayout> 標(biāo)簽中如何聲明它：


      
        <
      
      
        EditText 
      
      
        android:id
      
      
        ="@+id/edit_message"
      
      
        

        android:layout_width
      
      
        ="wrap_content"
      
      
        

        android:layout_height
      
      
        ="wrap_content"
      
      
        

        android:hint
      
      
        ="@string/edit_message"
      
      
        />
      
    

? 關(guān)于這些屬性字段 ：

android:id

為該View提供唯一的Id標(biāo)識(shí)，在你的應(yīng)用代碼中，你可以通過(guò)它來(lái)引用該對(duì)象，進(jìn)而讀取和操作這一對(duì)象（在下一次課程中將會(huì)學(xué)習(xí)的內(nèi)容）。

這個(gè)at（@）的符號(hào)，是當(dāng)你在XML中引用任意資源對(duì)象所必須的。緊隨它之后的是資源的類(lèi)型（在此例中，類(lèi)型是id），一個(gè)斜線，和資源對(duì)象的名字（ edit_message ）?

這個(gè)在資源類(lèi)型前的加（+）號(hào)，僅在你第一次定義一個(gè)資源ID時(shí)需要。當(dāng)你編譯你的應(yīng)用時(shí)，SDK工具使用這個(gè)ID名字在你項(xiàng)目中的“ gen/R.java ”這一文件下會(huì)創(chuàng)建一個(gè)新的資源ID，該新ID會(huì)代表我們的 EditText 元素。一旦這個(gè)資源ID通過(guò)這種方式聲明好后，在其他地方對(duì)這個(gè)ID的引用就不在需要加號(hào)了。記住：僅在聲明一個(gè)新的 資源ID 的時(shí)候需要使用加號(hào)，對(duì)于一些固有的資源，比如字符串(string)，布局(layout)來(lái)說(shuō)則不需要。

關(guān)于資源對(duì)象 ：

簡(jiǎn)單的來(lái)說(shuō)，一個(gè)資源對(duì)象就是與一個(gè)應(yīng)用資源（比如一個(gè)位圖，一個(gè)布局文件或一個(gè)字符串）唯一關(guān)聯(lián)起來(lái)的整形形式的名字。在你的項(xiàng)目工程的 gen/R.java 文件下，每一個(gè)資源有一個(gè)與之對(duì)應(yīng)的資源對(duì)象。你可以通過(guò)使用在R類(lèi)中的對(duì)象名稱(chēng)來(lái)引用它對(duì)應(yīng)的資源，比如：當(dāng)你需要為 android:hint 這一屬性字段定義一個(gè)字符串的值時(shí)。同時(shí)你也可以通過(guò)在 android:id 這一屬性字段， 創(chuàng)建一個(gè)與該View關(guān)聯(lián)的資源ID，以此使你可以在其他的代碼位置對(duì)這個(gè)View進(jìn)行引用。

當(dāng)你每次編譯你的應(yīng)用時(shí)，SDK工具會(huì)自動(dòng)生成 R.java 文件，你應(yīng)該永遠(yuǎn)都不要手動(dòng)修改這一文件。

閱讀 Providing Resources 來(lái)獲取更多信息。

android:layout_width 和 android:layout_height

除了為寬和高定義特定的尺寸，使用 " wrap_content "這一屬性值意味著該View的大小剛好能適應(yīng)于它的內(nèi)容。如果你使用 " match_parent "，這個(gè) EditText 控件將會(huì)充滿(mǎn)整個(gè)屏幕，因?yàn)樗鼘?huì)和它的父View（ LinearLayout ）的尺寸保持一致。閱讀 Layouts 獲得更多信息。

android:hint

這是一個(gè)當(dāng)文本框內(nèi)容為空時(shí)，默認(rèn)顯示的字符串。除了直接定義字符串的值外，還可以通過(guò) " @string/edit_message " ?這樣的方法來(lái)引用一個(gè)在其他文件定義了的字符串資源。因?yàn)檫@個(gè)引用是指向一個(gè)固有的資源（不是一個(gè)ID標(biāo)識(shí)），所以不需要加上加號(hào)。然后，因?yàn)槟氵€沒(méi)有定義這個(gè)字符串資源，所以你將會(huì)看到一個(gè)編譯錯(cuò)誤，你將在下一節(jié)通過(guò)定義這個(gè)字符串來(lái)解決這個(gè)問(wèn)題。

注 ：這個(gè)字符串資源和這個(gè)空間的ID有著相同的名字： edit_message ，然而，對(duì)資源的引用會(huì)被限制在不同資源類(lèi)型特定的作用域內(nèi)，因此在此例中，使用相同的名字也不會(huì)產(chǎn)生命名沖突。

?

三）. 添加字符串資源

當(dāng)你需要在UI中添加文本時(shí)，你應(yīng)該經(jīng)常講字符串定義為資源的形式，字符串資源可以允許你在同一個(gè)地方統(tǒng)一管理所有的UI文字，使得尋找和更新文字變得輕松。同時(shí)，將字符串放在外部可以允許你通過(guò)為每一個(gè)字符資源提供不同的定義，解決你的應(yīng)用對(duì)于不同語(yǔ)言的本地化問(wèn)題。

默認(rèn)的，你的Android項(xiàng)目工程包含了一個(gè)字符串資源文件，這個(gè)文件位于：“ res/values/strings.xml ”。現(xiàn)在我們添加一個(gè)新的字符串，將它命名為“ edit_message ”，并且把它的值定義為“ Enter a message ”（你可以將字符串“ Hello World ”刪除）。

與此同時(shí)，添加一個(gè)值為“ Send ”的字符串，它的名字為“ button_send ”，這是為之后將要添加的按鈕控件做的準(zhǔn)備工作。

修改后的 strings.xml 變?yōu)椋?

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

關(guān)于使用字符串資源解決應(yīng)用對(duì)于不同語(yǔ)言的本地化問(wèn)題，更多的信息可以閱讀： Supporting Different Devices

?

四）. 添加一個(gè)按鈕

現(xiàn)在在布局中添加一個(gè) <Button> 標(biāo)簽，它緊接著 <EditText> 標(biāo)簽：

      
        <
      
      
        Button

        
      
      
        android:layout_width
      
      
        ="wrap_content"
      
      
        

        android:layout_height
      
      
        ="wrap_content"
      
      
        

        android:text
      
      
        ="@string/button_send"
      
      
        />
      
    

把高度和寬度設(shè)置為“ wrap_content ”，這樣按鈕的大小正好適應(yīng)于按鈕的文字。這個(gè)按鈕控件暫時(shí)不需要 android:id 這一屬性字段，因?yàn)樗? activity 的代碼中暫時(shí)不會(huì)被引用到。

?

五）. 使輸入框的寬度與屏幕寬度對(duì)應(yīng)

現(xiàn)在的布局被設(shè)計(jì)成 EditText 和 Button 這兩個(gè)控件的大小和它們的內(nèi)容相適應(yīng)，如圖2所示：

圖2. 寬度設(shè)置為“ wrap_content ”后的 EditText 和 Button

這樣做對(duì)于按鈕來(lái)說(shuō)沒(méi)有什么問(wèn)題，但是對(duì)文本框來(lái)說(shuō)可能就不太好，因?yàn)橛脩?hù)可能會(huì)輸入更長(zhǎng)的字符串。所以最好是屏幕中沒(méi)有用到的寬度給文本框使用。我們可以在 LinearLayout 中使用 比重（Weight） 屬性來(lái)實(shí)現(xiàn)，具體來(lái)說(shuō)是使用 android:layout_weight 這一屬性字段。


比重 的值是一個(gè)數(shù)字，這個(gè)數(shù)字用來(lái)表征每個(gè)View相對(duì)于它兄弟View所消耗的空間來(lái)說(shuō)，可以使用的剩余的空間大小。可以理解為飲料的配方：“2份伏特加和1份咖啡甜酒”，這就意味著飲料中的三分之二是伏特加。例如：如果你給了一個(gè)View的 比重 是2，而另一個(gè)View的 比重 是1，那么他們的和是3，所以第一個(gè)View消耗剩余空間的三分之二，而第二個(gè)View消耗三分之一。如果你又添加了第三個(gè)View，它的 比重 是1，那么現(xiàn)在第一個(gè)View將會(huì)獲得剩余空間的一半，另外兩個(gè)則是四分之一。

默認(rèn)所有的View的 比重 是0，所以如果你僅對(duì)一個(gè)View的 比重 定義為大于0的任何數(shù)，那么這個(gè)View將會(huì)拿到剩余的所有空間，而其他View則僅擁有他們所需要的空間。所以，為了讓 EditText 把剩余空間填滿(mǎn)，把它的 比重 設(shè)置為1，同時(shí)讓按鈕沒(méi)有 比重 就可以實(shí)現(xiàn)了。

      
        <
      
      
        EditText

        
      
      
        android:layout_weight
      
      
        ="1"
      
      
        

        ... 
      
      
        />
      
    

當(dāng)你定義了 比重 時(shí)，為了提高布局的效率，我們把 EditText 的寬度設(shè)置為0（0dp）。將寬度設(shè)置為0有利于提高布局性能，因?yàn)槭褂? wrap_content "作為寬度的話需要系統(tǒng)計(jì)算控件的寬度，而這是不必要的，因?yàn)檫@個(gè)寬度值需要另一個(gè)控件的寬度計(jì)算結(jié)果，以此來(lái)進(jìn)一步的填滿(mǎn)屏幕的寬度。

      
        <
      
      
        EditText

        
      
      
        android:layout_weight
      
      
        ="1"
      
      
        

        android:layout_width
      
      
        ="0dp"
      
      
        

        ... 
      
      
        />
      
    

圖3展示了把 比重 全部分配給 EditText 后的運(yùn)行結(jié)果：

圖3.? EditText 擁有了布局的所有 比重 ，所以它填滿(mǎn)了 LinearLayout 剩余的空間

現(xiàn)在，修改后的布局文件應(yīng)該是這樣的：

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

這個(gè)布局將會(huì)被當(dāng)你創(chuàng)建項(xiàng)目工程時(shí)，SDK工具生成的默認(rèn) Activity 類(lèi)所應(yīng)用，現(xiàn)在你可以運(yùn)行這個(gè)應(yīng)用來(lái)看看結(jié)果：

• 在Eclipse中，點(diǎn)擊工具欄中的“ 運(yùn)行 ”。
• 或者在命令行下，將工作目錄切換至該Android項(xiàng)目的根目錄，然后執(zhí)行：

      
        ant debug

adb install bin/MyFirstApp-debug.apk
      
    

?

下一節(jié)課程將會(huì)進(jìn)一步學(xué)習(xí)按鈕的響應(yīng)，從文本框中讀取數(shù)據(jù)和啟動(dòng)一個(gè)新的 activity 等知識(shí)。

?

【Android Developers Training】 3. 構(gòu)建一個(gè)簡(jiǎn)單UI