【Android開発】KotlinでRecyclerViewとCardViewを使ってリストを表示させる方法(2)

前回はRecyclerView、CardViewの全体を説明していきました。

今回は実際のソースを見ながら説明していきます。

対象範囲は、リスト画面にデータを表示するところまで。タップして詳細画面に遷移するのは次回にまわします。

実装するアプリのイメージ

まずはおさらいで、今回作るアプリのイメージはこちら。その後にLayout定義も載せておきます。

【リスト】

【リスト画面】activity_list.xml

リスト画面の表示のみを定義しており、RecyclerViewは別のレイアウトファイルに定義しています。(<include layout=”@layout/content_list” / > にて取り込みをしています)

【リスト/RecyclerView】content_list.xml

RecyclerViewの定義をしています。

【CardView】item_list.xml

CardViewの定義をしています。要はリストの1行分の表示に関しての定義になります。

実際にコードを書いていく

実装が必要なものは、以下の通り。

  • Activity
  • Adapter
  • ViewHolder
  • データクラス

これから、それぞれの説明をしていきます。

データクラス

まずは、1行分のデータを保持するクラスを作ります。

目的は、クラス間でデータのやり取りをするため、になります。

正直なくても実装は可能ですが、あったほうが楽ですね。

リストにはファイルに関しての画像、名前、容量、日付のみになりますが、詳細画面で縦幅、横幅を扱うので、全部で6つの属性を定義しています。

Activity

次にリスト画面を表示するActivityを作っていきます。

処理の流れに合わせて説明していきます。

データ作成

まずはリストに表示するデータの作成です。今回はテストデータを作成しています。

リストのデータを20個作成して、ArrayListに格納しています。

実際にファイルを読み込もうと思ったんですが、そうすると権限の取得など、複雑になってしまうため、今回はテストデータに切り替えています。

前回説明したように、Adapterはリストへの表示が責務になります。データ作成はAdapter以外の場所で行うことになるので、今回はActivityにて作成をしています。

RecyclerViewの設定

RecyclerViewにAdapterとLayoutManagerを設定します。

Adapterの設定はオブジェクトを設定して、設定するだけです。特段難しくはないですね。

LayoutManagerとは、リストのレイアウトを決定するものになります。各パーツの初期配置や、スクロール時の対応などをしています。

  • LinearLayoutManager
  • GridLayoutManager
  • StaggeredGridLayoutManager

設定できるのは上記の3つあり、今回はオーソドックスなリストを表示するのでLinearLayoutManagerを設定しています。

Adapter

次にAdapterの実装です。

RecyclerView.Adapterを継承しているため、3つのメソッドの実装が必要です。

onCreateViewHolder

ここでは対象となるレイアウトの設定(inflate)と、ViewHolderの生成を行います。

onBindViewHolder

ここではデータを各画面のViewに設定する処理を実装します。

ViewHolderと、そのViewの表示位置(position)を引数として受け取ります。

Adapterはオブジェクト生成時にリストに表示するデータを取得しています(mValueに格納されています)。

表示位置(position)がわかっていますので、対象データをmValueから取得して、ViewHolderに設定しています。

getItemCount

ここでは保持しているデータ数を返します。

ViewHolder

次にViewHolderを作成しています。ViewHolderはリスト1行の表示を行うクラスになります。

1行分のレイアウトファイル(item_list.xml)に設定されているViewをプロパティに設定します。

今回は、item_list.xmlに4つのViewを設定しているので、そちらを設定しています。

 

はい、以上で実装は終わりです。

アプリを起動するとRecyclerViewを使ったリストを表示することができます。

次回は、リストをタップを検知して、詳細画面へ遷移する部分を実装していきます。