すだみなさまこんにちは〜！
メモリアインクのすだです。
本日は、
KotlinでListViewやRecyclerViewを使ってデータを一覧表示する方法について、実際のコードを用いて解説していきます！
この記事を読んでわかること…
・ListViewとは？
・RecyclerViewとは？
・ListViewやRecyclerViewを使ってデータを一覧表示する方法
ListやArrayなどの配列の使用方法につきましては、以下の記事でご紹介しています！
こちらもぜひご覧ください！
環境
- Kotlin (ver 1.9.0)
- Android Studio (Giraffe | 2022.3.1 Patch 3)
ListViewとは？
ListView（リストビュー）は、項目が縦に並んだスクロール可能なリストを表示するためのウィジェットです。
各項目は一定のデータモデルから取得され、通常、テキストや画像などを含むことができます。
ListViewを使ってデータを一覧表示する方法
① まず、ListViewを含むレイアウトを定義します。res/layout/activity_main.xmlとして以下の内容を作成または編集します。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/shoppingListView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>② 次に、ListViewにデータをバインドするためのコードをMainActivityに追加します。MainActivity.ktファイルを以下のように編集または作成します。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// ListViewのインスタンスを取得
val listView: ListView = findViewById(R.id.shoppingListView)
// 表示するデータのリスト
val shoppingItems = listOf("にんじん", "たまねぎ", "じゃがいも", "にく", "カレールー")
// ArrayAdapterを使用してListViewにデータをセット
val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, shoppingItems)
listView.adapter = adapter
}
}これだけでOKです！
ArrayAdapterとは？
リスト形式のデータ（例えば文字列のリスト）を画面上のリストビュー（ListView）などに簡単に表示するために使用されるヘルパークラスです。
簡単に言うと、「リストデータとビューをつなぐ橋渡し」の役割をしてくれます。
・第一引数には、コンテキスト（アプリケーションやアクティビティの現在の状態に関する情報を含むオブジェクト）
・第二引数には、リストの各アイテムに使用するレイアウトのリソースID
・第三引数には、リスト表示したいデータ
をそれぞれセットしていきます。
android.R.layout.simple_list_item_1というのは、標準で用意されているレイアウトファイルです。
たとえばリスト表示のレイアウト（デザイン）を変更したい場合は、
自作のカスタムファイルを作成して適用させるとよいでしょう！
それでは実際に画面を表示してみましょう！
RecyclerViewとは？
RecyclerView（リサイクラービュー）は、ListViewの進化版とも言えるウィジェットで、より柔軟で効率的な一覧表示が可能です。
特に、大量のデータや複雑なデータ構造を持つリスト、または動的に変更されるリストの表示に適しています。
RecyclerViewを使ってデータを一覧表示する方法
①まずは、プロジェクトのbuild.gradle（Module: app）ファイルにRecyclerViewライブラリの依存関係を追加します。
dependencies {
// 他の依存関係と一緒に記述
implementation 'androidx.recyclerview:recyclerview:1.2.1'
}② res/layout/activity_main.xmlにRecyclerViewを配置します。
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/toDoList"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:listitem="@layout/custom_list_layout" />
</androidx.constraintlayout.widget.ConstraintLayout>
tools:listitem="@layout/custom_list_layout"の部分は、リスト表示に適用させるレイアウトファイルを指定してください！
③ ↑で指定したレイアウトファイルをres/layout/custom_list_layout.xmlのように作成します。
これで一覧の各項目に自由にレイアウトを適用させることができます。
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toDoItemText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:textSize="18sp" />↑他にも、ImageViewを使って画像を配置できるようにしたり などなど使い方は様々です！
④ そして、MyAdapter.ktを作成し、RecyclerViewのためのAdapterとViewHolderを定義します。
class MyAdapter(private val dataSet: List<String>) :
RecyclerView.Adapter<MyAdapter.ViewHolder>() {
// 1. ViewHolderクラスの定義
class ViewHolder(view: View) : RecyclerView.ViewHolder(view) {
val textView: TextView = view.findViewById(R.id.toDoItemText)
}
// 2. 新しいビューを作成
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val shoppingListView = LayoutInflater.from(parent.context).inflate(R.layout.item_view, parent, false)
return ViewHolder(shoppingListView)
}
// 3. ビューの内容を交換（データのバインド）
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.textView.text = dataSet[position]
}
// 4. データセットのサイズを返す
override fun getItemCount() = dataSet.size
}ViewHolderとは？
アイテムビュー内の各サブビュー（例えばテキストビュー、イメージビューなど）への参照をキャッシュ（保持）してくれるものです。
スクロール中に新しいアイテムが画面に表示されるたびに、そのアイテムのビューをゼロから作成するのは非効率的で、パフォーマンスに悪影響を与えます。
ViewHolderを使用することで、一度作成したビューを再利用し、表示するデータだけを更新することができるのです。
⑤ 最後に、MainActivity.ktでRecyclerViewを設定し、データを一覧表示します。
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val recyclerView: RecyclerView = findViewById(R.id.toDoList)
recyclerView.layoutManager = LinearLayoutManager(this)
recyclerView.adapter = MyAdapter(listOf("そうじ", "せんたく", "かいもの", "ひるね"))
}
}
recyclerView.layoutManager = LinearLayoutManager(this)についてlayoutManagerは、RecyclerView内のアイテムがどのように配置されるかを管理します。LinearLayoutManager(this)を設定することで、アイテムが垂直方向に一列で並ぶリスト形式で表示されるようになります。
recyclerView.adapter = MyAdapter(listOf(...について
Adapterにリストデータを流し込んで、viewに表示できるようにしています。
ListViewよりステップが多いですが、慣れると便利に使えるようになります！
それでは画面に表示してみましょう〜！
まとめ
おつかれさまでした！
一覧表示は、アプリ画面において大変多く採用されるレイアウトですので
ぜひぜひマスターしてくださいね！
すだ技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？
それではまた次の記事でお会いしましょう！
コメント