構(gòu)建簡單的用戶界面

上一課下一課

該課程教你

創(chuàng)建線性布局

添加文本框

添加字符串資源

添加按鈕

使輸入框?qū)挾瘸錆M整個(gè)屏幕

你也應(yīng)該閱讀

• 布局

Android的圖形用戶界面通過?View?和?ViewGroup?的層疊來構(gòu)建。?View?對象是普通的 UI 小部件，例如按鈕和文本框；ViewGroup?對象是不可見的視圖容器，定義如何布局其子視圖，例如網(wǎng)格和縱向列表。

Android 提供了對應(yīng)于?View?和?ViewGroup?子類的 XMl 標(biāo)簽，你可以在 XML 通過 UI 元素的層疊來創(chuàng)建你的 UI。

可選布局

使用 XML 定義 UI 布局而不是在運(yùn)行時(shí)通過代碼創(chuàng)建布局，有時(shí)候是有好處的； 但對于為不同屏幕大小創(chuàng)建不同布局來說，他是特別重要的。例如，你可以創(chuàng)建兩個(gè)版本的布局， 并告訴系統(tǒng)一個(gè)用于“小”屏幕，另一個(gè)用于“大”屏幕。更多信息參見教程支持不同設(shè)備。

圖1 -?在布局中，ViewGroup?對象是如何形成分支并包含其它?View?對象的插圖。

在這一次教程里，你將學(xué)到怎樣用XML創(chuàng)建一個(gè)帶有文本輸入框和按鈕的界面。 在接下來的課里， 你將學(xué)會(huì)對按鈕做出響應(yīng)，當(dāng)按鈕被按下的時(shí)候文本框里的內(nèi)容被發(fā)送到另外一個(gè)Activity。

創(chuàng)建線性布局

---

從目錄?res/layout/?里打開?activity_main.xml?文件。

注意：在 Eclipse 中，當(dāng)你打開布局文件的時(shí)候，首先看到的是 ADT 布局編輯，這個(gè)編輯頁是使用所見即所得的工具幫助你創(chuàng)建布局。 對于本課來說，你是直接在 XML 里進(jìn)行操作，因此點(diǎn)擊屏幕下方的?activity_main.xml標(biāo)簽進(jìn)入 XML 編輯狀態(tài)。

創(chuàng)建該項(xiàng)目時(shí)你選擇的 BlankActivity 模版提供了以?RelativeLayout?為根視圖， 并包含?TextView?子視圖的activity_main.xml?文件。

首先，需要?jiǎng)h除?<TextView>?元素，把?<RelativeLayout>?布局替換為?<LinearLayout>?布局。 然后添加android:orientation?屬性并設(shè)置為 “horizontal”。 結(jié)果應(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" > </LinearLayout>

LinearLayout?布局是一個(gè)視圖組（ViewGroup的子類）， 用于水平放置或者垂直放置子視圖的部件，由屬性android:orientation?來設(shè)定方向。LinearLayout布局里的子元素按照 XML 里設(shè)定的順序顯示在屏幕上。

另外的兩個(gè)屬性?android:layout_width?和?android:layout_height用來指定視圖的大小，對所有視圖來說都是必須的。

因?yàn)椴季种?LinearLayout?是跟視圖，他應(yīng)該充滿整個(gè)屏幕區(qū)域， 這是通過設(shè)置他的高度和寬度為“match_parent”來實(shí)現(xiàn)的。 該值表明， 視圖應(yīng)該擴(kuò)展其高度和寬度以匹配其父視圖的高度和寬度。

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

添加文本框

---

在?<LinearLayout>?布局中，添加一個(gè)?<EditText>元素就可以創(chuàng)建一個(gè)用戶可編輯的文本框。

EditText類屬于View的一個(gè)用于展示可編輯的文本的子類。 和View的別的類一樣，你需要設(shè)置XML里的某些屬性來指定EditText的具體功能，下邊是你應(yīng)該在線性布局里指定的一些屬性元素：

與其他視圖對象一樣，你需要設(shè)置 XML 里的某些屬性來指定?EditText?的具體功能，下邊是你應(yīng)該<LinearLayout>?布局里指定的一些屬性元素：

? ? <EditText android:id="@+id/edit_message"android:layout_width="wrap_content"android:layout_height="wrap_content"android:hint="@string/edit_message" />

關(guān)于資源對象

資源對象是簡單的可以唯一識別命名整數(shù)，他與應(yīng)用程序資源關(guān)聯(lián)，比如位圖、布局文件和字符串。

每個(gè)資源在項(xiàng)目的?gen/R.java?文件中都定義了一個(gè)對應(yīng)資源對象。 你可以通過使用?R?類中的對象名來參照你的資源，比如當(dāng)你需要為?android:hint屬性指定一個(gè)字符串值的時(shí)候。你也可以創(chuàng)建任意的資源 ID，通過android:id?屬性關(guān)聯(lián)到視圖，它允許你從其它代碼中參照這個(gè)視圖。

SDK 工具在每次你編譯應(yīng)用時(shí)生成R.java。 你不能手動(dòng)更改該文件。

更多內(nèi)容請閱讀開發(fā)向?qū)?提供資源。

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

android:id

他為視圖提供唯一標(biāo)識，你可以在程序的代碼里進(jìn)行引用，你可以對這個(gè)類進(jìn)行讀和修改的操作 （在下一課里會(huì)用到）。

當(dāng)你想從 XML 里使用資源類的時(shí)候必須使用“@”符號。 其后是資源類型(這里是?id)、斜線、和資源名稱 (edit_message)。

資源類型前的加號 (+) 在你首次定義資源 ID 時(shí)使用。在你編譯應(yīng)用時(shí)，SDK 工具使用該 ID 名稱在項(xiàng)目的?gen/R.java?文件中創(chuàng)建新的資源 ID，使它參照到?EditText?元素。 資源 ID 以這種方式生成一次，其它對該 ID 的參照就不需要加號了。 加號只用于指定新的資源 ID 時(shí)，對于類似 字符串、布局這樣的實(shí)際資源不需要他。 關(guān)于資源對象的更多信息參見側(cè)邊欄。

android:layout_width?和?android:layout_height

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

這是文本框?yàn)榭諘r(shí)默認(rèn)顯示的字符串。 參照另外文件中定義的字符串資源的“"@string/edit_message"”值用于代替使用硬編碼的字符串值。 它指向具體的資源（不是單純的標(biāo)識符）， 因此不需要加號。 然而，因?yàn)槟氵€沒有定義該字符串資源，首先你會(huì)看到一個(gè)編譯錯(cuò)誤。 在下一小節(jié)中通過定義該字符串會(huì)解決這個(gè)問題。

注意：?有與此字符串資源同名的元素 ID：edit_message。 不過，對資源的參照根據(jù)資源的類型限定了范圍（比如?id?或?string）， 因此使用相同的名稱也不會(huì)引起沖突。

添加字符串資源

---

當(dāng)你需要在用戶界面中添加文本時(shí)，你應(yīng)該總是使用資源來指定每個(gè)字符串。 字符串資源允許你在一個(gè)位置管理所有的 UI 文本，這使尋找個(gè)更新文本更容易。 外部的字符串， 也可以讓您根據(jù)不同的語言，為每個(gè)字符串資源提供可供選擇的定義來本地化你的應(yīng)用程序。

默認(rèn)情況下，你的 Andr??oid 項(xiàng)目包括一個(gè)字符串資源文件，它在“res/values/strings.xml”。 添加一個(gè)名為“edit_message”的新字符串，將其值設(shè)置為“Enter a message”。 （你可以刪除名為“hello_world”字符串）。

既然你在編輯該文件，順便為即將添加的按鈕“button_send”添加一個(gè)值為“Send”的字符串。

strings.xml的結(jié)果看起來像這樣：

<?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="menu_settings">Settings</string><string name="title_activity_main">MainActivity</string> </resources>

關(guān)于使用字符串資源為其它語言本地化你的應(yīng)用的更多信息，參見教程“支持不同設(shè)備”。

添加按鈕

---

現(xiàn)在，緊接著?<EditText>?元素添加一個(gè)?<Button>到布局中：

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

高度和寬度都設(shè)置為“wrap_content”，所以按鈕會(huì)大到足以顯示其文本內(nèi)容。 此按鈕并不需要的android:id屬性，因?yàn)榛顒?dòng)的代碼中不會(huì)用到它。

使輸入框?qū)挾瘸錆M整個(gè)屏幕

---

如圖2所示，目前布局設(shè)計(jì)成使?EditText?和?Button?兩個(gè)小部件的大小適合其內(nèi)容。

圖2.?EditText?和?Button?小部件寬度設(shè)置為“wrap_content”。

該設(shè)置對按鈕來說，工作得很好，但并不適用于文本字段，因?yàn)橛脩艨赡茌斎敫L的文字。 因此， 使文本字段充滿屏幕寬度的未使用區(qū)域會(huì)比較好。 在?LinearLayout?布局中， 你可以通過指定?android:layout_weight?屬性設(shè)置權(quán)重來實(shí)現(xiàn)。

權(quán)重值是一個(gè)數(shù)字，指定每個(gè)視圖所要占用的剩余空間量，對于兄弟視圖的相對占用量。這有點(diǎn)像調(diào)酒配方： “兩份伏特加酒，一份咖啡利口酒”，即三分之二的飲料是伏特加酒。例如，如果你設(shè)置一個(gè)視圖的權(quán)重是 2、 另一個(gè)權(quán)重為1，總和是3。所以第一個(gè)視圖填充剩余的空間的三分之二，第二個(gè)視圖填充其余空間。 如果添加了第三個(gè)視圖，并設(shè)它的權(quán)重為1，那么現(xiàn)在第一個(gè)視圖（權(quán)重2）得到1/2的剩余空間， 剩下的兩個(gè)各獲得1/4。

所有視圖的默認(rèn)權(quán)重為 0，因此，如果只有一個(gè)視圖的權(quán)重大于 0， 則該視圖填充為各視圖分配必要空間后剩余的所有空間。因此，要使?EditText?元素填充布局的剩余空間，設(shè)它的權(quán)重為1，保持按鈕沒有權(quán)重。

? ? <EditTextandroid:layout_weight="1"... />

為了提高布局效率，指定了權(quán)重時(shí)，你應(yīng)該將?EditText?的寬度設(shè)為零（0dp）。 設(shè)置寬度為零會(huì)提高布局性能，是因?yàn)槭褂谩皐rap_content”作為寬度時(shí)， 需要系統(tǒng)進(jìn)行無意義的計(jì)算，因?yàn)闄?quán)重值需要另外的寬度計(jì)算，來填充剩余空間。

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

圖3顯示了將所有權(quán)重分配給?EditText?元素的結(jié)果。

圖 3.?給予?EditText?小部件所有權(quá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" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="@string/button_send" /> </LinearLayout>

此布局由創(chuàng)建項(xiàng)目時(shí)通過 SDK 工具生成的默認(rèn)?Activity?類加載， 所以你現(xiàn)在可以運(yùn)行應(yīng)用來查看結(jié)果：

• 在Eclipse中，從工具欄中單擊“Run”。
• 或者從命令行，將目錄切換到你的 Andr??oid 項(xiàng)目的根目錄下，然后執(zhí)行： ant debug adb install bin/MyFirstApp-debug.apk

繼續(xù)下一課，你可以學(xué)習(xí)如何響應(yīng)按鈕按下，讀取文本字段的內(nèi)容，啟動(dòng)另一個(gè)活動(dòng)，等等。

轉(zhuǎn)載于:https://www.cnblogs.com/aikongmeng/p/3697411.html

總結(jié)

以上是生活随笔為你收集整理的Android 第三课 构建简单的用户界面的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。