XML Technology Research Lab: Hello World 進階了 -- 版面設計

Hello World 進階了 -- 版面設計

This document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

最近經常聽到的一句廣告台詞就是"人生進階了，XX也進階了"；既然"進階"是一股風潮，之前說明的 Hello World 也要跟上腳步進階。這一次我們讓它變成一個互動式版的 Hello World。這個互動式版的 Hello World 功能如下：當執行程式，如下左邊的畫面會出現；若使用者在文字欄位內如畫面所示的輸入"eric"，並按下"確定"按鈕之後，程式的執行結果將如以下右邊的畫面出現"Hello eric"的對話視窗。

〔圖 1〕

要寫出這麼簡單的程式必須了解三個主要的概念：使用 Eclipse +ADT 所提供的版面設計功能以及其對應的 XML 檔，新的 GUI 元件（如文字欄位等），以及 Android 的事件處理機制（如使用者按了按鈕之後，程式要如何處理）。在這份文件中，我們先說明版面的設計：

在 Android 的環境下，設計版面的方式有兩種；一種是直接把版面的設計寫死在程式碼中，例如之前文字加上時鐘的範例，因為這種方式的使用彈性較另一個方法低，一般不建議這個設計方式；另一種就是利用 XML 檔來設計版面，這個檔案也就是 res/layout/main.xml。為了說明這個檔案的格式以及整個程式的開發，讓我們執行 Eclispe 並產生一個名為 HelloName 的專案（記得先將之前的專案"全部關閉"；即 File --> Close All），然後在 Eclipse 畫面的左邊開啟 res/layout/main.xml 檔案，其畫面如下所示。

〔圖 2〕

從上圖右側的紅色框框中，我們可以看出這個畫面的排版方式是 LinearLayout，而該 layout 中包含一個 TextView 的物件，也就是字串內容為 "Hello World, HelloName Activity!" 的元件。另外，請留意畫面中間黑色的區塊，該區塊即代表螢幕（或者是 Activity 物件）的現況；在畫面中下方的紅色框框內顯示，螢幕排版的表達方式有兩種，一種以 Graphical Layout（就是 WYSIWYG），另一種就是 XML 檔的格式，也就是 main.xml；該畫面現在的 main.xml 內容如下圖所示：

（再次強調，我們假設你懂 XML 語言）在這個 XML 的檔案中，清楚的顯示：在第 2 行說明整個畫面是以 LinearLayout 所描述，而且就像之前說明的，LinearLayout 的預設排版方式是 vertical 的，這也可以從第 5 行看得出來；在整個 LinearLayout 中包含一個 TextView 的元素（如第 7 行所述）。其他的細節，我們在之後的說明中逐步補上。
練習題：
1. 請在圖 2 右邊紅色框框的 LinearLayout 上以滑鼠右鍵點擊，並仔細觀察它有多少選項可以選擇。目前先不要進行修改，等到慢慢熟悉環境了以後再說。
2. 看得懂 XML 的人，在未來的說明中，也可以嘗試觀察修改前、後 XML 檔案內容的變化。
由於我們的目標在於產生如圖 1 左邊所示的畫面，所以再來需要在畫面上新增一個文字欄位。請將如下畫面左邊的紅色框框（即一般的文字欄位）拖曳至代表螢幕的黑色區塊，其結果如畫面所示。

最後還需要新增一個按鈕，請將如下畫面左邊的紅色框框（即一般的按鈕）拖曳至代表螢幕的黑色區塊，其結果如畫面所示。

請注意畫面右邊的框框，這時可以明顯看出 LinearLayout 內，除了 TextView 之外，現在也包含了剛剛拉到螢幕中的名為 editText1 的文字欄位，以及名為 button1 的按鈕。由於這些名稱將會與程式碼互相對應，建議稍微留意一下，並猜猜 Eclipse 的命名規則。

畫面上的 GUI 元件都放好了，可是每個都不符合我們的需要；例如，TextView 的部分，我們希望顯示的是"請輸入你的姓名"，因此我們可以在螢幕上的文字標籤上或者上圖右邊紅色框框內的 TextView 上按右鍵，其結果如以下畫面所示：

然後選擇"Edit Text"，當以下畫面出現時，請選擇 "hello" 然後按 OK 按鈕。

有讀者開始好奇為什麼選 "hello" 嗎？有好奇心是好現象，讓我們看一下 XML 檔案的內容（如下圖所示）：

如畫面中紅色框框所示，TexView 元件（即文字標籤）的內容是由 android:text 所定義的，而其內容卻是由 Android 的字串資源（由 @string 代表）中一個名為 hello 的變數所代表。Android 把字串資源定義在什麼地方呢？答案是 res/values/strings.xml 內，要一探究竟，請開啟該檔案，開啟後的畫面如下：請點選 "hello (String)"，然後在右邊的 "Value*" 欄位內將字串從 "Hello World, HelloNameActivity!" 改成 "請輸入你的姓名"。（重要的經驗談：每一次對資源檔〔例如，main.xml、strings.xml 等〕進行修改之後，請務必儲存所有檔案，這樣子所有檔案才會一致，程式的執行才可以避免一些奇怪的狀況）

你除了可以在畫面下方紅色框框內的 strings.xml 點一下來查看該檔案的內容，我們更建議在畫面上方紅色框框內的 main.xml 點一下來看一下修改的結果。修改後的結果如以下畫面所示：
從畫面中可以看出，螢幕的字串確實改變了，可是這個跟圖 1 的效果也差太多了，第一個差別是字體太小需要改大，另一個差別是字體顏色需要改變。首先請在文字標籤上按右鍵然後在選項中選擇 "Edit TextSize"，然後在欄位內輸入 "32sp"：

畫面中的 32 代表字體大小，但是在目前的開發環境，除了大小之外，還必須設定大小的單位，字型大小的單位包含 px (pixels), dp (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), 以及 mm (millimeters)。嚴格來說，這些設定有些討厭；可是想想，目前 Android 應用的手機或者平板，從 3 吋到 10 吋都有，如何設定適當的排版和大小是一個非常大的挑戰。
再來就是改變字體的顏色了。由於 Android 的設計方式，它把顏色也當成一種資源，因此改變字體的顏色基本上要做兩件事情：第一就是確定需要的顏色資源存在；如果不存在，那麼我們就需要新增一個顏色資源，而每一個顏色資源就跟字串資源一樣，有一個變數名稱。第二就是把顏色資源和文字標籤做結合。首先我們需要產生一個顏色資源，產生的方式是開啟 strings.xml，點選 "Add" 按鈕，然後在以下畫面中，選擇 "Color" 並按 "OK"。

在以下畫面出現時，請在 "Name*" 內輸入 myColor（或者你喜愛的變數名稱），以及在 "Value*" 內輸入 "#FFCC99"（或者你喜愛的任意 RGB 的組合）：

有了 myColor 的顏色資源後，我們在文字標籤上按右鍵並選取 "Edit TextColor"，其畫面如下：

請如畫面所示選擇 "myColor"並按 "OK" 即完成了文字標籤的顏色設定。為了節省篇幅，請自行查看修改結果。
從模擬的螢幕中可以看出，其實我們只剩下按鈕的設定了。按鈕的設定包含按鈕的標籤以及按鈕的其他微調。按鈕標籤的設定，基本上就是先產生一個字串資源，該資源名稱假設是 "button"，而其值是 "確定"，然後把該資源與按鈕結合。由於這個過程跟之前的類似，請自行製作。至於其他的微調，包含字體大小，請依照以下畫面所示設定，字體大小我們設定為 30px：

另外，請利用畫面中的 "Layout Width" 和 "Layout Height"（代表按鈕的寬與長；預設是 "Wrap Content"，也就是能包住內容即可）中的 "Other" 選項，分別設定為 "140px" 和 "80px"。若你想將按鈕置中，請在選項中選擇 "Other Properties" --> "Layout Parameters" --> "Layout Gravity" --> "Center"，即可達成。