2017/06/09

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

スポンサーリンク

さて、前回にListViewを扱ってみたいと思います。
今回はテキストを2つ表示してみたいと思います。

完成版はこんな感じです。

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

今回も非常に単純です。
前回同様にクリックしたらToastで表示する、というところまでになります。

というわけで、今回のもくじはこんな感じになります。
今回も短めですので、ぜひ読んでいただけるとうれしいです!

もくじ

1. 開発環境
2. プロジェクトを作ろう
3. 画面を作ろう
4. データを作ろう
5. ListViewに表示してみよう
6. ListViewをクリックしてみよう
7. 動作確認してみよう

今回紹介したアプリのソースはGitHubにもあるので合わせてご参照ください。

1. 開発環境

  • AndroidStudio 3 Preview (Canary 3)
  • Kotlin
  • Java 1.8
  • macOS Sierra (10.12.3)

基本的にはAndroidStudio 2.3でも同じように作れます。

バージョンが変わるとエラーが出たり動かなくなったりするかもしれませんが、
エラーメッセージをよく読んで指示に従ったり、検索などして調べてみてくださいませ。

AndroidStudio と Java はすでにインストールされている前提で進めますのでご了承ください。

2. プロジェクトを作ろう

Android Studio 3 をお使いの方はこちらの記事を参考にしてプロジェクト作成とKotlinの設定を行なってください。

Android Studio 2.3をお使いの方は第1回の4. JavaをKotlinにしようまでを参考にしてプロジェクトの作成とKotlinの設定を行なってください。

プロジェクトの Application Name は「SimpleListView2」にしました。

Activity Name はデフォルトのまま「MainActivity」です。

3. 画面を作ろう

では、activity_main.xmlを開いて、画面を作っていきましょう。

部品を追加しよう

今回、必要となってくる部品はListViewだけです。

Palette の Containers の中にある 「ListView」 を画面に適当な位置に配置してください。

Kotlin de Android 第4回 ListViewを使ってみよう

部品の設定をしよう

次は部品の設定を行っていきましょう。
といっても、今回はIDを付けるだけです。
「myListView」 にしましょう。

部品の位置を設定しよう

部品の位置はLayoutEditorで設定してきましょう。

Android Studio 3 から少しだけ操作方法が変わっているので、バージョン別に記載しておきます。

Android Studio 3

WidthとHeightの設定である「match_parent」がなくなって、「match_constraint」に変わりました。
名前の通りで制約に合わせるということなようで、先に制約をつけておく必要があります。
右下の2つの制約をつけてください。縦横の中央に配置する制約ですね。

まず画面の中央に配置したいので、下の画面の整列に関する制約をつけてあげます。
右下の2つににあります。縦位置の中央と横位置の中央にする制約です。

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

制約がつけられたら、WidthとHeightの設定を「match_constraint」にしてあげてください。

kotlin_listview2-01.png

このような状態になっていれば大丈夫なはずです。
念のため、プレビューを画面サイズの違う機種にしてみて、ListViewが全画面表示になってればOKです。

Android Studio 2.3

全面に表示したいので、WidthとHeightを「match_parent」にすればいいのですが、部品を適当に配置しただけの状態ではなぜがうまく反映されません。

で、配置したsimpleListViewを選択して、左下に表示される「×」印をクリックしてください。

Kotlin de Android 第5回 ListViewを使ってみよう

こうすると、今ついている制約を全部削除してくれます。
制約自体はつけていないはずなですが、適当に配置した状態ではなにか制約が付いてしまっているのかもしれません。

そのあとにWidthとHeightを「match_parent」にしてください。
そうすると縦横ピッタリに配置されるはずです。

念のため、プレビューを画面サイズの違う機種にしてみて、ListViewが全画面表示になってればOKです。

4. データを作ろう

次はListViewに表示するためのデータを作っていきましょう。
と言っても普通にStringのListを作るだけです。

onCreate()の中に書いていきます。

今回はスクロールできるように少し多めにデータを作りましょう。
前回は項目が1つだったのでStringのArrayだったのですが、今回は項目が2つになるのでMapでデータを作って、それをListに入れていきます。

MutableListなのがちょっとあれですけども…。ここは仕方ないということで…。
他にいい方法を思いついたら更新するかもです。

5. ListViewに表示してみよう

先程作ったデータをmyListViewに表示してみましょう!

と言っても割りと簡単にできちゃいます。
ListViewの表示内容は自分で作ることもできますが、Androidが標準で用意してくれているものもありますので、今回も標準装備のものを使っていきます。

先程のlistの後に、ひとまず以下のように書いていきましょう。

引数の内容はコメントに書いたのでそちらを見てください。
ここでのキモとなる部分はコメントに from と to と書いた部分です。
from で書いたキー名の順番と to のアイテムのIDの順番が重要で、fromで一番目に書いた title は to のandroid.R.id.text1 に対応します。
title の value が android.R.id.text1 に反映されるということですね。

でも、これだけで表示されるので便利ですねー!

一応このandroid.R.layout.simple_list_item_2の中身がどのようになっているか確認しておきましょう。
Commandキーを押しながら(WindowsだとCtrlだったと思います…)、ID名をクリックするとファイルが開くはずです。
そうすると、このようになっているはずです。

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

ちょっと見慣れないタグもあったりしますが、今回は気にせずにスルーっと…。
重要なのは TextView が2つ定義されていて、それぞれのIDが text1、text2 になっているということです。

ここまでできたら、このSimpleAdapterをListViewに設定してあげます。

ListViewにはadapterというプロパティが用意されているので、そこに先程作ったListAdapterを入れてあげればOKです。
ただし、型変換をする必要があるので、as ListAdapterとしましょう。

ちなみにいきなりmyListViewという変数がでてきましたが、これは通常であればfindViewById()を使って部品を取得する必要があるのですが、このプロジェクトではKotlin Extensionを組み込んでいてるので、部品のIDをそのまま変数として使うことができるようになっているので注意してください。

ここまででできるとcnCreate()は以下のようになっているはずです。

これで表示されるはずなのでエミュレータで確認してみましょう。

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

ずらずらーっとテキストが2つある状態で表示されればOKです!

スポンサーリンク

クリックイベントを受け取ろう

Buttonのときもそうでしたが、クリックしされたという状態を受け取ってあげる必要があります。
ButtonのときはonClickプロパティにメソッド名を指定しておけばOKでしたが、ListViewの場合はちょっと違った仕組みになってきます。

ListViewの場合はListenerという仕組みを使っていきます。
こちらもイベントハンドラではあるのですが、書き方がかなり変わってきます。

色々書き方はあったりしますが、とりあえず以下のように書いていきましょう。
これもonCreate()の中に書いていきます。

ちなみにJavaだとこのように書きます。

JavaだとOnItemClickListenerをnewしてそのなかでメソッドをoverrideする感じなのですが、Kotlinだとなんともスッキリかけて素敵ですね♪

ちなみにOnItemClickの引数ですが、以下のようになります。
parent : Adapter
view : クリックされたView
position : クリックされた行番目
id : クリックされたViewのid

なので、viewからTextViewを取得して、名前を表示してみるようにしましょう。

まずはviewからTextViewを取得しないといけないのですが、findViewById()を使います。
ここで指定するIDですが、SimpleAdapterを作ったときにみたレイアウトファイルを見てみてください。
そうするとIDが指定されているのがわかると思います。text1text2いうIDですね。

なので、以下のように書いてあげれば title と detail の TextView を取得することができます。

Activityのレイアウトファイル内の部品であれば、Kotlin Extensionの機能でfindViewById()をする必要はないのですが、ここではきちんとやってあげる必要があるので注意しましょう。

TextViewが取得できたら、あとはToastで表示してあげればいいですね。

以下のように書いてあげます。

Toast.makeText() でToastを生成します。
第一引数はToastを表示するContextなので、this でOKです。
第二引数には表示したいメッセージを指定します。
第三引数は表示する時間になります。LENGTH_SHORTLENGTH_LONGがあるのでお好きな方を指定してください。
最後に.show() とすることでToastを表示してくれます。

たった1行でできちゃうんです。簡単ですよね♪
AlertDialogと違い、数秒表示されるだけなので、使用用途は限られてきますが、ちょっとした表示をするときにはとっても便利です。

ここまでで、onCreate() は以下の様になっているはずです。

さて、今回の実装はこれで全部できたので、動作確認をしてみましょう!

エミュレータで起動して、アプリが立ち上がったら、お好きな行をクリックしてみましょう。
画面下の方にToastでクリックした動物の名前が表示されれば完成です!

今回も非常に簡単な例でしたが、今後もう少し複雑なListViewの使い方についても取り上げたいと思っています。

スポンサーリンク