iT邦幫忙

DAY 4
2

以「寶寶聯絡簿」為例,適合 Android 初學者的學習筆記系列 第 4

寶寶生活記錄 App (Day4 使用者界面實作範例-1)

今天我們就要來詳細討論 activity_calendar.xml (實際檔名會根據建立新專案時所輸入的 Layout Name 決定) 的內容。

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5     android:paddingLeft="@dimen/activity_horizontal_margin"
6     android:paddingRight="@dimen/activity_horizontal_margin"
7     android:paddingTop="@dimen/activity_vertical_margin"
8     android:paddingBottom="@dimen/activity_vertical_margin"
9     tools:context=".CalendarActivity">
10 
11    <TextView
12        android:text="@string/hello_world"
13        android:layout_width="wrap_content"
14        android:layout_height="wrap_content" />
15
16 </RelativeLayout>

在這份 XML 文件中,我們看到兩個標籤:RelativeLayout 和 TextView,這兩個標籤所代表的意義會在稍後做說明,我們可先注意到,這份文件的確是一個樹狀架構,RelativeLayout 為根標籤,TextView 則是 RelativeLayout 的子標籤,根據昨天的說明,根標籤應該會有一個屬性為 xmlns:android=“http://schemas.android.com/apk/res/android",我們也確實地在第 1 行看到這個屬性。此外,我們可以在第 16 行發現 RelativeLayout 的尾標籤:</RelativeLayout>,TextView 由於沒有子標籤,我們可以使用「/>」來表示其尾標籤,這印證了昨天所說的:XML 文件必須具備良好格式。

現在我們可以開始討論 RelativeLayout 和 TextView 的意義了,首先來說明 TextView,Android 提供了許多的介面元件 (View),常用的基礎介面元件有:TextView (用來顯示一段文字)、ImageView (用來顯示一張圖片)、Button (按鈕)等,在上面的範例中我們看到一個用來顯示文字的 TextView,如果各位還記得這個新專案的執行結果是顯示一段文字:Hello World!,就很容易地瞭解,原來那段文字就是使用 TextView 呈現出來的。

接下來我們來討論 TextView 的屬性,首先來看第 13 和 14 行,這兩行分別是設定 TextView 的寬與高,屬性值 wrap_content 代表會根據內容 (以 TextView 來說是字型大小和字數) 決定,讀者可能會有一個疑問:我們如何知道 TextView 有哪些屬性以及一個屬性可以有哪些屬性值呢?一個方法是回到 Android Developer 網站查詢 (我們可以在 Develop -> Reference 下找到 TextView 這個 Class 的說明:http://developer.android.com/reference/android/widget/TextView.html),另一個小技巧則是透過 Android Studio 的「自動完成」功能,讀者可以嘗試先把第 13 行刪除,接著於原處輸入「android:」可看到一個提示視窗顯示出來,如下圖所示:

提示視窗所顯示的就是這個 TextView 可使用的屬性 (要注意的是,有些屬性是因為 TextView 的父標籤為 RelativeLayout 才會出現在提示視窗),選擇了 android:layout_width 按下 Enter 後,會出現另一個提示視窗,如下圖所示:

這個提示視窗顯示的是可使用的屬性值,除了 wrap_content,還有 match_parent 可選擇。

接著我們來看第 12 行 android:text 這個屬性,不難理解屬性值就是要呈現的文字,事實上我們可以直接將欲呈現的文字直接設成屬性值,但這並不是很好的做法,有另外一種做法是:將字串視為「資源」,然後屬性值是「參考」到一個字串資源,怎麼做呢?首先請開啟 Babylog/app/src/main/res/values 資料夾內的 strings.xml,如下所示:

1  <?xml version="1.0" encoding="utf-8"?>
2  <resources>
3
4      <string name="app_name">Babylog</string>
5      <string name="hello_world">Hello world!</string>
6      <string name="action_settings">Settings</string>
7
8  </resources>

第 4 ~ 6 行定義了 3 個字串資源,string 標籤裏面的 name 屬性,代表資源的名稱,string 標籤和其尾標籤所包起來的則是字串的內容,為了讓讀者更了解其原理,我們可以打開 Babylog/app/build/generated/source/r/debug/lincyu/babylog/R.java,會發現 R 這個 Java 類別,裏面有個 string 子類別,string 子類別中有個名為 hello_world 的整數變數,因此 activity_calendar.xml 第 12 行的 @string/hello_world 代表要「參考」名為 hello_world 的字串資源,同時我們也應該瞭解到一件事:在 strings.xml 裡 string 標籤內 name 屬性的屬性值,其命名應該符合 Java 對於變數的命名規則,例如 1abc 是不合法的。

為了讓讀者對於介面元件 (View) 和資源的概念更清楚,筆者再示範一個 ImageView,首先筆者準備了一個檔名為 lincyu.jpg 的圖檔,並將這個圖檔複製到 Babylog/app/src/main/res/drawable-hdpi (讀者還會看到其它如 mdpi, xhdmp 的資料夾,這點會於明天再做說明),複製完成後,可於 R.java 發現:drawable 子類別內有一個名為 lincyu 的變數,接著修改 /layout 下的 XML 文件,內容如下:

1  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2      xmlns:tools="http://schemas.android.com/tools"
3      android:layout_width="match_parent"
4      android:layout_height="match_parent"
5      android:paddingLeft="@dimen/activity_horizontal_margin"
6      android:paddingRight="@dimen/activity_horizontal_margin"
7      android:paddingTop="@dimen/activity_vertical_margin"
8      android:paddingBottom="@dimen/activity_vertical_margin"
9      tools:context=".CalendarActivity">
10
11     <ImageView
12         android:src="@drawable/lincyu"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content" />
15
16 </RelativeLayout>

第 12 行的 android:src 屬性代表圖檔的來源,屬性值 @drawale/lincyu ,相信不用多說,讀者也都能瞭解其意義了,程式執行結果如下圖所示:


上一篇
寶寶生活記錄 App (Day3 使用者界面規劃與 XML 簡介)
下一篇
寶寶生活記錄 App (Day5 多國語言與多螢幕解析度支援)
系列文
以「寶寶聯絡簿」為例,適合 Android 初學者的學習筆記30

尚未有邦友留言

立即登入留言