【Android】クリックできるListViewの作り方【Kotlin】

情報を一覧表示できるListViewの使い方とクリックイベントを実装方法を紹介します。何かしらの選択画面や設定操作画面、データの一覧表示時などで活躍します。

ListViewで要素を一覧表示
1. サンプルコード
ListViewをクリックできるようにする
さいごに

ListViewで要素を一覧表示

ListViewに要素を設定するにはAdapterクラスを活用します。ListViewにデータを表示する手順は以下の通り。

リストデータの用意。
リストデータを用いてAdapterオブジェクトの生成
ListViewにAdapterオブジェクトを反映させる

AdapterにはListViewの各行に表示させるデータを管理する役割があるようです。

サンプルコード

画像のようなListViewを表示するサンプルを作成します。

xmlは以下の通り(見やすさの都合で背景色を設定してます)。

<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <ListView
        android:id="@+id/lvSample"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        android:background="#eee"/>
</LinearLayout>

Kotlinは以下の通り。

class MainActivity : AppCompatActivity(),AdapterView.OnItemClickListener {

    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        val view = binding.root
        setContentView(view)


        // 1.リストビュー用のリストデータを作成
        var tvElement = mutableListOf<String>("AAA", "BBB", "CCC")

        // 2.アダプタオブジェクトの生成
        val adapter = ArrayAdapter(applicationContext, android.R.layout.simple_list_item_1, tvElement)

        // 3.リストビューにアダプタオブジェクトを設定
        binding.lvSample.adapter = adapter
    }
}

ListViewをクリックできるようにする

ボタンと似たような方法でListViewのタップイベントを設定できます。

今回はタップされた行の要素をトーストで表示するサンプルを作成しました。

onCreate内にクリックリスナの設定を追記、またクリックリスナクラスを追記します。

class MainActivity : AppCompatActivity() {

    private lateinit var binding : ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        /*--------  省略  --------*/

        // リストビューのクリックリスナを設定
        val listItemClickListener = ListItemClickListener()
        binding.lvSample.onItemClickListener = ListItemClickListener()

    }

    // リストビューのクリックリスナクラス
    private inner class ListItemClickListener : AdapterView.OnItemClickListener{
        override fun onItemClick(parent: AdapterView<*>?, v: View?, position: Int, id: Long) {
            // タップされた要素の取得
            val item = parent?.getItemAtPosition(position) as String

            //確認用Toast
            Toast.makeText(applicationContext, "Touch ->:"+item,Toast.LENGTH_SHORT).show()
        }
    }

}

タップすると以下のようなトーストが表示されます。