[Kotlin de Android] ListViewを使ってみよう

ListViewの最もシンプルな使い方について解説しています。
レイアウトはAndroid標準の一番シンプルなアイテム1つだけのものを使い、データを表示します。
それからアイテムをクリックする、ということまでやってみます。
Toastの使い方も見ていきます。

開発環境

Android Studio 3.1.1
JDK 1.8
Kotlin 1.2
macOS(Windows でも基本的には同じように開発できると思います。)

プロジェクトを作ろう

では早速プロジェクトを作っていきましょう。
プロジェクトの作成方法は[Kotlin de Android] 最初はやっぱりHelloWorld を参考にしてみてください。

各画面での設定は以下の通りです。
プロジェクトの名前は「simpleListView」
「Include Kotlin support」にチェックを入れるのをお忘れなく。
Activityの種類は「Empty Activity」
Activityの名前は「MainActibity」

画面を作ろう

プロジェクトが作れたらまずは画面を作っていきましょう。

activity_main.xml を開いて、Design タグを開きます。

まず最初から配置してある TextView は不要なので削除します。選択して Delete キーで OK です。

次に「Palette」の左側から「Legacy」を選択して、右側から「ListView」を選択します。

[peg-image src=”https://lh3.googleusercontent.com/-U8mHiSTshO8/Wt8DFLevQ8I/AAAAAAAAaqw/jQ0-rpTJ3QocsBGa6BHtAHF3zY-mD4CUACCoYBhgL/s144-o/kotlin_listview_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6547955770735936450″ caption=”” type=”image” alt=”kotlin_listview_01.png” image_size=”452×502″ ]

ところで、Legacyってカテゴリ嫌ですねｗ
できればRecyclerViewを使えってことなんでしょうが…。そのうちRecyclerViewについても扱いたいと思います。

で、ListView を選択したら画面の適当な位置にドラッグ＆ドロップします。

まずは位置を調整してあげましょう。配置した ListView を選択して、ツールバーの「Align」ボタンから「Horizontally in Parent」と「Vertically in Parent」を選択します。

[peg-image src=”https://lh3.googleusercontent.com/-_RCxAqVls0Q/Wt8DFKAQDRI/AAAAAAAAaqw/Hz83hmfDtOQMXfSFpTV9gogPARd7aKC_wCCoYBhgL/s144-o/kotlin_listview_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6547955770339626258″ caption=”” type=”image” alt=”kotlin_listview_02.png” image_size=”424×266″ ]

次に右側の「Attributes」のところで「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

[peg-image src=”https://lh3.googleusercontent.com/-lgt5lf7h934/Wt8DFEqKrNI/AAAAAAAAaqw/HDUFVB3vdGoGUHe36S34zjzfNA9RD2RWgCCoYBhgL/s144-o/kotlin_listview_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6547955768904821970″ caption=”” type=”image” alt=”kotlin_listview_03.png” image_size=”564×270″ ]

これで位置の調整ができたので、横画面にしたり、画面サイズを変えても ListView が画面いっぱいに表示されることを確認しておきましょう。

そうしたら、IDを付けてあげます。
「Attributes」の「ID」を「myListView」にしておきます。

これで画面が完成です。以下のようになっていればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-eYjECdMwCu8/Wt8DFIxGwlI/AAAAAAAAaqw/TryRhMIAH0AiTxAqiVAWX4D6m-Z7N-z4ACCoYBhgL/s144-o/kotlin_listview_04.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6547955770007667282″ caption=”” type=”image” alt=”kotlin_listview_04.png” image_size=”1930×1136″ ]

今回は割りと単純ですが、ここまでの流れを動画にしたので、参考にしてみてください。

リストビューに表示するデータを作ろう

早速 ListView を表示したいところですが、なにがしかのデータがないといけないでまずはデータを作っていきましょう。

といっても今回は一行表示するだけなので、文字列の配列を用意してあげればいいでしょう。
スクロールするところが見たいので20個ほど用意してみます。

MainActivity.kt を開いてください。

onCreate() の最後に以下のように追加します。

val items = Array(20, { i -> "Title-$i" })

1	val items = Array(20, { i -> "Title-$i" })

Kotlin だと1行で済んじゃいます。素敵。

Array() とすると配列を作ってくれます。配列の中身のデータ型は生成するデータから推論してくれるので書かなくてもOKです。
第一引数は初期化したい数です。第二引数はクロージャーになっていて、i はカウンタなので 0 順に数値が入ってきて、 -> の後ろの処理を第一引数で指定した数分実行してくれます。
これだけで、Title-0 から Title-19 という文字列の配列を作ってくれます。便利！

なので、データの作成はこれで完了です(笑)

リストビューにデータを表示しよう

データができたので ListView に表示してみましょう。
ListViewに表示するためには ListAdapter を継承したクラスと作成してごにょごにょする必要があるのですが、
今回のような文字列一行だけといった単純なものについてｈ Android 標準の Adapter を使うことができます。
onCreate() の最後に以下のように書いていきましょう。

val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items)
myListView.adapter = adapter

1 2	val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items) myListView.adapter = adapter

これだけです。
一行目では ArrayAdapter というのを生成しています。
第一引数には Context を指定するので this でOKです。
第二引数はレイアウトのIDを指定するのですが、一行だけのレイアウトが Android 標準で用意されているのでそちらを使います。
第三引数には先程作ったデータを指定します。ちなみに Array だけでなく List でもOKです。

生成した Adapter を myListView にセットしてあげれば表示されます。

ではここまでできたら一度エミュレータで確認してみましょう。

[peg-image src=”https://lh3.googleusercontent.com/-_fqhE6e9GqI/Wt_poyXxNvI/AAAAAAAAarY/Ak-51ir2CdYJhbwYYmHyl-Zal3LZ6OqCACCoYBhgL/s144-o/kotlin_listview_05.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6548209270145496818″ caption=”” type=”image” alt=”kotlin_listview_05.png” image_size=”684×1214″ peg_single_image_size=”w300″ ]

Title−0 から Title-19 まで表示されていればOKです。

リストをクリックしてみよう

最後にリストをクリックできるようにしてみましょう。今回は画面遷移などはせず Toast で表示させるだけにしておきます。

ListView のクリックイベントを検知するには onCreate() のなかに以下のように書いていきます。

myListView.setOnItemClickListener { adapterView, view, position, id ->
}

1 2	myListView.setOnItemClickListener { adapterView, view, position, id -> }

Kotlin だと実にシンプルに書けますねー。
引数の名前は自動生成されるものからわかりやすい名前に変更しています。
今回は view しか使わないので、以下のように書いてもOKです。

myListView.setOnItemClickListener { _, view, _, _ ->
}

1 2	myListView.setOnItemClickListener { _, view, _, _ -> }

これでクリックイベントが検知できるようになったので、view から表示内容を取得して、Toast で表示してみます。

まずは view から TextView を取得したいのですが、findViewById() を使ってあげればOKです。
指定する ID は android.R.id.text1 としてあげます。

myListView.setOnItemClickListener { _, view, _, _ ->
    val textView = view.findViewById<TextView>(android.R.id.text1)
}

myListView.setOnItemClickListener { _, view, _, _ ->

val textView = view.findViewById<TextView>(android.R.id.text1)

}

そうしたら、Toast で表示してあげればいいので次のように書いていきます。

myListView.setOnItemClickListener { _, view, _, _ ->
    val textView = view.findViewById<TextView>(android.R.id.text1)
    Toast.makeText(this, "Clicked: ${textView.text}", Toast.LENGTH_SHORT).show()
}

myListView.setOnItemClickListener { _, view, _, _ ->

val textView = view.findViewById<TextView>(android.R.id.text1)

Toast.makeText(this, "Clicked: ${textView.text}", Toast.LENGTH_SHORT).show()

}

Toast.makeText() で生成してあげます。
第一引数は Context なので this としておきます。
第二引数は表示したい文字列です。ここではリストに表示されているテキストにしています。
第三引数は表示時間です。SHORT か LONG を選べるのでお好みで選択すればいいでしょう。

最後に show() メソッドを呼ぶことで表示されます。

では、エミュレータで動作確認をしていきましょう。

適当な行をクリックして、以下のように Toast が画面下部に表示されればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-XLthseZCpro/WuVmpTvFGfI/AAAAAAAAas4/pw10cTAzZ3kO7fDrnnFgkMGrLVYFofkIgCCoYBhgL/s144-o/kotlin_listview_06.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6549754092938664434″ caption=”” type=”image” alt=”kotlin_listview_06.png” image_size=”681×1224″ peg_single_image_size=”w300″ ]

簡単でしたが、一番シンプルな ListView の使い方でした！

目次