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

Androidの実装をしているところなので、そこでの気付きなどを纏めていく。

今回は、RecyclerViewとCardViewを使って、リスト形式の画面を表示させる実装方法を説明していきます。

全3回の予定で、少し詳しく説明していきます!!

特段、Kotlin、AndroidStudioの使い方などの説明はいたしません。そのあたりは把握している前提で勧めていきますので。

コンテンツはこんな感じです

  • レイアウトファイルと登場するクラスと、その役割を説明
  • 実装方法(Activity/Adapter/Viewholder)
  • Listのタップを検知する方法

では、リスト形式で早速、1回目の説明していきます。

メイントピックとしては、使うクラスがややこしいので、その辺りの説明ですね。

今回実装するアプリ

今回実装するアプリは、このような画面になります

【リスト】            【詳細画面】

  

簡単な機能のサマリは以下の通り

  • アプリ起動時に端末にある画像ファイルを取得して、その一覧をリスト表示
  • リストには「サムネイル、ファイル名、容量、作成日時」を掲載
  • タップすると詳細画面に遷移。詳細画面には、ファイルの属性を表示
  • 簡易な構成にしたいので、Fragmentは使いません

Master-DetailFlowの画面だと思っていただければと思ってます。

RecyclerView、CardViewを使ったリスト画面、あとは詳細画面のLayoutファイルを載せておきます。

【リスト画面】activity_list.xml

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

【リスト/RecyclerView】content_list.xml

RecyclerViewの定義をしています。

【CardView】item_list.xml

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

content_detail.xml

こちらは詳細画面の定義になります。

 

登場するクラスと処理の流れの紹介

RecyclerViewとCardViewを使ってのリスト表示の場合、色々なクラスが登場してきます。

正直、ここがややこしい。

Android Developerサイトですと、こちらの説明のチャートになります。

うーん、なんのこっちゃ???というのが最初の印象でしょうね。

そこをきれいにしていきましょう

登場するクラスは以下の通り。

クラス名役割
ActivityActivityです。ここは説明不要ですね
DataClassデータの受け渡し用のクラスです。なくても実装できますが、あったほうが楽です。
Adapterリストに表示するデータの保持と、ViewHolderの生成と設定を担当します
ViewHolderリスト1行のデータを保持するデータクラス
RecyclerViewリストの表示などを管理するクラス
LayoutManagerリストのレイアウトを管理するクラスVertical、Horizontalなどの設定をします。

こちらを踏まえて、処理の流れと関係性を作り直すと、こんなイメージになります。

少し補足します。

処理の流れ

1) データの生成

AndroidDeveloperの説明図では、AdapterがDataSetへアクセスするイメージがあるので、「Adapterにてデータソースからデータを取得する」と感じることもありますが、あくまでもデータを作る(取得して、整形する)のはAdapterではありません。

Adapterの役割はデータをListに渡す役割となるので、データ生成については他の場所で対応することになります。今回はActivityで作ることにしています。

2) Adapterの作成

データ作成後は、Adapterを作成することになります。Adapterを作る際に、先程作ったデータも一緒に渡してAdapterを作成することになります。

3) RecyclerViewにAdapterとLayoutManagerを設定

RecyclerView側でAdapter、LayoutManagerを使い、リスト形式の画面を表示します。単純に表示するだけなのであれば、LayoutManagerは修正することはありません。実装する必要があるのはAdapterとなります。

Adapterにはリスト1行のデータを保持するViewHolderを作るメソッドと、そのViewHolderをリストに設定するメソッドがあり、ここを個別にカスタマイズしていく必要があります。

ViewHolder

ViewHolderとは、リストの1行分毎のオブジェクトになります。
各行のデータを持ち、設定するクラスというイメージを持ってください。

 

はい、以上が全体の説明になります。

なんとなくイメージはできたでしょうか???

ソースを載せながらって思ってもいたんですが、のせると長くなってしまうので、今回は概要までとしているところですね。

次回は、実装編になりますので、ソースを見ながら、実装する方法を説明していきたいと思います。