[Android Training視頻系列]1.3 Building a Simple User Interface

1.主要內容

本小節介紹如何構建一個簡單的使用者介面，包括一個輸入框和一個按鈕。詳細介紹了各個View的屬性值。
2.視頻講解
http://www.eyeandroid.com/thread-10716-1-1.html

3.翻譯參考

目錄   1 構建一個簡單的使用者介面 1.1 使用線性布局 1.2 添加一個文本輸入框 1.3 增加字串資源 1.4 添加一個按鈕 1.5 讓輸入框充滿整個螢幕的寬度

構建一個簡單的使用者介面

 

Android的圖形化使用者介面使用View和ViewGroup的層級類進行建立。View類是通用的UI表單小組件，比如按鈕或者文字框，而ViewGroup是用於定義子View布局的可視化容器，比如網格組件(grid)和垂直列表組件(list)。

Android提供了對應於View和ViewGroup子類的XMl查詢表，你可以在XML裡使用層級視圖元素建立自己的UI

圖1：展示了ViewGroup類在布局裡形成的分支並且包含View類

在這一次教程裡，你將學到怎樣用XML建立一個帶有文本輸入框和按鈕的介面。在接下來的課裡，你將學會對按鈕做出響應，當按鈕被按下的時候文字框裡的內容被發送到另外一個Activity。

 

使用線性布局

從目錄res/layout裡開啟main.xml檔案(每一個新建立的Android項目都預設包含這個檔案)。

注意：在eclipse中，當你開啟布局檔案的時候，首先看到的是ADT布局編輯，這個編輯頁是使用所見即所得 (WYSIWYG)的工具協助你建立布局。對於本課來說，你是直接在XML裡進行操作，因此點擊螢幕下方的main.xml標籤進入XML編輯頁。

在預設的情況下，main.xml中包含一個線性布局和文字框。這裡你可以重用線性布局，但是需要改變裡面的內容和布局方向。結果如下：

 

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="horizontal" ></LinearLayout>

 

 

線性布局是ViewGroup的一個子類，用於放置水平或者垂直放置子視圖的組件，由屬性android：orientation來設定方向。線性布局裡的子布局按照XML裡設定的順序顯示在螢幕上。

另外的兩個屬性android：layout_width和android:layout_height，對於所有的組件都需要對這兩個屬性進行設這。

在這裡因為線性布局是整個視圖的根布局，所以對於寬和高都應該是充滿整個螢幕的，指定為fill_parent。

注意：從Android2.2開始，為了更好的使用，fill_parent被改為match_parent。因為當我們把一個子組件設定為fill_parent之後，該組件不是佔有同等級組件剩餘的空間，而是和同等級組件重疊在一起。相反，使用match_parent則不會出現重疊的現象。

想要獲得更多的資訊，請參照XML布局嚮導。

添加一個文本輸入框

線上性布局了裡，添加一個元素就可以建立一個使用者可編輯的文字框，EditText類屬於View的一個用於展示可編輯的文本的子類。

和View的別的類一樣，你需要設定XML裡的某些屬性來指定EditText的具體功能，下邊是你應該線上性布局裡指定的一些屬性元素

 

    <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需要被建立出來。在應用程式被編譯之後，SDK就可以直接使用ID值，edit_message是在項目gen/R.java檔案中建立一個新的標示符，這個標示符就和EditText關聯起來了。一旦資源ID被建立了，其他資源如果引用這個ID就不再需要+號了，。這裡是唯一一個需要+號的屬性。可以參考右欄擷取更多關於資源類的資訊。

Android:layout_width 和android:layout_height

對於寬和高不建議指定具體的大小，使用"wrap_content"指定之後，這個視圖只是佔據內容大小的空間。如果你使用了"fill_parent"，這時EditText將會布滿整個螢幕，因為它將適應父布局的大小。想要看到更多資訊，請參考XML 布局嚮導。

Android:hint

當文字框為空白的時候,會預設顯示這個字串。對於字串"@string/edit_message"的值所引用的資源應該是定義在單獨的檔案裡，而不是直接使用字串。因為使用的是值是存在的資源，所以不需要使用+號。然而，由於你還沒有定義字串的值，所以在添加"@string/edit_message"時候會出現編譯錯誤。下邊你可以定義字串資源值來去除這個錯誤。

增加字串資源

當你在使用者介面定義一個文本的時候，你應該把每一個文本字串列入資源檔。對於所有字串值，字串資源能夠單獨的修改，在資源檔裡你可以很容易的找到並且做出相應的修改。通過選擇定義每個字串，還允許您對不同語言本地化應用程式。

預設情況下，在res/values/string.xml裡，你的Android項目包含一個字串資源檔。開啟這個檔案，刪除已經存在的"hello"字串，為"edit_message"增加一個供使用的字串值。

同時在這個檔案裡，再給button添加一個字串，命名為"button_send".

下邊就是定義好的string.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></resources> 

 

要想獲得跟多的對於不同語言本字串資源本地化的問題，請參考 支援不同裝置的課程。

添加一個按鈕

緊跟後邊，添加一個到布局裡。

 

<Button     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:text="@string/button_send" />

 

 

寬和高被設定為"wrap_content:，這時按鈕佔據的大小就是按鈕裡文本的大小。這個按鈕不需要指定android:id的屬性，因為在Activity代碼裡不被引用到。

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

當前EditText和Button組件只是適應了他們各自內容的大小，2所示：

圖2 EditText和Button有他們自己寬度，被設定為"wrap_content"

這樣設定對按鈕來說很合適，但是對於文字框來說就不太好了，因為使用者肯能輸入更長的常值內容，需要在左邊留有一定的空白空間。因此如果能夠沾滿整個寬度會更好。LinearLayout使用權重的屬性來達到這個目的，你可以使用android:layout_weitht屬性來設定。

你可以根據每一個組件所佔的空間來指定圈中值的大小，它的總數是有同層級的組件來決定的。就類似於飲料的成分配方：“兩份伏特加酒，一份咖啡利口酒”，意思就是這個酒中伏特加酒佔三分之二。例如，你設定一個View的權重是2，另一個View的權重是1，那麼總數就是3，這時第一個View佔據2/3的空間，第二個佔據1/3的空間。如果你再加入第三個View，權重設為1，那麼第一個View會佔據1/2的空間，剩餘的被另外兩個View平分。

對於所有的View預設的權重是0，如果你只設定了一個View的權重大於0，那麼這個View將佔據除去別的View本身佔據的空間的的所有剩餘空間。因此這裡設定EditText的權重為1，使其能夠佔據除了按鈕之外的所有空間。

 

     <EditText        android:layout_weight="1"        ... /> 

 

為了達到更有效布局，在你設定權重的時候，你應該把EditText的寬度設定為0。如果你設定為"wrap_content"作為寬度，系統需要自己去計算這個組件所佔有的寬度，而此時的因為你設定了權重，所以系統自動回佔據剩餘空間，EditText的寬度最終成了不起作用的屬性。

 

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

 

 

圖3,展示了設定權重時候的結果

圖3 EditText設定了權重，因此佔據了整個LinearLayout的剩餘空間大小

現在看一下完整的布局檔案內容

 

 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_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>

 

 

整個布局預設被Activity類使用，Activity類是在你建立一個項目的時候SDK工具自動產生的，你可以直接運行app查看運行結果。

在Eclipse，點擊工具列裡的Run

或者使用命令列，進入你項目的根目錄直接執行

 ant debug
adb install bin/MyFirstApp-debug.apk

繼續下一教程學習有關怎麼對按鈕做出相應，同時讀取文本裡的內容，啟動另外一個Activity，以及更多資訊。