どうも。どっことです。今回はListViewでコンテンツ一覧を表示する実装方法について解説していきます。
ListViewを使ってコンテンツ一覧を表示する
RecyclerViewの登場によりもはや下火となったListViewですが、昔から開発が続いているアプリや、チームの技術力を加味した技術選定の結果、ListViewを使わざるを得ない状況も多かれ少なかれあると思います。今回は、そんないにしえのコンポーネントとなったListViewによるコンテンツの一覧を表示する方法について解説していきたいと思います。
実装方法
以下の流れで実装していきます。すでにRecyclerViewの記事(こちら)を見てくださっている方は、これとほぼ同じイメージで問題ありません。
ListViewをレイアウトに配置-
ArrayAdapterを継承したCustomAdapterクラスを実装 - 表示要素を設定する
ListViewとCustomAdapterを繋ぎ込み- その他
順番に解説していきます。
ListViewをレイアウトに配置
まずはListViewをレイアウトXMLに配置します。
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
ArrayAdapterを継承したCustomAdapterクラスを実装
次にArrayAdapterを継承したCustomAdapterを実装します。表示する要素群をコンストラクタのvaluesとして、ArrayAdapterのGenericsにその型を指定してあげてください。以下のサンプルは、Int型の要素群を渡しているので、ArrayAdapterのGenericsにIntを指定しています。
class CustomAdapter(context: Context, values: List<Int>) :
ArrayAdapter<Int>(context, 0, values) {
override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
TODO("このあと実装")
}
}表示要素を設定する
CustomAdapter内で表示要素を処理します。
レイアウトファイルの用意
まずは一覧として表示するために、レイアウトXMLを用意します。今回はファイル名をlist_view_item.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>用意したレイアウトファイルでViewを生成、表示内容の当て込み
CustomAdapter#getViewメソッドをオーバーライドし、前項目で用意したレイアウトファイルを使ってViewを生成します。そしてそのViewに対して表示内容を設定していきます。
class CustomAdapter(context: Context, values: List<Int>) :
ArrayAdapter<Int>(context, 0, values) {
override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
// convertViewがあれば（再利用されているViewである）それを、なければ前項目で用意したレイアウトを使ってViewを生成
val view = convertView
?: LayoutInflater.from(parent.context).inflate(R.layout.list_view_item, parent, false)
// View内に用意したTextViewに表示内容を当てこむ
val textView: TextView = view.findViewById(R.id.text_view)
val value = getItem(position)
textView.text = value.toString()
return view
}
}ListViewとCustomAdapterの繋ぎ込み
最後にListViewとCustomAdapterを繋ぎ込みます。このときCustomAdapterのコンストラクタでは、表示要素のリストを渡しましょう。
val listView: ListView = findViewById(R.id.list_view)
listView.adapter = CustomAdapter(this, listOf(12, 23, 34, 45)) 最終的に、実装した時のイメージは以下になります。
その他
区切り線
ListViewでは区切り線をデフォルトで表示してくれますが、不要であればListViewのパラメータとしてdivider="@null"を設定することで消すことができます。
<ListView
android:id="@+id/list_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="@null" />タップ時の処理
ListViewではタップした時の処理を制御するためのリスナー(OnItemClickLister)も提供されています。
listView.setOnItemClickListener { parent, view, position, id ->
// 要素がタップされた時の処理
}高速スクローラ
スクロールバーをタッチすると、高速にスクロールできるタブを表示してくれる。
listView.setFastScrollEnabled(true);まとめ
今回は、ListViewによるコンテンツ一覧の実装方法について解説しました。使う頻度はもう多くないかと思いますが、いざという時には躊躇わずに使えるようにしておきたいですね。
