リサイクラービューを使ってリスト表示【Android/Kotlin】



リサイクラービューを使ったリスト表示


今回のAndroidサンプルプロジェクトでは、リサイクラービューを使って下の図のような正方形のリストアイテムの表示を行ってみた。


この記事ではリサイクラービューの実装手順を説明していく。







リサイクラービューとは


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

リサイクラービューのレイアウトマネージャーには次の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へ公開しておく。
» AndroidExercise/TryRecyclerView at master · araemon/AndroidExercise · GitHub

公式ドキュメント

» RecyclerView でリストを作成する


Kotlinプログラミング

Kotlinは、Javaとの相互運用を可能にし、Android OSでGoogleがフルサポートする静的型プログラミング言語です。この言語は、Javaだけでは十全ではない(Javaだけでは実装に手間がかかりすぎる)、軽量かつ豊かな表現形式や、他言語ではすでに実装されている最新の機能を盛り込んでいます。

KindleAmazon

基本からしっかり身につくAndroidアプリ開発入門

圧倒的な多数のユーザーが使っているヤフーのアプリ。その制作の最前線にいる黒帯エンジニアが、ユーザーが使いやすいアプリの大切な基本をしっかりと解説します。

KindleAmazon


あなたにおすすめ