Android Kotlin 基礎知識 07.3：使用 RecyclerView 搭配 GridLayout

這個程式碼研究室是 Android Kotlin 基礎知識課程的一部分。如果您按部就班完成程式碼研究室，就能充分體驗到本課程的價值。所有課程程式碼研究室都列在 Android Kotlin 基礎知識程式碼研究室到達網頁。

本程式碼研究室是系列課程的一部分，可引導您建構睡眠追蹤應用程式，並在 RecyclerView 中顯示睡眠資料。建議您依序完成所有程式碼研究室，因為這些研究室會逐步介紹各項工作。

本系列程式碼研究室包括：

• 7.1 RecyclerView 基礎知識
• 7.2 使用 RecyclerView 進行 DiffUtil 和資料繫結
• 7.3 使用 RecyclerView 搭配 GridLayout
• 7.4 與 RecyclerView 項目互動
• 7.5 RecyclerView 中的標頭

簡介

RecyclerView 的主要優點之一，就是可讓您使用版面配置管理工具控制及修改版面配置策略。LayoutManager 會管理 RecyclerView 中項目的排列方式。

RecyclerView 隨附立即可用的版面配置管理工具，適用於一般用途。舉例來說，您可以使用 LinearLayout 製作水平和垂直清單，或使用 GridLayout 製作格線。如要處理更複雜的使用案例，您需要導入自訂 LayoutManager。

在本程式碼研究室中，您將以先前程式碼研究室的睡眠追蹤器應用程式為基礎，瞭解如何使用格線版面配置而非清單顯示資料。(如果沒有上一個程式碼研究室的應用程式，可以下載本程式碼研究室的範例程式碼)。

必備知識

您必須已經熟悉下列項目：

• 使用 Activity、Fragments 和 Views 建構基本使用者介面
• 在片段之間導覽，並使用 safeArgs 在片段之間傳遞資料
• 查看模型、模型工廠和轉換
• LiveData 和觀察員
• 如何建立 Room 資料庫、建立 DAO，以及定義實體
• 如何使用協同程式處理資料庫工作和其他長時間執行的工作
• 如何使用 Adapter、ViewHolder 和項目版面配置，實作基本 RecyclerView
• 如何為 RecyclerView 導入資料繫結
• 如何建立及使用繫結轉接器來轉換資料

課程內容

• 如何使用其他 LayoutManager 變更 RecyclerView 中資料的顯示方式
• 如何建立睡眠資料的格線版面配置

學習內容

• 以本系列先前程式碼研究室中的睡眠追蹤器應用程式為基礎。
• 以睡眠資料格線取代應用程式中 RecyclerView 顯示的睡眠資料清單。

睡眠追蹤器應用程式有兩個畫面，分別以片段表示，如下圖所示。

左側顯示的第一個畫面有開始和停止追蹤的按鈕。畫面上會顯示部分使用者的睡眠資料。「清除」按鈕會永久刪除應用程式為使用者收集的所有資料。右側的第二個畫面用於選取睡眠品質評分。

這個應用程式採用簡化架構，包含 UI 控制器、檢視模型和 LiveData，以及用於保存睡眠資料的 Room 資料庫。

睡眠資料會顯示在RecyclerView中。在本程式碼研究室中，您會將應用程式變更為使用 GridLayout。最終畫面會如下方螢幕截圖所示。

在先前的程式碼研究室中，您將 RecyclerView 新增至 fragment_sleep_tracker.xml 時，新增了未經任何自訂的 LinearLayoutManager。這段程式碼會以直向清單顯示資料。

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"

LinearLayoutManager 是 RecyclerView 最常見且最簡單的版面配置管理工具，支援子項檢視區塊的水平和垂直放置。舉例來說，您可以使用 LinearLayoutManager 建立圖片輪播，讓使用者水平捲動。

GridLayout

另一個常見用途是需要向使用者顯示大量資料，這時可以使用 GridLayout。RecyclerView 的 GridLayoutManager 會將資料版面配置為可捲動的格線，如下所示。

從設計的角度來看，GridLayout 最適合用於可透過圖示或圖片表示的清單，例如相片瀏覽應用程式中的清單。在睡眠追蹤器應用程式中，您可以將每晚的睡眠情況顯示為大型圖示的格線。這項設計可讓使用者一目瞭然自己的睡眠品質。

GridLayout 的項目排列方式

GridLayout 會在由列和欄組成的格線中排列項目。假設您預設為垂直捲動，則每一列中的每個項目都會占用一個「跨距」。(在本例中，一個跨距等同於一欄的寬度)。

在以下兩個範例中，每列由三個跨距組成。根據預設，GridLayoutManager 會將每個項目放置在一個跨距中，直到達到您指定的跨距計數。達到跨距計數時，系統會換行到下一行。

根據預設，每個項目會占用一個跨距，但您可以指定項目要占用的跨距數量，讓項目更寬。舉例來說，最右側畫面中的頂端項目 (如下所示) 佔用三個跨度。

提示： 範圍 可以表示「資料列」或「資料欄」。透過 GridLayoutManager，您可以使用 spanCount 指出格線的欄數或列數，以及項目所占的水平/垂直格線空間。

建立 GridLayoutManager 時，您會分別指定方向和跨度數量，而「跨度」與「方向無關」。在 (預設) 垂直設定中，「跨距」和「欄」是同義詞。

在這項工作中，您要使用上一個練習完成的 RecyclerView，並更新該項目以使用 GridLayoutManager 顯示資料。您可以繼續使用先前程式碼研究室的睡眠追蹤器應用程式，也可以從 GitHub 下載 RecyclerViewGridLayout-Starter 應用程式。

步驟 1：變更 LayoutManager

1. 如有需要，請從 GitHub 下載本程式碼研究室的 RecyclerViewGridLayout-Starter 應用程式，並在 Android Studio 中開啟專案。
2. 開啟 fragment_sleep_tracker.xml 版面配置檔案。
3. 從 sleep_list RecyclerView 定義中移除版面配置管理工具。

要刪除的程式碼：

app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager

4. 開啟 SleepTrackerFragment.kt。
5. 在 OnCreateView() 中，於 return 陳述式之前，建立新的垂直 GridLayoutManager (由上到下)，其中包含 3 個範圍。
   
   GridLayoutManager 建構函式最多可接受四個引數：內容 (即 activity)、範圍數量 (預設垂直版面配置中的資料欄)、方向 (預設為垂直)，以及是否為反向版面配置 (預設為 false)。

val manager = GridLayoutManager(activity, 3)

6. 在該行下方，告知 RecyclerView 使用這個 GridLayoutManager。RecyclerView 位於繫結物件中，並稱為 sleepList。(請參閱 fragment_sleep_tracker.xml)。

binding.sleepList.layoutManager = manager

步驟 2：變更版面配置

list_item_sleep_night.xml 中的目前版面配置會顯示每晚的資料，每晚佔用一整列。在這個步驟中，您要為格線定義更精簡的方形項目版面配置。

提示：如不想失去目前的版面配置，請先複製檔案並命名為 list_item_sleep_night_linear.xml，或註解掉程式碼，而不是移除程式碼。

1. 開啟 list_item_sleep_night.xml。
2. 刪除 sleep_length TextView，因為新設計不需要這個項目。
3. 移動 quality_string TextView，使其顯示在 ImageView 下方。為此，你必須更新許多項目。以下是「quality_string」TextView的最終版面配置：

<TextView
   android:id="@+id/quality_string"
   android:layout_width="0dp"
   android:layout_height="20dp"
   android:textAlignment="center"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="@+id/quality_image"
   app:layout_constraintHorizontal_bias="0.0"
   app:layout_constraintStart_toStartOf="@+id/quality_image"
   app:layout_constraintTop_toBottomOf="@+id/quality_image"
   tools:text="Excellent!!!"
   app:sleepQualityString="@{sleep}" />

4. 在「Design」檢視畫面中，確認 quality_string TextView 位於 ImageView 下方。

由於您使用了資料繫結，因此不需要在 Adapter 中變更任何內容。程式碼應可正常運作，清單也會以格線顯示。

5. 執行應用程式，並觀察睡眠資料在格線中的顯示方式。
   
   請注意，ConstraintLayout 仍會佔用整個寬度。GridLayoutManager 會根據檢視區塊的跨度，為檢視區塊設定固定寬度。在配置格線、加入空白或裁剪項目時，GridLayoutManager 會盡量滿足所有限制。

6. 在 SleepTrackerFragment 中，在建立 GridLayoutManager 的程式碼中，將 GridLayoutManger 的時距數變更為 1。執行應用程式，您會看到清單。
   

val manager = GridLayoutManager(activity, 1)

7. 將 GridLayoutManager 的跨度數變更為 10，然後執行應用程式。請注意，GridLayoutManager 會在一列中容納 10 個項目，但項目現在會遭到裁剪。
8. 將跨距計數變更為 5，方向變更為 GridLayoutManager.VERTICAL。執行應用程式，並注意如何水平捲動。如要讓這個畫面看起來美觀，需要使用不同的版面配置。

val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)

9. 別忘了將跨距計數設回 3，並將方向設為垂直！

Android Studio 專案：RecyclerViewGridLayout

• 版面配置管理員會管理 RecyclerView 中項目的排列方式。
• RecyclerView 隨附現成的版面配置管理工具，適用於常見用途，例如水平和垂直清單的 LinearLayout，以及格線的 GridLayout。
• 如要處理更複雜的使用案例，請實作自訂 LayoutManager。
• 從設計的角度來看，GridLayout 最適合用於可透過圖示或圖片表示的項目清單。
• GridLayout 會在由列和欄組成的格線中排列項目。假設您預設為垂直捲動，則每一列中的每個項目都會占用一個「跨距」。
• 您可以自訂項目佔用的跨度數量，建立更有趣的格線，不必使用自訂版面配置管理工具。
• 為格線中的一個項目建立項目版面配置，版面配置管理工具會負責排列項目。
• 您可以在包含 <RecyclerView> 元素的 XML 版面配置檔案中，或以程式輔助方式設定 RecyclerView 的 LayoutManager。

Udacity 課程：

• 使用 Kotlin 開發 Android 應用程式
• 程式設計人員的 Kotlin 新手上路課程

Android 開發人員說明文件：

• 使用 RecyclerView 建立清單
• RecyclerView
• LayoutManager
• GridLayoutManager

本節列出的作業可由課程講師指派給學習本程式碼研究室的學員。講師可自由採取以下行動：

• 視需要指派作業。
• 告知學員如何繳交作業。
• 為作業評分。

講師可以視需求使用全部或部分建議內容，也可以自由指派任何其他合適的作業。

如果您是自行學習本程式碼研究室，不妨利用這些作業驗收學習成果。

回答問題

第 1 題

下列何者是 Android 提供的版面配置管理工具？請選取所有適用選項。

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

第 2 題

什麼是「範圍」？

▢ 由 GridLayoutManager 建立的格狀檢視畫面大小。

▢ 格狀檢視畫面中資料欄的寬度。

▢ 格線檢視中項目的尺寸。

▢ 垂直方向格狀檢視畫面中的資料欄數量。

開始下一個課程：7.4：與 RecyclerView 項目互動

本程式碼研究室是系列課程的一部分，可引導您建構睡眠追蹤應用程式，並在 RecyclerView 中顯示睡眠資料。建議您依序完成所有程式碼研究室，因為這些研究室會逐步介紹各項工作。

本系列程式碼研究室包括：

• 7.1 RecyclerView 基礎知識
• 7.2 使用 RecyclerView 進行 DiffUtil 和資料繫結
• 7.3 使用 RecyclerView 搭配 GridLayout
• 7.4 與 RecyclerView 項目互動
• 7.5 RecyclerView 中的標頭