この Codelab は、Android Kotlin の基礎コースの一部です。このコースを最大限に活用するには、Codelab を順番に進めることをおすすめします。コースのすべての Codelab は、Android Kotlin の基礎の Codelab のランディング ページに一覧表示されています。
はじめに
RecyclerView の主な利点の 1 つは、レイアウト マネージャーを使用してレイアウト戦略を制御および変更できることです。LayoutManager は、RecyclerView 内のアイテムの配置方法を管理します。
RecyclerView には、一般的なユースケース向けのレイアウト マネージャーがすぐに使用できる状態で付属しています。たとえば、水平リストと垂直リストには LinearLayout を、グリッドには GridLayout を使用できます。より複雑なユースケースでは、カスタム LayoutManager を実装する必要があります。
この Codelab では、前の Codelab の睡眠トラッカー アプリを基に、リストではなくグリッド レイアウトを使用してデータを表示する方法を学びます。（前の Codelab のアプリがない場合は、この Codelab のスターター コードをダウンロードできます）。
前提となる知識
以下について把握しておく必要があります。
Activity、Fragments、Viewsを使用して基本的なユーザー インターフェースを構築する- フラグメント間を移動し、
safeArgsを使用してフラグメント間でデータを渡す - モデル、モデル ファクトリ、変換を表示する
LiveDataとそのオブザーバーRoomデータベースを作成し、DAO を作成して、エンティティを定義する方法- データベース タスクやその他の長時間実行タスクにコルーチンを使用する方法
Adapter、ViewHolder、アイテム レイアウトを使用して基本的なRecyclerViewを実装する方法RecyclerViewのデータ バインディングの実装方法- バインディング アダプターを作成してデータ変換を行う方法
学習内容
- 別の
LayoutManagerを使用してRecyclerViewでのデータの表示方法を変更する方法 - 睡眠データのグリッド レイアウトを作成する方法
演習内容
- このシリーズの前の Codelab で作成した睡眠トラッカー アプリをベースに構築します。
- アプリの
RecyclerViewで表示される睡眠データのリストを、睡眠データのグリッドに置き換えます。
睡眠トラッカー アプリには、下の図に示すように、フラグメントで表される 2 つの画面があります。
|
|
左側に表示されている最初の画面には、トラッキングの開始と停止のボタンがあります。画面には、ユーザーの睡眠データの一部が表示されます。[消去] ボタンをクリックすると、アプリがユーザーのために収集したすべてのデータが完全に削除されます。右側の 2 つ目の画面は、睡眠の質の評価を選択するための画面です。
このアプリは、UI コントローラ、ビューモデル、LiveData、Room データベースを備えた簡素化されたアーキテクチャを使用して、睡眠データを永続化します。
睡眠データは RecyclerView に表示されます。この Codelab では、GridLayout を使用するようにアプリを変更します。最終的な画面は次のスクリーンショットのようになります。
前の Codelab で fragment_sleep_tracker.xml に RecyclerView を追加したとき、カスタマイズなしで LinearLayoutManager を追加しました。このコードは、データを縦のリストとして表示します。
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"LinearLayoutManager は RecyclerView の最も一般的で簡単なレイアウト マネージャーであり、子ビューの水平方向と垂直方向の両方の配置をサポートしています。たとえば、LinearLayoutManager を使用して、ユーザーが水平方向にスクロールする画像のカルーセルを作成できます。
GridLayout
もう 1 つの一般的なユースケースは、ユーザーに大量のデータを表示する必要がある場合です。これは GridLayout を使用して実現できます。RecyclerView の GridLayoutManager は、以下に示すように、スクロール可能なグリッドとしてデータを配置します。
デザインの観点から見ると、GridLayout はアイコンまたは画像として表現できるリスト（たとえば、写真閲覧アプリ内のリスト）に最適です。睡眠トラッカー アプリでは、毎晩の睡眠を大きなアイコンのグリッドとして表示できます。このデザインにより、ユーザーは睡眠の質を一目で把握できます。
GridLayout がアイテムを配置する仕組み
GridLayout は、行と列からなるグリッドにアイテムを配置します。縦方向のスクロールを想定した場合、デフォルトでは、各行の各アイテムは 1 つの「スパン」を占有します。（この場合、1 つのスパンは 1 つの列の幅に相当します）。
下記の最初の 2 つの例では、各行は 3 つのスパンで構成されています。デフォルトでは、GridLayoutManager は、指定したスパン数に達するまで、各アイテムを 1 つのスパンに配置します。指定したスパン数に達すると、次の行に折り返します。
デフォルトでは、各アイテムは 1 つのスパンを占有しますが、占有するスパン数を指定することで、アイテムを幅広くすることができます。たとえば、右端の画面（下図）の最上部のアイテムは 3 つのスパンを占有しています。
|
|
|
このタスクでは、前の演習で完成させた RecyclerView を取得し、GridLayoutManager を使用してデータを表示するように更新します。前の Codelab の睡眠トラッカー アプリを引き続き使用することも、GitHub から RecyclerViewGridLayout-Starter アプリをダウンロードすることもできます。
ステップ 1: LayoutManager を変更する
- 必要に応じて、この Codelab の RecyclerViewGridLayout-Starter アプリを GitHub からダウンロードし、Android Studio でプロジェクトを開きます。
fragment_sleep_tracker.xmlレイアウト ファイルを開きます。sleep_listRecyclerView定義からレイアウト マネージャーを削除します。
削除するコード:
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManagerSleepTrackerFragment.ktを開きます。OnCreateView()のreturnステートメントの直前で、3 つのスパンを持つ新しい縦方向のGridLayoutManagerを作成します。GridLayoutManagerコンストラクタは、最大 4 つの引数（コンテキスト（activity）、スパン数（デフォルトの縦方向レイアウトでは列）、向き（デフォルトは縦方向）、逆レイアウトかどうか（デフォルトはfalse））を取ります。
val manager = GridLayoutManager(activity, 3)- その行の下に、この
GridLayoutManagerを使用するようRecyclerViewに指示します。RecyclerViewはバインディング オブジェクトにあり、sleepListと呼ばれます。（fragment_sleep_tracker.xmlを参照）。
binding.sleepList.layoutManager = managerステップ 2: レイアウトを変更する
list_item_sleep_night.xml の現在のレイアウトでは、1 晩ごとに 1 行を使用してデータが表示されます。このステップでは、グリッドのよりコンパクトな正方形のアイテム レイアウトを定義します。
list_item_sleep_night.xmlを開きます。- 新しい設計では不要になったため、
sleep_lengthTextViewを削除します。 quality_stringTextViewを移動して、ImageViewの下に表示されるようにします。そのためには、多くのことを更新する必要があります。quality_stringTextViewの最終レイアウトは次のとおりです。
<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}" />- [Design] ビューで、
quality_stringTextViewがImageViewの下に配置されていることを確認します。
データ バインディングを使用しているため、Adapter の何も変更する必要はありません。コードは正常に動作し、リストがグリッドとして表示されます。
- アプリを実行して、睡眠データがグリッドでどのように表示されるかを確認します。
なお、ConstraintLayoutはまだ幅全体を使用します。GridLayoutManagerは、スパンに基づいてビューに固定幅を設定します。GridLayoutManagerは、グリッドをレイアウトする際に、すべての制約を満たすように最善を尽くし、空白を追加したり、アイテムを切り抜いたりします。
SleepTrackerFragmentで、GridLayoutManagerを作成するコードで、GridLayoutMangerのスパン数を 1 に変更します。アプリを実行すると、リストが表示されます。
val manager = GridLayoutManager(activity, 1)GridLayoutManagerのスパン数を 10 に変更してアプリを実行します。GridLayoutManagerに 10 個のアイテムが 1 列に収まりますが、アイテムがクリップされることに注意してください。- スパン数を 5 に変更し、方向を
GridLayoutManager.VERTICALに変更します。アプリを実行し、水平方向にスクロールできることを確認します。このレイアウトでは、見栄えがよくありません。
val manager = GridLayoutManager(activity, 5, GridLayoutManager.HORIZONTAL, false)- スパン数を 3 に、向きを縦に戻すことを忘れないでください。
Android Studio プロジェクト: RecyclerViewGridLayout
- レイアウト マネージャーは、
RecyclerView内の項目の配置方法を管理します。 RecyclerViewには、水平リストと垂直リスト用のLinearLayoutやグリッド用のGridLayoutなど、一般的なユースケースに対応したレイアウト マネージャーがすぐに使用できる状態で用意されています。- より複雑なユースケースでは、カスタム
LayoutManagerを実装します。 - デザインの観点から見ると、
GridLayoutはアイコンまたは画像として表現できるアイテムのリストに最適です。 GridLayoutは、行と列からなるグリッドにアイテムを配置します。縦方向のスクロールを想定した場合、各行の各アイテムは「スパン」を占有します。- アイテムが占めるスパンの数をカスタマイズして、カスタム レイアウト マネージャーを使用しなくても、より興味深いグリッドを作成できます。
- グリッド内の 1 つのアイテムのアイテム レイアウトを作成すると、レイアウト マネージャーがアイテムの配置を処理します。
RecyclerViewのLayoutManagerは、<RecyclerView>要素を含む XML レイアウト ファイルで設定することも、プログラムで設定することもできます。
Udacity のコース:
Android デベロッパー ドキュメント:
このセクションでは、インストラクター主導のコースの一環として、この Codelab に取り組んでいる生徒向けに考えられる宿題をいくつか示します。インストラクターは、以下のようなことを行えます。
- 必要に応じて宿題を与える
- 宿題の提出方法を生徒に伝える
- 宿題を採点する
インストラクターは、これらの提案を必要なだけ使用し、必要に応じて他の宿題も自由に与えることができます。
この Codelab に独力で取り組む場合は、これらの宿題を自由に使用して知識をテストしてください。
以下の質問に回答してください
問題 1
Android が提供するレイアウト マネージャーは次のうちどれですか。該当するものをすべて選択してください。
▢ LinearLayouManager
▢ GridLayoutManager
▢ CircularLayoutManager
▢ StaggeredGridLayoutManager
問題 2
「スパン」とは何ですか？
▢ GridLayoutManager によって作成されたグリッドのサイズ。
▢ グリッド内の列の幅。
▢ グリッド内のアイテムのサイズ。
▢ 縦型グリッド内の列の個数。
次のレッスンに進む: