2020/12/30 (最終更新日:2021/04/29)

[Kotlin de Android] RecyclerViewで2行表示するリスト表示してみよう

スポンサーリンク

前回RecycleView の最もシンプルな表示に仕方について解説しましたが、今回は表示するViewが2つになった場合の解説をしていきます。
2行表示されるものなので、Androidが標準で用意しているレイアウトを使っていきます。

目次

開発環境
プロジェクトを作ろう
画面を作ろう
表示するデータを作ろう
RecyclerViewを使うための設定しよう
データを表示するためのアダプターを作ろう
データを表示しよう
区切り線を表示しよう
項目をクリックできるようにしよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

Android Studio 4.1
JDK 1.8
Kotlin 1.4.10
macOS(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp2」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

まず最初から配置してある TextView は不要なので削除します。選択して Delete キーで OK です。

次に「Palette」の左側から「Containers」を選択して、右側から「RecyclerView」を選択して、画面の適当なところにドラッグ&ドロップします。
以下のような状態になるかと思います。

まずは位置を調整してあげましょう。配置した RecycleView を選択して、ツールバーの 「Align」ボタンから「Horizontally in Parent」と「Vertically in Parent」を選択します。

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

これで位置の調整ができたので、横画面にしたり、画面サイズを変えても RecycleView が画面いっぱいに表示されることを確認しておきましょう。

そうしたら、IDを付けてあげます。
「Attributes」の「ID」を「myRecycleView」にしておきます。

これで画面が完成です。以下のようになっていればOKです。

表示するデータを作ろう

早速 ListView を表示したいところですが、なにかしらのデータがないといけないでまずはデータを作っていきましょう。

といっても今回は一行表示するだけなので、文字列の配列を用意します。
スクロールするところが見たいので20個ほど用意してみます。

MainActivity.kt を開いてください。

onCreate() の最後に以下のように追加します。

これ一行だけです。

今回は2次元のリストを作りたかったので ListMap を組み合わせています。
List>(20) とするとListを作ってくれます。
引数は初期化したい数です。初期化する内容はクロージャーで書くのですが、it はデフォルトで使える変数でカウンターになっています。 なので 0 から順に数値が入ってきます。
今回はタイトルと詳細といった感じのメモっぽいデータにしました。

データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

Kotlin Android Extensionsを使うようにしているので、myRecyclerViewというようにレイアウトエディタで設定したIDを変数名としてそのまま使うことができます。
apply{}としてそのなかに色々設定をしていきます。
applyの説明は長くなるのでここでは省きます。解説してくれているサイトがたくさんあるので検索してみてください)

setHasFixedSize(true)とすると、RecyclerViewのサイズを固定してくれるのですが、それによりパフォーマンスが向上するらしいです。
とりあえずおまじない的に書いておけばよさそうです。

次にどういったレイアウトにするかを指定します。

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

RecyclerViewにデータを表示するためにはRecyclerView.Adapterを継承したアダプターを作る必要があります。
MyAdapterがそれにあたります。
MyAdapterはのちほど作っていくのでここではエラーになっていて正解です。

ListViewに比べると単純なデータを表示するだけでもアダプターが必要になってくるので少し面倒にも感じますが、カスタマイズ性はRecyclerViewのほうが高いですし、慣れるとアダプターの作成もそれほど大変ではないかなと思います。

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです(笑)

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示するデータを格納したListを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。
まずはRecyclerView.ViewHolderを継承したクラスを定義します。
引数は親クラスにも渡す必要があるViewにしておきます。

今回のサンプルはTextViewがふたつあるレイアウトを使っていくので、ViewHolderのなかでTextViewを取得しておきます。
おなじみfindViewByIdを使っていきます。

viewにはレイアウトの親Viewが入ってくるので、親Viewに対してfindViewByIdで子Viewを取得してあげればOKです。
今回、リストのレイアウトとして使用するのはAndroid標準のandroid.R.layout.simple_list_item_2なのですが、このレイアウトは TextView が2つ配置されていて、それぞれIDが text1、text2 となっているのでそちらを使って TextView を取得します。
ViewHolderで使う変数名は title と detail とします。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

では、各メソッドを実装していきます。

上から順にやっていきますね。

onCreateViewHolderはViewHolderを作成して、データを表示するために使うViewを設定します。
レイアウトファイルからViewを取得して、ViewHolderのインスタンスにして返してあげればOKです。

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_2を使っています。
このファイルを見てもらうとわかるのですが、TwoLineListItem というViewのなかに TextView が2つあるものになります。
ここでは親Viewである TwoLineListItem が取得できればいいので、そのまま引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderには2つの TextView があるので、それぞれに対応するデータを設定してあげればOKです。

引数にViewHolderとリストの位置が渡されてくるので、memos[position]["title"]memos[position]["detail"]としてあげれば対応するデータが取得できるのでそれを title と detail に入れてあげればOKです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなりますね。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

処理がreturnのみなので、以下のように短くこともできます。

これでMyAdapterクラスが完成です。

データを表示しよう

さぁデータを表示しましょう!
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行!

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

DividerItemDecorationという区切り線用のクラスが用意されているのでそれを使います。
引数でLinearLayoutManager(this).orientationとすることでリスト表示の横線という感じになります。

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

最終的なonCreate()は以下のようになるかと思います。

ここまでできたら実行してみましょう。

区切り線も表示されました!

項目をクリックできるようにしよう

最後にリストの項目をクリックできるようにしてみます。
ListViewのときはsetOnItemClickListenerがありましたが、RecyclerViewにはないのでsetOnClickListenerを使って実装する必要があります。

まずはListenerを作成します。

MyAdapter クラスのなかに以下のようにListenerを作ります。

引数は今回は選択された位置とメモの内容を渡すようにしました。

次にListenerを保持しておく変数を定義しておきます。

あとで初期化するので、lateinit var で定義しておきます。

そのlistenerを初期化するためのメソッドを書きましょう。

次にクリックされたときの処理をかいていきます。
MyAdapteronBindViewHolder()で実装していきます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。

setOnClickListener の中では作成した listeneronItemClickListener を実行すればOKです。

ここまででlistenerの設定ができたので、MainActivityクラスの OnCreate() の方にクリック処理を実装していきます。

viewAdapter.setOnItemClickListener で設定します。MyAdapter.OnItemClickListener を設定しればOKです。

ここまで書くとエラーが出ていると思うので、赤い電球マークをクリックして、「implement members」を選択して、onItemClickListenerを追加します。

onItemClickListener のなかにクリック時の処理を書いていきたいのですが、今回は単純にToastを使って選択された行の title を表示したいと思います。

Toast の第一引数はContext ですが、thisだけだとどのthisなのかわからないのでthis@MainActivityとする必要があるようです。

これでクリック処理が実装ができたので、早速実行してみましょう!

適当な項目をクリックするとToastが表示されるようになりました!

ちょっと雑な説明になってしまいましたが、どなたかの参考になってら嬉しいです♪

年内に更新できてよかった…(笑)

スポンサーリンク