どうも。どっことです。今回はRecyclerViewを使ったコンテンツ一覧の表示方法を解説します。
RecyclerViewを使ったコンテンツ一覧の表示
コンテンツの一覧表示する実装方法はいくつかありますが、よくある一般的なものはListViewやRecyclerViewです。特にRecyclerViewはリスト表示だけでなく、グリッド表示や横スクロールコンテンツにもこれ一つで対応できるので、実装パターンさえ理解できていれば非常に融通が利くコンポーネントです。今回は、そんな融通が利くRecyclerViewの実装パターンについて解説します。
RecyclerViewを使ってコンテンツ一覧表示を実装する
シンプルな表示の実装は大きく以下の流れとなります。
RecyclerViewを配置LayoutManagerを設定-
RecyclerView.Adapterを継承したCustomAdapterクラスを実装
-
RecyclerView.ViewHolderを継承したCustromViewHolderクラスを実装
CustomViewHolderとCustomAdapterを繋ぎ込みRecyclerViewとCustomAdapterクラスを繋ぎ込み
順に解説していきます。
RecyclerViewを配置
まずはRecyclerViewを画面レイアウトに配置します。ListViewを配置するのと同じ要領ですね。
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
LayoutManagerを設定
次にLayoutManagerを設定します。LayoutManagerはRecyclerViewに対して、コンテンツをどのように配置するかを指定してくれるマネージャークラスです。LayoutManagerには、例えば以下があります。
- 縦横にコンテンツを配置する
LinearLayoutManager
- グリッドにコンテンツを配置する
GridLayoutManager
- キーワードなどを柔軟に並べてくれる
FlexBoxLayoutManager
今回はLinearLayoutManagerを使って、縦並びのコンテンツ配置を指定します。
指定方法は2つ。コードで設定する方法と、レイアウトで設定する方法です。
コードで設定する方法
コードからLayoutManagerを設定する方法です。LinearLayoutManagerのインスタンスを生成し、RecyclerView.setLayoutManager()で設定します。
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.layoutManager = LinearLayoutManager(this)
レイアウトで設定する方法
レイアウトXMLから設定する方法です。app:layoutManagerで設定するだけです。
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
RecyclerView.Adapterを継承したCustomAdapterクラスを実装
次はRecyclerViewで表示する要素を管理しているAdapterクラスを実装していきます。RecyclerView.Adapterを継承した、CustomAdapterクラスを作成します。
class CustomAdapter : RecyclerView.Adapter<ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
TODO("このあと実装")
}
override fun getItemCount(): Int {
TODO("このあと実装")
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
TODO("このあと実装")
}
}
次の項目で、実際に表示するコンテンツ要素を実装するのですが、それができたらこちらのCustomAdapterクラスと繋ぎ込みをしていきます。
RecyclerView.ViewHolderを継承したCustomViewHolderクラスを実装
では、RecyclerViewで表示するコンテンツ要素部分を実装します。RecyclerView.ViewHolderを継承した、CustomViewHolderクラスを作成します。
レイアウトファイルの作成
レイアウトファイルを作成します。これはあとでCustomViewHolderに渡します。ここではファイル名をview_holder_sample.xmlとしておきます。
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text_view"
android:layout_width="0dp"
android:layout_height="50dp"
android:gravity="center"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
CustomViewHolderの実装
RecyclerView.ViewHolderを継承したCustomViewHolderクラスを実装します。細かい実装は、後述の繋ぎ込みをしながら実装します。
class CustomViewHolder(itemView: View): ViewHolder(itemView) {
// まずはこれだけ
}
CustomAdapterとCustomViewHolderを繋ぎ込み
ここまでできればもうすぐです。実装したCustomAdapterとCustomViewHolderを繋ぎ込んでいきましょう。実装が必要な箇所は大きく2箇所、onCreateViewHolderとonBindViewHolderです。
繋ぎ込み1： onCreateViewでCustomViewHolderを生成
onCreateViewHolderは表示するCustomViewHolderを生成する箇所です。ここではあくまで生成だけで、実際に表示する要素を当てこむ箇所がonBindViewHolderとなります。今回はサンプルのため、表示件数は10件とします。
class CustomAdapter : RecyclerView.Adapter<ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
// onCreateViewHolderで、CustomViewHolderを生成する。
return CustomViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.view_holder_sample, parent, false))
}
override fun getItemCount(): Int {
return 10 // 今回はサンプルのため、10件だけ表示することとします。
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
TODO("このあと実装")
}
}
繋ぎ込み2： CustomViewHolderでの表示処理を追加実装
先ほど追加したCustomViewHolderに表示用のTextViewへの参照を持たせておきましょう。
class CustomViewHolder(itemView: View): ViewHolder(itemView) {
val textView: TextView = itemView.findViewById(R.id.text_view)
}
繋ぎ込み3： onBindViewHolderで表示内容を当て込み
先ほど追加したCustomViewHolderのTextViewを参照し、onBindViewHolderで表示内容を当てこんでいきます。
class CustomAdapter : RecyclerView.Adapter<ViewHolder>() {
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
// onCreateViewHolderで、CustomViewHolderを生成する。
return CustomViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.view_holder_sample, parent, false))
}
override fun getItemCount(): Int {
return 10
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
if (holder is CustomViewHolder) {
holder.textView.text = position.toString()
}
}
}
RecyclerViewとCustomAdapterを繋ぎ込み
あとは、画面レイアウトに配置したRecyclerViewとCustomViewHolderを繋ぎこむだけです。
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.adapter = CustomAdapter()
実際に実装した結果は以下のように表示されるかと思います。
今回はひとまずこれで完成です。お疲れ様でした。
さて、上記でシンプル（＝必要最低限）な実装を解説しましたが、実際にRecyclerViewを利用する場合、以下のような機能も実現したい場合がほとんどだと思います。
- 表示要素は動的にしたい。
- 例えばTODOリストなどに使うなら、解説した実装だと満たせません。
- クリックしたらその要素に対応する画面を表示したい。
-
ListViewではOnItemClickListenerというインターフェースが用意されていますが、RecyclerViewは自分で定義・実装が必要になります。
まとめ
今回はRecyclerViewに関するシンプルな実装を解説しました。さまざまな使い方ができるRecyclerViewの使い方をマスターしたい人は最初の一歩として参考にしていただけると幸いです。ただ、上記の通りまだまだ実際の利用にはアプローチが足りていないので、次回は上記のようなより実用に近い機能の実装方法について解説したいと思います。
