專案：Dogglers 應用程式

1. 事前準備

本程式碼研究室將說明如何自行建構一款名為「Dogglers」的新應用程式。本程式碼研究室將引導您逐步完成 Dogglers 應用程式專案，包括在 Android Studio 中設定和測試專案。

本程式碼研究室與本課程中的其他部分不同。與先前的程式碼研究室不同，本程式碼研究室的目的並不是逐步說明如何建構應用程式，而是設定將由您獨力完成的專案，提供自行完成應用程式及檢查工作成果的相關指示。

我們改為一併在您將下載的應用程式中提供測試套件，而非程式碼解答。您將在 Android Studio 中執行這些測試 (本程式碼研究室稍後會說明操作方法)，並查看程式碼是否通過測試。這可能需要多試幾次，即使是專業開發人員也很難第一次嘗試就通過所有測試！程式碼通過所有測試後，您就能將這項專案視為完成。

我們瞭解，您可能只是想獲得解答來對照檢查。我們特意不提供程式碼解答，是因為希望您能透過練習，體驗專業開發人員的作業環境。您可能會需要用到較不嫻熟的其他技能，例如：

在 Google 上搜尋您在應用程式中不認得的字詞、錯誤訊息和程式碼片段。
測試程式碼、解讀錯誤，然後變更程式碼並重複測試。
回去閱讀先前 Android 基本概念中的內容，溫故知新。
將您知道可順利執行的程式碼 (也就是專案內提供的程式碼，或是您先前在單元 2 中學到的其他應用程式的程式碼解答) 與您編寫的程式碼進行比對。

乍看之下可能很困難，但我們百分之百相信如果您能夠完成單元 2，就已經對這項專案做好準備了。請按照自己的步調進行，不要放棄，我們對您有信心。

必要條件

此專案適用於已完成「Android Kotlin 基本概念」課程單元 2 的使用者。

建構項目

您要運用在單元 2 中學到的技巧，建構一個名為 Doggler 的應用程式，以便在 RecyclerView 中顯示資訊。

軟硬體需求

已安裝 Android Studio 的電腦。

2. 應用程式總覽

歡迎加入專案：Dogglers 應用程式！

在 Google，我們會親切地稱呼同事為「Googler」(Google 員工)。由於許多 Google 員工都有養狗，所以我們覺得為狗狗朋友建構一款名為 Dogglers 的應用程式，應該會很有趣。您的任務是實作 Dogglers，此應用程式會顯示捲動清單來列出 Google 員工的寵物狗，還會提供每隻寵物狗的一些資訊，包括名字、年齡、嗜好和相片。在此專案中，您會在 Dogglers 應用程式中為 RecyclerView 項目建構版面配置，並實作轉接程式，以便透過以下三種方式來呈現寵物狗清單：水平捲動、垂直捲動和垂直捲動格狀版面配置。

啟動應用程式時，您會看到水平、垂直和格狀版面配置三個選項。

第一個選項是垂直捲動回收器檢視畫面，項目會占據畫面的全寬度。

第二個選項是在水平捲動的回收器檢視畫面中，顯示狗狗清單。

第三個選項是在垂直捲動的格狀版面配置中顯示狗狗，每一列顯示兩隻狗。

這些版面配置全都由相同的轉接程式類別提供支援。您的工作是為回收器檢視卡片建構版面配置，然後實作轉接程式，以便為每個項目填入每隻寵物狗的相關資訊。

3. 開始操作

下載專案程式碼

請注意，資料夾名稱是 android-basics-kotlin-dogglers-app。在 Android Studio 中開啟專案時，請選取這個資料夾。

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

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

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

在 Android Studio 中開啟專案

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

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

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

專案會整理成個別的套件。雖然已實作大部分功能，但您需要實作 DogCardAdapter。此外，您還需要修改兩個版面配置檔案。我們會視需要在以下操作說明中討論其他檔案。

實作版面配置

垂直和水平版面配置都相同，因此您只需為這兩種版面配置實作一個版面配置檔案。格狀版面配置會顯示所有相同的資訊，但寵物狗的名字、年齡和嗜好都以垂直方式堆疊，因此在這種情況下，您需要單獨的版面配置。這兩種版面配置都需要四種不同檢視畫面，才能顯示每隻狗狗的相關資訊。

含有狗狗相片的 ImageView
含有狗狗名字的 TextView
含有狗狗年齡的 TextView
含有狗狗嗜好的 TextView

您也會發現每張卡片上都有一些樣式，顯示了邊框和陰影。這項操作由 MaterialCardView 處理，已新增到範例專案的版面配置檔案中。每個 MaterialCardView 中都有 ConstraintLayout，您需要在其中新增其餘的檢視畫面。

您需要兩個 XML 檔案來實作版面配置：使用 vertical_horizontal_list_item.xml 實作水平和垂直版面配置，使用 grid_list_item.xml 實作格狀版面配置。

建構垂直和水平清單的版面配置。

開啟 vertical_horizontal_list_item.xml，然後在內部 ConstraintLayout 中建構與圖片相符的版面配置。

建構格狀版面配置。

開啟 grid_list_item.xml，然後在內部 ConstraintLayout 中建構與圖片相符的版面配置。

實作轉接程式

定義版面配置後，下一步就是實作 RecyclerView 轉接程式。在轉接程式套件中開啟 DogCardAdapter.kt。您會看到許多 TODO 註解，說明您要導入的項目。

實作轉接程式需要 5 個步驟。

定義狗狗資料清單的變數或常數。此清單位於名為 DataSource 物件的 data 套件中，如下所示：

object DataSource {

   val dogs: List<Dog> = listOf( ...

}

dogs 屬性的類型是 List<Dog>。Dog 類別位於 model 套件中，並定義了 4 個屬性：1 張圖片 (由資源 ID 表示) 和 3 個 String 屬性。

data class Dog(
   @DrawableRes val imageResourceId: Int,
   val name: String,
   val age: String,
   val hobbies: String
)

將您在 DogCardAdapter 定義的變數設為 DataSource 物件中的 dogs 清單。

實作 DogCardViewHolder。檢視容器應綁定要為每個回收器檢視卡片設定的 4 個檢視畫面。grid_list_item 和 vertical_horizontal_list_item 版面配置都會共用相同的 View Holder，原因是所有檢視畫面都會在這兩個版面配置之間共用。DogCardViewHolder 應包含下列檢視畫面 ID 的屬性：dog_image、dog_name、dog_age 和 dog_hobbies。
在 onCreateViewHolder() 中，建議您加載 grid_list_item 或 vertical_horizontal_list_item 版面配置。如何得知要使用哪個版面配置呢？在轉接程式的定義中，您會看到在建構轉接程式執行個體時，系統會傳遞一個名為 layout 且類型為 Int 的值。

class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

該值與 const 套件中 Layout 物件定義的值相對應。

object Layout {
   val VERTICAL = 1
   val HORIZONTAL = 2
   val GRID = 3
}

layout 的值會是 1、2 或 3，但您可以根據 Layout 物件中的 ID VERTICAL、HORIZONTAL 和 GRID 來做交互檢查。

如果是 GRID 版面配置，請加載 grid_list_item 版面配置；如果是 HORIZONTAL 和 VERTICAL 版面配置，請加載 vertical_horizontal_list_item 版面配置。此方法應傳回 DogCardViewHolder 執行個體，代表加載後的版面配置。

實作 getItemCount() 即可傳回狗狗清單的長度。
最後，您需要實作 onBindViewHolder()，才能在每個回收器檢視卡片中設定資料。使用 position 存取清單正確的狗狗資料，並設定圖片和狗狗名字。使用字串資源 dog_age 和 dog_hobbies 正確設定年齡和嗜好的格式。