建立 Birthday Card 應用程式

1. 簡介

注意：本程式碼研究室內容已過時，不再進行維護。如要瞭解最新的建議做法，請參考「Android 基本概念：使用 Compose」課程。

在本程式碼研究室中，您要建構一個顯示文字的簡單 Android 應用程式。進一步瞭解 Android 使用者介面 (UI) 元件，可幫助您在螢幕上正確放置文字。

必要條件

• 如何在 Android Studio 中建立新的應用程式。
• 如何在模擬器或 Android 裝置上執行應用程式。

學習目標

• 什麼是使用者介面元素，例如 Views 和 ViewGroups。
• 如何在應用程式的 TextView 中顯示文字。
• 如何在 TextView 上設定文字、字型和邊界等屬性。

建構目標

• 一個以文字格式顯示生日祝福語的 Android 應用程式。

完成後，應用程式會如下所示。

需求條件

• 已安裝 Android Studio 的電腦。

2. 設定 Happy Birthday 應用程式

建立空白活動專案

1. 首先，在 Android Studio 中使用「Empty Activity」範本來建立新的 Kotlin 專案。
2. 呼叫應用程式「Happy Birthday」，最小 API 級別為 19 (KitKat)。

重要事項：如果不熟悉如何在 Android Studio 中建立新的專案，請參閱「建立並執行你的第一個 Android 應用程式」一文瞭解詳細資訊。

3. 執行您的應用程式。應用程式應如以下螢幕截圖所示。

當您使用「Empty Activity」(空白活動) 範本建立這個 Happy Birthday 應用程式時，Android Studio 會設定基本 Android 應用程式所需的資源，包括在螢幕中央顯示「Hello World！」訊息。在本程式碼研究室中，您會瞭解如何放置該訊息、如何修改文字使其更像生日祝福語，以及如何新增其他訊息並設定格式。

關於使用者介面

應用程式的使用者介面 (UI)，是指畫面上顯示的文字、圖片、按鈕及其他多種元素。它不僅是應用程式向使用者顯示內容的方式，也是使用者與應用程式互動的方式。

這些元素每個都是所謂的 View。您在應用程式畫面上看到的內容幾乎都是 View。Views 可以是互動元素，例如可點擊的按鈕或可編輯的輸入欄位。

在本程式碼研究室中，您將使用一種用於顯示文字的 View，也就是 TextView。

Android 應用程式中的 Views 並非單獨懸浮在螢幕上，各個 Views 之間都有關連。舉例來說，圖片可能位於某些文字旁邊，或數個按鈕排成一列。如要整理 Views，您可以將它們放置在容器內。ViewGroup 是可在其中放入 View 物件的容器，負責排列內部的 Views。排列方式 (又稱為「版面配置」) 可根據執行應用程式的 Android 裝置螢幕尺寸及長寬比進行調整，並且能根據裝置的螢幕方向 (直向或橫向模式) 調整版面配置模式。

ConstraintLayout 是其中一種 ViewGroup，可協助您靈活地排列內部的 Views。

關於版面配置編輯器

透過排列 Views 和 ViewGroups 來建立使用者介面是建立 Android 應用程式的重要環節。Android Studio 提供一個稱為版面配置編輯器的工具，幫助您完成這項操作。您要使用版面配置編輯器將「Hello World!」變更為「生日快樂！」，之後再設定文字的樣式。

開啟版面配置編輯器後，畫面上會分為多個部分。在本程式碼研究室中，您會學習如何使用大部分功能。下方含有註解的螢幕截圖能幫助您識別版面配置編輯器中的各個視窗。在您變更應用程式時，將會深入瞭解各個部分。

• 左側標記 (1) 的地方是您先前看過的「Project」視窗，其中列出專案組成的所有檔案。
• 畫面中央會顯示 (4) 和 (5) 兩個繪圖，分別代表應用程式的螢幕版面配置。左側標記 (4) 的視窗顯示應用程式執行時呈現的近似效果，也就是所謂的「Design」(設計) 檢視畫面。
• 右側標記 (5) 的視窗代表「Blueprint」(藍圖) 檢視畫面，在執行特定操作時會很有用。
• 標記 (2) 的「Palette」(區塊面板) 視窗列出可新增到應用程式的各類 Views。
• 標記 (3) 的「Component Tree」(元件樹狀結構) 是另一種螢幕檢視畫面方式，列出螢幕的所有檢視畫面。
• 最右側標記 (6) 的是「屬性」視窗，顯示了 View 的各種屬性，您可在這裡加以變更。

如要進一步瞭解版面配置編輯器，以及如何加以設定，請參閱開發人員參考指南。

整個版面配置編輯器的螢幕截圖 (含註解) 如下：

讓我們在版面配置編輯器做一些變更，使應用程式看起來更像生日卡！

變更 Hello World 訊息

1. 在 Android Studio 中，查看左側的「Project」視窗。
2. 留意這些資料夾和檔案：「app」資料夾含有您要變更的大部分應用程式檔案。「res」資料夾適用於各種資源，例如圖片或螢幕版面配置。「layout」資料夾適用於螢幕版面配置。activity_main.xml 檔案含有螢幕版面配置的說明。
3. 請依序展開「app」資料夾、「res」資料夾和「layout」資料夾。
4. 按兩下 activity_main.xml。系統隨即會在版面配置編輯器中開啟 activity_main.xml，並在「Design」(設計) 檢視畫面中顯示其版面配置的說明。

注意：在這些程式碼研究室中，您常要像上述步驟一樣開啟檔案。簡而言之，這些步驟可以歸納為：開啟 activity_main.xml (res > layout > activity_main.xml)，不必分別列出每一個步驟。

5. 查看「Component Tree」中的檢視畫面清單。請注意，列表有一個 ConstraintLayout，它底下有一個 TextView。這些代表應用程式的使用者介面。由於 TextView 位於 ConstraintLayout 內，因此已縮排。您在 ConstraintLayout 新增更多 Views，它們都會加到這份清單中。
6. 注意 TextView 旁邊顯示了「Hello World!」，也就是您在執行應用程式時看到的文字。

7. 在「Component Tree」中，按一下 TextView。
8. 找到右側的「Attributes」(屬性)。
9. 找到「Declared Attributes」(宣告屬性) 部分。
10. 請注意，「Declared Attributes」(宣告屬性) 部分中的「text」(文字) 屬性包含 Hello World!。

「text」(文字) 屬性會顯示在 TextView 輸出的文字。

11. 按一下「Hello World!」文字所在的「text」(文字) 屬性。
12. 將其變更為「生日快樂！」，然後按下 Enter 鍵。如果您看到關於硬式編碼字串的警示，暫時不用擔心，我們會在下一個程式碼研究室中學習如何解決警示中的問題。
13. 請注意，「Design View」(設計檢視畫面) 中的文字已變更… (您可以立即看到所做的變更，很酷吧！)
14. 執行應用程式，現在應會顯示「生日快樂！」

做得好！您第一次對 Android 應用程式做出了變更。

3. 在版面配置中新增 TextView

您正在建構的生日卡看起來與應用程式的不太一樣。您需要的不是位置中央的小字體文字，而是要將兩則字體較大的訊息置於左上角和右下角。在這項工作中，您要刪除現有的 TextView，然後新增兩個新的 TextViews，並瞭解如何在 ConstraintLayout 內放置這些檢視畫面。

刪除目前的 TextView

1. 在版面配置編輯器中，按一下以選取位於版面配置中央的 TextView。

2. 按下 Delete 鍵。Android Studio 會刪除 TextView，而您的應用程式在版面配置編輯器和「Component Tree」(元件樹狀結構) 中只會顯示 ConstraintLayout。

提示：如要放大版面配置，請使用版面配置編輯器右下角的控制選項來調整大小。按一下最下方的圖示，即可恢復為整個版面配置占滿螢幕的縮放設定。

新增 TextView

在這個步驟中，您要在應用程式左上方新增 TextView，用來放置生日祝福語。

版面配置編輯器左上方的「區塊面板」包含各類 Views 的清單 (依類別整理)，您可以將這些元件新增到應用程式中。

1. 找出 TextView。您可以在「Common」類別和「Text」類別中找到它。

2. 將 TextView 從「Palette」(區塊面板) 拖曳到版面配置編輯器設計平面的左上方。拖曳時不必完全精確，只要放置在左上角附近即可。

3. 您會看到新增了一個 TextView，並注意到「Component Tree」中有紅色驚嘆號。
4. 將滑鼠游標移到驚嘆號上，您就會看到一則警示訊息，說明該檢視畫面未受到限制，且會在執行應用程式時跳到其他位置。接下來，您要修正這個問題。

放置 TextView

如要製作生日卡，TextView 必須放置在在左上角附近，且周圍要留有一些空間。如要修正這則警示，您要在 TextView 中新增一些限制，以告知應用程式如何放置該檢視畫面。限制可用來指定在版面配置中放置 View 的方向和限制。

在頂端和左側新增的限制會有邊界，邊界可指定 View 與容器邊緣之間的距離。

1. 在右側的「Attributes」(屬性) 中，找到「Layout」(版面配置) 部分中的「Constraint Widget」(限制小工具)。正方形代表您的檢視畫面。

2. 按一下正方形頂端的 +，可在文字檢視畫面頂端與限制版面配置上方邊緣之間新增限制。
3. 系統會顯示用來設定上邊界的數字欄位。該邊界是指從 TextView 到容器 (即 ConstraintLayout) 邊緣的距離。顯示的數字會因您放置 TextView 的位置而不同。設定上邊界時，Android Studio 也會自動在文字檢視畫面頂端和 ConstraintLayout 的頂端之間新增限制。

4. 將上邊界變更為 16。

注意：使用者介面中的邊界和其他距離的單位為密度獨立像素 (dp)。它與公分或英寸類似，但代表的是畫面上的距離。Android 會將這個值轉換成每部裝置的相應的實際像素數。通常，1dp 大約是 1 英寸的 1/160，但在某些裝置上可能會更大或更小。

5. 對左邊界設定相同數值。

6. 在「text」(文字) 中設定您對朋友的生日祝福語，例如「生日快樂！」，再按下 Enter 鍵。

7. 請注意，「Design」(設計) 檢視畫面會更新並顯示應用程式的外觀。

新增及放置另一個 TextView

生日資訊卡在右下角附近也需要有第二行文字，您會在這一步中按照前一項工作的方式新增這行文字。您覺得這個 TextView 的邊界應該是多少呢？

1. 從「區塊面板」將新的 TextView 拖曳到「版面配置編輯器」中的應用程式檢視畫面附近。

2. 將右邊界設為 16。
3. 將下邊界設為 16。

4. 在「Attributes」中，將「text」屬性設為您的賀卡簽名，例如「From Emma」。
5. 執行應用程式。您的生日祝福語應會顯示在左上角，而右下角則是您的簽名。

恭喜！您已在應用程式中新增並放置多個 UI 元素。

4. 新增文字樣式

您已將文字新增到使用者介面，但它看起來似乎和最終應用程式不太一樣。在這項工作中，您會學習如何變更大小、文字顏色以及影響 TextView 外觀的其他屬性。您還可以嘗試使用不同字型。

1. 按一下「Component Tree」(元件樹狀結構) 中的第一個 TextView，然後找出「Attributes」(屬性) 視窗中的「Common Attributes」(一般屬性) 部分。您可能需要向下捲動才能找到這部分。
2. 請留意各種屬性，包括「fontFamily」、「textSize」和「textColor」。

3. 找到「textAppearance」。
4. 如果「textAppearance」未展開，請按一下向下三角形。
5. 在「textSize」中，將「textSize」設為「36sp」。

注意：就像 dp 是畫面中的距離單位一樣，sp 是字型大小的度量單位。Android 應用程式中的 UI 元素會採用兩種不同的度量單位：一種是您先前用於版面配置的「密度獨立像素」(dp)，另一種是用於設定文字大小的「可縮放像素」(sp)。根據預設，sp 與 dp 大小相同，但前者的大小會根據使用者偏好的文字大小來調整。

6. 留意版面配置編輯器出現的變化。

7. 將「fontFamily」變更為「casual」。
8. 嘗試使用不同字型，看看它們的效果。「More Fonts…」(更多字型…)清單底部還有其他字型選項
9. 嘗試使用不同字型後，請將「fontFamily」設為「sans-serif-light」。
10. 按一下「textColor」屬性的編輯方塊，然後開始輸入「black」。請注意，在您輸入時，Android Studio 會顯示包含目前為止輸入文字的顏色清單。

11. 從顏色清單中選取「@android:color/black」，然後按下 Enter 鍵。
12. 在包含簽名的 TextView 中，將「textSize」、「textColor」和「fontFamily」變更為相符的值。
13. 執行應用程式並查看結果。

恭喜，您已完成建立生日卡應用程式的前幾個步驟！

5. 解決方法

解決方法程式碼網址：https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution

1. 前往為專案提供的 GitHub 存放區頁面。
2. 驗證分支版本名稱與程式碼研究室中指定的分支版本名稱相符。例如，在下列螢幕截圖中，分支版本名稱為「main」。

3. 在專案的 GitHub 頁面中，按一下「Code」按鈕，畫面上會出現彈出式視窗。

4. 在彈出式視窗中，按一下「Download ZIP」按鈕，將專案儲存至電腦。等待下載作業完成。
5. 在電腦中找到該檔案 (可能位於「下載」資料夾中)。
6. 按兩下解壓縮 ZIP 檔案。這項操作會建立含有專案檔案的新資料夾。

在 Android Studio 中開啟專案

1. 啟動 Android Studio。
2. 在「Welcome to Android Studio」視窗中，按一下「Open」。

注意：如果 Android Studio 已開啟，請改為依序選取「File」>「Open」選單選項。

3. 在檔案瀏覽器中，前往已解壓縮的專案資料夾所在的位置 (可能位於「Downloads」資料夾中)。
4. 按兩下該專案資料夾。
5. 等待 Android Studio 開啟專案。
6. 按一下「Run」按鈕 ，即可建構並執行應用程式。請確認應用程式的建構作業符合預期。

提醒：如果您在 Android Studio 中看到 「Android framework is detected. Click to configure」(偵測到 Android 架構，按一下即可進行設定) 的錯誤訊息，說明系統未能偵測到該專案，或是執行按鈕已停用。請確認您在 Android Studio 中開啟的子目錄是「HappyBirthday」)，而不是父項目錄。

6. 總結

• 版面配置編輯器可幫助您建立 Android 應用程式的使用者介面。
• 您在應用程式畫面上看到的所有內容幾乎都是 View。
• TextView 是在應用程式中顯示文字的 UI 元素。
• ConstraintLayout 是其他 UI 元素的容器。
• 在 ConstraintLayout 中，必須為 Views 設定水平和垂直的限制。
• 邊界是放置 View 的其中一種方式。
• 邊界是指 View 離它所處容器邊緣有多遠。
• 您可以在 TextView 上設定字型、文字大小和顏色等屬性。

7. 瞭解詳情

• Android Kotlin 基本概念的相關詞彙
• View
• TextView
• ConstraintLayout
• dp 與 sp
• Android Studio 中的版面配置編輯器