リサイクラービューを使ってリスト表示 (Android Kotlin)

/




今回のサンプルプロジェクトではこちらの本の内容を元に、リサイクラービューを使って上図のような正方形のリストアイテムの表示を行ってみた。




リサイクラービューとは


リストビューよりも柔軟性の高い表現ができるビューのことである。リスト内にカードやカルーセルを並べたり、横方向にスクロールさせたり、リストアイテムをグリッド状に並べたりすることができる。

リサイクラービューのレイアウトマネージャーには次の3つが用意されている。

1. LinearLayoutManager
2. GridLayoutManager
3. StaggeredGridLayoutManager

LinearLayoutManagerはリストビューと似ていて、アイテムを縦に並べる事ができるが横にも並べることが出来るものだ。GridLayoutManagerはグリッド状にリストアイテムを並べることができる。今回のサンプルプログラムではこのGridLayoutMnagerを使ったリサイクラービューを実装することにする。最後のStaggeredGridLayoutManagerGridLayoutManagerをさらに柔軟にしたものと言えよう。Staggeredとは「ジグザグの」と言う意味で、GridLayoutManagerでは普通、行の高さが揃うことになっているがこのレイアウトでは行の高さを別々にすることが出来るのだ。

これからリサイクラービューを使う上で注意しておきたいのは、リサイクラービューはサポートライブラリーに含まれるということだ。サポートライブラリとは古いOSでも使用できるように後方互換を考慮したライブラリだ。リサイクラービューはバージョン7に含まれるのでGradleでは次のように追加されることになる。

implementation 'com.android.support:recyclerview-v7:28.0.0'


Adapterクラスの作成


それではリサイクラービューを作っていこう。
リストビューの時と違ってBaseAdapterではなくRecyclerViewに定義されているAdapterクラスを継承して実装する。
またリストビューと同様にViewHolderパターンを使用する。



リサイクラービューで実装すべきメソッドは次の3つである。

1. getItemCount():Int
2. onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder
3. onBindViewHolder(holder: SampleViewHolder, position: Int)

それではこれらを一つ一つ見ていこう。

getItemCount():Int


ここではリストアイテムの件数を返すことになっている。リストビューの時とは異なり、ヘッダーやフッターもカウントの対象になることに注意しよう。今回はヘッダーもフッターも表示しないのでTimeZoneで得られた配列のサイズをそのまま返すことになっている。

onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder


ここでは表示するリストアイテムのViewをinflaterで生成する。ViewHolderパターンを使うので、RecyclerView.ViewHolderを継承したSampleViewHolderというクラスを作りそれを返すことにした。またリストアイテムをクリックしたときのイベントハンドラの登録もここで行うようにしよう。

onBindViewHolder(holder: ViewHolder, position: Int)


ここではonCreateViewHolderで生成したViewHolderが渡されるので、表示させたい値をここで設定しよう。


MainActivityでRecyclerViewの設定


RecyclerViewのプログラムが出来たところで、MainActivityからRecyclerViewを呼び出す設定をしよう。



今回はSampleAdapterクラスのコンストラクタの第二引数に、ラムダ式を渡す仕様となっている。ラムダ式内にリストアイテムがクリックされたときの処理を書き込もう。
GridLayoutManagerの第二引数には1行に配置したいリストアイテムの数を指定することができる。

以上のプログラムをBuild&Runすると次のようなリサイクルビューを表示することができた。






正方形のマスを画面サイズに合わせてキレイに配置する


ところで正方形のリストアイテムをグリッドで並べたい場合にはどうすればよいだろうか?

まずlist_time_zone_row.xmlTextViewのサイズを次のように固定にしてしまおう。




しかし画面が回転したりして横幅が大きくなってしまうと、無駄にスペースが空いてしまう。
そこで画面の現在の横幅(dp)を取得して何個リストアイテムを入れられるか計算させることにしよう。
onCreateメソッド内を次のように修正した。



すると次のように画面サイズに合わせてキレイに配置することができた。




以上でリサイクラービューの基本的な使い方の説明を終わる。
今回のサンプルはGitHubへ公開しておく。
https://github.com/araemon/AndroidExercise/tree/master/TryRecyclerView


参考


* 基本からしっかり身につくAndroidアプリ開発入門 Android Studio 3対応 (「黒帯エンジニア」シリーズ)
* Create a List with RecyclerView


関連記事


非同期 & ネットワーク処理
* はじめてRetrofitを使ってみる (Android Kotlin)
* 非同期処理でCoroutine(コルーチン)を使ってみる (Android Kotlin)
* OkHttpでHTTP通信 (Android Kotlin)
* スレッド処理 (Android Kotlin)

View & レイアウト
* リサイクラービューを使ってリスト表示 (Android Kotlin)
* 角丸表現 (Android Kotlin)
* onSaveInstanceStateで画面回転時の状態の保存と復元 (Android Kotlin)
* ListViewを簡単なモデルで理解しよう (Android Kotlin)
* バネアニメーション (Android Kotlin)
* startActivityForResultを使ってみる (Android Kotlin)
* ActivityとFragmentの連携を理解する (Android Kotlin)
* DataBinding機能を使ってみる (Android Kotlin)
* タッチイベントのフック (Android Kotlin)
* DialogFragmentを使ったダイアログの表示 (Android Kotlin)

サウンド
* これってSoundPoolのバグ?(Android Kotlin)
* SoundPoolを使ってゲームの効果音を再生する (Android Kotlin)

データ & オブジェクト
* Kotlinでオブジェクト(object)の動作確認
*
データクラスとタプル (Android Kotlin)
* Null安全、ぬるぽバイバイ (Android Kotlin)