Android Kotlin基礎講座 07.3:RecyclerViewによるグリッドレイアウト

タスク：GridLayoutを実装する

このタスクでは、前回作成済みのRecyclerViewを使い、GridLayoutManagerを使ってデータを表示できるように更新します。前回の記事からTrackMySleepQualityアプリを引き続き使うこともできますし、GitHubのRecyclerViewGridLayout-Starter appからダウンロードすることもできます。

ステップ1：LayoutManagerを変更する

1. 必要な方はこの記事用のRecyclerViewGridLayout-StarterアプリをGitHubからダウンロードし、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コンストラクタは最大4つの引数を取ります。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内のレイアウトは一夜ごとに行全体を使ってデータを表示しています。このステップでは、グリッド用によりコンパクトな四角いアイテムレイアウトを定義します。

Tip: 現在のレイアウトを失いたくない場合は、最初にファイルをコピーしておき、list_item_sleep_night_linear.xmlと名付けておくか、コードを削除する代わりにコメントアウトしておいてください。

1. list_item_sleep_night.xmlを開いてください。
   
2. sleep_lengthのTextViewを削除してください。新しいデザインではこれは必要でありません。
   
3. qaulity_stringのTextViewを移動してImageViewの下に表示できるようにします。
   そうするためにはまず、いくつか更新する部分があります。以下がquality_stringテキストビューとquality_imageイメージビューの最終的なレイアウトです。

<ImageView
   android:id="@+id/quality_image"
   android:layout_width="@dimen/icon_size"
   android:layout_height="60dp"
   android:layout_marginTop="8dp"
   android:layout_marginBottom="8dp"
   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   tools:srcCompat="@drawable/ic_sleep_5"
   app:sleepImage="@{sleep}"/>

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

4. デザインビューでqaulity_stringテキストビューがImageViewの下に位置していることを確認してください。

データバインディングを使っていたので、Adapter内は何も変更する必要がありません。コードは正常に動作し、リストがグリッド表示されているはずです。

5. アプリを起動し、睡眠データがグリッド内でどのように表示されているかを見てください。

ConstraintLayoutがまだ全体の幅を取っていることを確認してください。
GridLayoutManagerはスパンに基づいて修正した幅をビューに付与します。GridLayoutManagerはグリッドレイアウトを使う際、ホワイトスペースを追加したり、アイテムを重ねたりすることによって、全ての制約に適おうとします。

6. SleepTrackerFragment内、GridLayoutManagerを作成しているコードのスパンの数を1に変更してください。アプリを起動してください。リストが表示されます。

val manager = GridLayoutManager(activity, 1)

7. スパンの数を10に変更してアプリを起動してみてください。
   GridLayoutManagerが10個のアイテムを一行に収めようとしてますが、アイテムが重なってしまっていることを確認してください。
   
8. スパンの数を5に変更し、方向をGridLayoutManager.HORIZONTALに変更してください。アプリを起動して、どのようにスクロールできるかを確認してください。
   見栄えをよくするためには別のレイアウトが必要そうです。

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

9. スパンの数を3にして、向きを垂直に戻すのを忘れないでください。

完成済みプロジェクト

お疲れさまでした。完成済みプロジェクトは以下からダウンロードできます。

RecyclerViewGridLayout