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 會將每個項目放置在一個跨距中，直到達到您指定的跨距計數。達到跨距計數時，系統會換行到下一行。

根據預設，每個項目都會佔用一個時距，但您可以指定擴大到多少跨度，讓項目更寬。舉例來說，最右側畫面的最上方項目 (如下圖所示) 包含三個時距。

提示：Span 可能代表“行”或“列”。使用 GridLayoutManager，您可以使用 spanCount 指出格線的欄數或資料列數，以及某個項目所水平或垂直會佔用的格狀空間大小。

建立 GridLayoutManager 時，您必須分別指定時距和跨度之間的方向。在 (預設) 垂直設定中，「span」和「欄」是相等的。

在這項工作中，您會完成上一次運動所完成的 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. 在設計檢視畫面中，確認 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 會排列資料列與資料欄的格狀項目。假設垂直捲軸，資料列中的每個項目都會佔用「span」項目。
• 你可以自訂項目所需的時距數量，無需自訂版面配置管理工具，就能建立更多有趣的格狀空間。
• 為網格中的某個項目建立項目版面配置，版面配置管理員會負責排列這些項目。
• 您可以在含有 <RecyclerView> 元素的 XML 版面配置檔案中，或以程式輔助方式為 RecyclerView 設定 LayoutManager。

大學課程：

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

Android 開發人員說明文件：

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

這個部分會列出在代碼研究室中，受老師主導的課程作業的可能學生作業。由老師自行決定要執行下列動作：

• 視需要指派家庭作業。
• 告知學生如何提交家庭作業。
• 批改家庭作業。

老師可視需要使用這些建議，並視情況指派其他合適的家庭作業。

如果您是自行操作本程式碼研究室，歡迎透過這些家庭作業來測試自己的知識。

回答這些問題

第 1 題

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

▢ LinearLayouManager

▢ GridLayoutManager

▢ CircularLayoutManager

▢ StaggeredGridLayoutManager

第 2 題

什麼是「span」？

▢ GridLayoutManager 建立的格線大小。

▢ 欄寬在網格中的寬度。

▢ 項目在網格中的尺寸。

▢ 垂直方向的格狀欄數。

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

本程式碼研究室是一系列指南中的指南，可協助您建構睡眠追蹤應用程式，並在「RecyclerView」中顯示睡眠資料。建議您按順序完成所有程式碼研究室，因為它們會逐步完成各項工作。

本系列的程式碼研究室如下：

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