2017/05/15

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

スポンサーリンク

さて、今回はListViewを扱ってみたいと思います。
といってもListViewは奥深いので、今回は最もシンプルなListViewの説明のみにしてみます。

ListViewはAndroidアプリでよく見る一覧表のような画面ですね。
今回は単純に各行にひとつの文字列を表示する、そしてクリックしてみる、といったことをしてみたいと思います。

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

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

非常に単純です。
動物の名前が表示されて、クリックするとその名前が表示されるだけです。
単純すぎてつまらないかもしれませんが、なにせListViewは色々やれることがあるので、全部やると切りがないので最初はここからスタートです!w

もう一つ新しい要素しては、名前の表示に使うToastですね。
トースト?パン?美味しそう。と思ってしまいますが、Toastには乾杯とか祝杯とかそういう意味もあるようで。
結局なんでトーストなんでしょうね。 なにはともれあれ、Toastと申します。
このToastもいろいろと奥深かったりしますが、今回は一番シンプルな使い方だけ見ていきます。
といっても、普通に使う文にはとっても簡単です♪

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

もくじ

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

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

1. 開発環境

  • AndroidStudio 2.3
  • Kotlin
  • Java 1.8
  • macOS Sierra (10.12.3)

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

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

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

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

プロジェクトの Application Name は「SimpleListView」にしました。
Activity Name はデフォルトのまま「MainActivity」です。

3. 画面を作ろう

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

部品を追加しよう

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

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

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

部品の設定をしよう

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

部品の位置を設定しよう

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

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

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

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

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

そのあとにWidthとHeightを「match_parent」にしてください。
そうすると縦横ピッタリに配置されるはずです。
念のため、画面サイズを変えてみて、全面ピッタリに表示されれはOKです。

さて、これで画面は完成です。今回は楽ちんですね(笑)

4. データを作ろう

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

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

これだけです…(汗)
ListViewがちゃんとスクロールするのも見たい!っていう場合はもっと要素を増やしてみてくださいませ。
もちろん動物の名前じゃなくてもお好きな文字列のリストにしてもらってOKです。

5. ListViewに表示してみよう

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

と言っても実はとっても簡単。ListViewの表示内容は自分で作ることもできますが、Androidが標準で用意してくれているものもありますので、今回は標準装備の中でも一番単純なものを使っていきます。
一行の中にTextViewが1つだけあるものになります。

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

ArrayAdapterというのはListView(など)にデータを渡すためのクラスです。
第一引数はContextなのでthisとしておけばOKです。
第二引数は行のレイアウトを指定するのですが、先程も説明した通りAndroid標準のものを使いたいので、android.R.layout.simple_list_item_1 を使っていきます。
それから、第三引数にはデータの一覧を渡せばいいので、animals としましょう。

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

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

ごにょごにょと色々書いてはありますが、よく見ると単にTextViewが1つ定義されているだけなのですね。
もちろん自分でレイアウトファイルを作ることもできるのですが、それはまた別に記事にしたいと思います…。
ここではこんなレイアウトファイルを使うんだなーと頭の片隅にちょっぴり入れておきましょう。

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

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

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

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

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

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

つらつらつらっと動物のお名前が表示されればOKです!

スポンサーリンク

6. ListViewをクリックしてみよう

ListViewの使い方としては行をクリックしたら次の画面に遷移して、なにかしらが表示される、というようなものが多いと思いますが、今回は画面遷移は行わずメッセージを出すだけにしてみたいと思います。

メッセージの表示にもいろいろあり、前回使ったのはAlertDialogでしたが、今回はToastというのを使ってみましょう♪

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

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ですが、ArrayAdapterを作ったときにみたレイアウトファイルを見てみてください。
そうするとIDが指定されているのがわかると思います。text1というIDですね。

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

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

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

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

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

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

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

7. 動作確認してみよう

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

エミュレータで起動して、アプリが立ち上がったら、お好きな動物の名前をクリックしてみましょう。

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

このように画面下の方にToastでクリックした動物の名前が表示されれば完成です!

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

スポンサーリンク