2017/06/09

[Kotlin de Android] ListViewで2つのテキストを表示してみよう

前回 ListView について扱いましたが、今回は少しだけ発展させて 2 つのテキストを表示する方法について見ていきたいと覆います。

開発環境

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

プロジェクトを作ろう

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

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

画面を作ろう

プロジェクトが作れたらまずは画面を作っていきましょう。
作り方は前回と同じなので、こちらの手順と同様に作成してください。

ListView の ID も myListView としておいてください。

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

前回同様にまずは表示するデータを作っていきましょう。

今回は2つのテキストを表示したいので、Map の List を作ってあげます。
スクロールするところが見たいので20個ほど用意してみます。

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

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

val items = List<Map<String, String>>(20, { i -> mapOf("title" to "title-$i", "detail" to "detail-$i")})

1	val items = List<Map<String, String>>(20, { i -> mapOf("title" to "title-$i", "detail" to "detail-$i")})

Map の List なのですが、1行で済んじゃいます。Kotlin 素敵(笑)
前回より少しだけ複雑になりましたが、{} のなかで Map を生成しているだけなのでそれほど難しくないと思います。

2つ以上のデータを表示させたいときは必ず Map を使うようにしてください。
後でキー名が必要になってくるからです。

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

データができたので ListView に表示してみましょう。
色々やり方はあるのですが、今回は簡単に実装できるように Andriod が標準で用意している Layout やクラスを使っていきましょう。

前回は ArrayAdapter を使いましたが、今回は SimpleAdapter というのを使っていきます。
ListView に複数の部品を使いたいけど、単純に表示させたいだけと言ったときに使うと便利です。

onCreate() の最後に以下のように書いていきましょう。

val adapter = SimpleAdapter(
        this,
        items,
        android.R.layout.simple_list_item_2,
        arrayOf("title", "detail"),
        intArrayOf(android.R.id.text1, android.R.id.text2)
)
myListView.adapter = adapter

val adapter = SimpleAdapter(

this,

items,

android.R.layout.simple_list_item_2,

arrayOf("title", "detail"),

intArrayOf(android.R.id.text1, android.R.id.text2)

)

myListView.adapter = adapter

一行目では SimpleAdapter を生成しています。(引数が多いので複数行に分けていますが、1行で書けます)
第一引数には Context を指定するので this でOKです。
第二引数には表示したいデータを指定します。
第三引数はレイアウトのIDを指定するのですが、2行だけのレイアウトが Android 標準で用意されているのでそちらを使います。
第四引数には表示したいデータのキー名を指定します。ここでキー名が必要となってくるため Map が必要となってくるんですね。
第五引数には表示させる部品の ID を指定します。
ここで指定しているIDってなによ？ってなりますよね。
第三引数の android.R.layout.simple_list_item_2 を Command キーを押しながらクリックするとソースを表示できます。
simple_list_item_2.xml が開くと思いますので、そちらから ID を確認してみてください。
以下のようなソースになっていると思います。

[peg-image src=”https://lh3.googleusercontent.com/-xDRq8bXWNBE/WvFZ9JJyQ7I/AAAAAAAAauQ/Du_kK1LgGqwA8xPB8Z-v7Wz_UKIgGD77QCCoYBhgL/s144-o/kotlin_listview2_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553117839764636594″ caption=”” type=”image” alt=”kotlin_listview2_03.png” image_size=”1286×944″ ]

Text の方で見てあげると早いのですが、TextView が2つ定義されていて、それぞれ ID(android:id) が text1 と text2 になっています。これらを指定していることになります。

第四引数と第五引数の配列の並びも重要で、今回の場合だと、title のデータを text1 に、detail のデータを text2 に表示してくれます。どちらかがを逆に書けば逆に表示表示されるというわけですね。

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

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

[peg-image src=”https://lh3.googleusercontent.com/-dkNrj64Wr9o/WvFWNkZdCwI/AAAAAAAAat4/fnwLbYN5LRMBe8Mi1O-OY8Ph2u7HBVJ-gCCoYBhgL/s144-o/kotlin_listview2_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553113723909507842″ caption=”” type=”image” alt=”kotlin_listview2_01.png” image_size=”684×1222″ 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 -> }

引数の名前は自動生成されるものからわかりやすい名前に変更しています。

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

まずは view から TextView を取得したいのですが、findViewById() を使ってあげればOKです。
指定する ID は android.R.id.text1 としてあげます。
表示されている内容を取得したいので最後に .text としてあげましょう。

同様に detail のテキストも取得しましょう。

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

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

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

val detail = view.findViewById<TextView>(android.R.id.text2).text

}

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

myListView.setOnItemClickListener { adapterView, view, position, id ->
    val title = view.findViewById<TextView>(android.R.id.text1).text
    val detail = view.findViewById<TextView>(android.R.id.text2).text
    Toast.makeText(this, "$title: $detail", Toast.LENGTH_SHORT).show()
}

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

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

val detail = view.findViewById<TextView>(android.R.id.text2).text

Toast.makeText(this, "$title: $detail", Toast.LENGTH_SHORT).show()

}

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

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

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

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

[peg-image src=”https://lh3.googleusercontent.com/-nLBvTrU1P3M/WvFWNnHbstI/AAAAAAAAat4/OapHqszIuQI3kzXieTEQG2iS-yQj36BHACCoYBhgL/s144-o/kotlin_listview2_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6553113724639228626″ caption=”” type=”image” alt=”kotlin_listview2_02.png” image_size=”902×1298″ peg_single_image_size=”w300″ ]

とても簡単でしたが、ListView に2つのテキストを表示させる方法でした！