專案:Dogglers 應用程式

1. 事前準備

本程式碼研究室介紹一款名為「Dogglers」的新應用程式,需由您自行建構。本程式碼研究室會帶您逐步瞭解完成 Dogglers 應用程式專案的步驟,包括在 Android Studio 中進行專案設定及測試。

本程式碼研究室與本課程中的其他部分不同。與先前的程式碼研究室不同,本程式碼研究室的目的並不是 逐步說明如何建構應用程式,而是設定一個您能夠獨立完成的專案,並提供指示向您說明如何自行完成應用程式及進行自我檢查。

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

我們瞭解您或許只是想要用於檢查的解決方案而已。我們特意不提供解決方案程式碼,因為我們希望您能透過練習感受身為專業開發人員的感覺。您可能會需要用到較不嫻熟的其他技能,例如:

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

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

必要條件

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

建構項目

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

軟硬體需求

  • 已安裝 Android Studio 的電腦。

2. 應用程式總覽

歡迎加入專案:Dogglers 應用程式!

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

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

9e1186e8d2cff595.png

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

dc2852940d6994e7.png

第二個選項是在水平捲動 Recycler 檢視畫面,水平顯示狗狗清單。

b959082c9491381d.png

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

438b19a77ecfaaba.png

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

3. 開始操作

下載專案程式碼

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

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

1e4c0d2c081a8fd2.png

  1. 在專案的 GitHub 頁面中,按一下「Code」按鈕,畫面上會顯示彈出式視窗。

1debcf330fd04c7b.png

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

在 Android Studio 中開啟專案

  1. 啟動 Android Studio。
  2. 在「Welcome to Android Studio」(歡迎使用 Android Studio) 視窗中,按一下「Open」(開啟)

d8e9dbdeafe9038a.png

注意:如果 Android Studio 已開啟,請依序選取「File」>「Open」選單選項。

8d1fda7396afe8e5.png

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

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

c181caccdddc5c2e.png

導入版面配置

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

  1. 含有狗狗相片的 ImageView
  2. 含有狗狗名字的 TextView
  3. 含有狗狗年齡的 TextView
  4. 含有狗狗嗜好的 TextView

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

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

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

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

6464da5b34a739ed.png

  1. 建構格狀版面配置。

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

dfa4b5f0acda0ec6.png

導入轉接程式

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

1bd9c8014cd1070e.png

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

  1. 定義狗狗資料清單的變數或常數。此清單位於名為 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 清單。

  1. 實作 DogCardViewHolder。View Holder 應綁定要為每個 Recycler 檢視卡片設定的 4 個檢視畫面。grid_list_itemvertical_horizontal_list_item 版面配置都會共用相同的 View Holder,原因是所有檢視畫面都會在這兩個版面配置之間共享。DogCardViewHolder 應包含下列檢視畫面 ID 的屬性:dog_imagedog_namedog_agedog_hobbies
  2. onCreateViewHolder() 中,您想要加載 grid_list_itemvertical_horizontal_list_item 版面配置。如何得知要使用哪個版面配置呢?在轉接程式的定義中,您會看到建構轉接程式執行個體時,系統傳遞一個名為 layout 的類型 Int 的值。
class DogCardAdapter(
   private val context: Context?,
   private val layout: Int
): RecyclerView.Adapter<DogCardAdapter.DogCardViewHolder>() {

該值與 Layout 物件中定義的值相對應,位於「const」套件中。

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

layout 的值會是 1、2 或 3,但您可以根據 Layout 物件中的 ID VERTICALHORIZONTALGRID 對其進行檢查。

如果是 GRID 版面配置,請加載 grid_list_item 版面配置;如果是 HORIZONTALVERTICAL 版面配置,請加載 vertical_horizontal_list_item 版面配置。此方法應傳回 DogCardViewHolder 執行個體,代表加載後的版面配置。

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

實作轉接程式後,請在模擬器上執行應用程式,驗證是否已正確實作所有程式碼。

4. 測試應用程式

Dogglers 專案包含一個「androidTest」目標,有多種測試案例。

5a6691e43e85409d.png

執行測試

如要執行測試,您可以執行下列其中一項操作:

如果是單一測試案例,請開啟測試案例類別,然後按一下類別宣告左側的綠色箭頭。然後,從選單中選取「Run」選項。這麼做將會執行測試案例中的所有測試。

a2be071431d93972.png

您通常只需要執行一項測試,例如只有一個測試失敗,另一個則通過測試。執行單一測試的做法,與執行整個測試案例一樣。使用綠色箭頭並選取「Run」選項。

4dbc8422f9d3551.png

如果您有多個測試案例,也可以執行整個測試套件。就像執行應用程式一樣,您可以在「Run」(執行) 選單中找到這個選項。

be4b7b8805335082.png

請注意,Android Studio 會預設為您所執行的最後一個目標 (應用程式、測試目標等),如果選單仍顯示「Run」>「Run ‘app'」,您可以依序選取「Run」>「Run」以執行測試目標。

6d0de7b74787e91.png

然後從彈出式選單中選擇測試目標。

c0d58fc64ea5c33d.png

測試執行結果會顯示在「Run」分頁中。左側窗格中會顯示失敗測試清單 (如果有的話)。如果測試失敗,函式名稱旁邊會標上紅色驚嘆號;通過的測試會以綠色勾號標示。

5c90c852965bbc3f.png

如果測試失敗,文字輸出會提供相關資訊,協助您修正導致測試失敗的問題。

31167a1fa7383f46.png

例如,在上述錯誤訊息中,測試會檢查是否顯示含有字詞「Nox」的字串。然而,測試失敗。系統找不到該文字,這代表該文字可能尚未顯示。