この 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 を変更する
- 必要に応じて、GitHub からこの Codelab の RecyclerViewGridLayout-Starter アプリをダウンロードし、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 行連続で収まるように見えますが、各部分はクリップされます。- スパン数を 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 が作成したグリッドのサイズ。
▢ グリッド内の列の幅。
▢ グリッド内のアイテムのディメンションです。
▢ 垂直方向のグリッド内の列の数。
次のレッスンを開始する: