久しぶりにAndroid Studioを立ち上げて色々調べていたら、
Android Kotlin Extensions プラグインが非推奨になり2021年9月以降に削除されるよう予定である、
とのこと…
主に findViewById の代わりに使ったいたわけですが、それも使えなくなるということのようです。

じゃあ、どうするんだ?と思ったら、前から実装はされていた View Binding を使いなさい、ということらしいです。

詳しくは以下のGoogle Developersのブロクを参照ください。
Google Developers Japan: Kotlin Android Extensions の未来

というわけで、自分の備忘録も兼ねて使い方をまとめてみたいと思います。
いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。
(上記の記事では Kotlin Android Extensions の設置をしていますがそこは実施しないでください。この記事も書き直さないとですね…)

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「ViewBindindApp」にしましたが、お好きなものでOKです。

View Bindingを使えるように設定しよう

View Binding を使えるようにするには Gradleファイルを編集する必要があります。

build.gradle(:app)を開き、android {} の中に以下のように設定を追記します。

上記を追加したら、右上に黄色い帯が表示されるのでその中「Sync now」を必ずクリックしておいてください。
これをしないと設定が反映されません。

画面を作ろう

View Bindingを使う設定ができたので、まずは画面を作っていきましょう。
TextView と Button を使って少しだけアプリっぽくしてみます。

activity_main.xml を開いてレイアウトエディタにしておきます。
(なっていなかった場合は右上の「Design」をクリックしてください。)

もともとあるTextViewは削除しておきます。(制約がついてて面倒なので)

PaletteからTextViewとButtonを1つずつ配置します。

Buttonの設定をしていこう

Buttonから設定していきます。
まずIDをつけます。今回は「changeBotton」とします。

次にTextを設定します。「Change」としておきます。
(本来はstrings.xmlを使うべきですが、今回は省略します)

最後にButtonの位置を調整していきます。
親Viewに対して中央に配置したいので、以下の画像を参考に「Align」から「Horizontally in Parent」と「Vertically in Parent」を選びます。

これで以下のようになっていれば大丈夫です。

TextViewの設定をしていこう

次にTextViewも設定していきます。

まずIDをつけます。今回は「dateTextView」とします。

次にTextを設定します。「2021/04/22」としましたが、なんでもいいですし、あとでコードから入力するので消してしまっても大丈夫です。
なにか書いておかないとデザイン時にわかりにくいので設定しています。

textSizeを「18sp」に、textWeightを「bold」にして、少し大きめの文字にします。

最後に位置の設定します。
左右は親Viewの中心に、上下はButtonとの中心にしたいので、「Align」から「Horizontally in Parent」と「Vertically」を設定します。

これで以下のようになるかと思います。

スポンサーリンク

View Bindingを使ってTextViewに文字列を表示しよう

さて、諸々準備はできたので、実際にView Bindingを使ってみましょう!

View Bindingを有効にしておくと、XMLレイアウトファイルごとにバインディングクラスというものが作られます。
今回のレイアウトファイルはプロジェクトを作ったときに作られるactivity_main.xmlです。
この場合、バインディングクラスはキャメルケースのレイアウトファイル名+Bindingとなるので、「ActivityMainBinding」という名前のクラスが生成されます。

MainActivity.ktを開いて、適当な位置で「Activitymb」などと打ってみると以下のように入力候補が出てくるのが確認できると思います。

では、このバインディングクラスをActivityから使えるようにしていきます。

MainActivity.ktを開いて、クラスの最初の変数を定義します。
あとからインスタンスを生成するので、変数の定義にはlateinit varを使います。型はバインディングクラスになりますが、前述の通りはActivityMainBindingという名前になるのでそのように記述します。

次にonCreate()の中で初期化をし、使用できるようにしていきます。

バインディングクラスのinflate()メソッドを呼び出すことでインスタンスを生成することができます。
下記のソースの4行目ですね。生成したインスタンスを先に定義した変数bindingに代入しておきます。

次にこのバインディングクラスを使って画面を生成するために、setContentView()の引数をbinding.rootに変更します。

これでバインディングクラスのインスタンスを使って、TextViewなどにアクセスできるようになったので早速使ってみましょう!

まずはTextViewの内容を更新してみましょう。
今回は日時を表示してみたいと思います。

と言ってもとっても簡単でbinding.textViewと言ったように使うことができます。

onCreate()メソッドの最後に以下のように記述します。

ひとまず日時はフォーマットせずそのまま表示してみます。

これで実行すると、以下のように日時が表示されました!

View Bindingを使ってButtonをクリックしてみよう

次はButtonのクリック処理を書いてみましょう。
クリック処理はsetOnClickListenerを使ってあげればいいので、以下ように書きます。
ここでは一旦Toastを表示してみます。

これで実行してみて、ButtonをクリックしてToastが表示されればOKです!

ButtonをクリックしてTextViewを更新しよう

さて、最後にもう少しだけアプリっぽく行こうかと。
View Bindingの使い方がわかればいい人はこの先は読まなくても大丈夫です(笑)

Buttonをクリックするたびに、TextViewを更新するようにしてみます。

日時ですがSimpleDateFomatterを使ってもう少しだけ見やすくしてみます。

TextViewの更新処理はメソッドにまとめることにします。
というわけで、新しく updateTextViewというメソッドを作ります。

この中に処理を書いていきます。
今回はSimpleDateFormatの使い方などは省略します。いろんなサイトで解説されているので調べてみてくださいー(汗)

これで、フォーマットされた日時がTextViewに表示されるようになります。

まず、OnCreate()のTextViewの更新をしていたコードをこのメソッドを使うように書き換えます。

次にbinding.changeBotton.setOnClickListenerの処理も書き換えます。

これで良いので実行してみましょう。
TextViewの内容が以下のように変わっていて、Buttonを押すたびに表示が更新されていればOKです!

今回はView Bindingについて説明してみました。
最初の初期化だけがちょっと面倒ですが、それさえやってしまえばKotlin Android Extensionsのときのように面倒なことがないのでいいですね。
bindingって書くのが面倒な気もするけど、それがあればレイアウトファイルの部品だとわかりやすいからいいのかもしれないですね。
Kotlin Android ExtensionsだといきなりtextViewとか出てきてどこで定義しているだ?ってなりやすい気もしますし、そういう意味では可読性も上がるように感じます。

今まで公開している記事は全部 Kotlin Android Extensions を使っているからどうしよう…。
コードだけ更新しますかね…。

前回の記事を公開したのが2020年12月で、 Kotlin Android Extensions の廃止が告知されたのが2020年11月。
もう少し調べてからにすればよかった(笑)

前回RecycleView の最もシンプルな表示に仕方について解説しましたが、今回は表示するViewが2つになった場合の解説をしていきます。
2行表示されるものなので、Androidが標準で用意しているレイアウトを使っていきます。

目次

開発環境
プロジェクトを作ろう
画面を作ろう
表示するデータを作ろう
RecyclerViewを使うための設定しよう
データを表示するためのアダプターを作ろう
データを表示しよう
区切り線を表示しよう
項目をクリックできるようにしよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp2」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

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

次に「Palette」の左側から「Containers」を選択して、右側から「RecyclerView」を選択して、画面の適当なところにドラッグ&ドロップします。
以下のような状態になるかと思います。

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

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

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

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

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

表示するデータを作ろう

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

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

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

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

これ一行だけです。

今回は2次元のリストを作りたかったので ListMap を組み合わせています。
List>(20) とするとListを作ってくれます。
引数は初期化したい数です。初期化する内容はクロージャーで書くのですが、it はデフォルトで使える変数でカウンターになっています。 なので 0 から順に数値が入ってきます。
今回はタイトルと詳細といった感じのメモっぽいデータにしました。

データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

Kotlin Android Extensionsを使うようにしているので、myRecyclerViewというようにレイアウトエディタで設定したIDを変数名としてそのまま使うことができます。
apply{}としてそのなかに色々設定をしていきます。
applyの説明は長くなるのでここでは省きます。解説してくれているサイトがたくさんあるので検索してみてください)

setHasFixedSize(true)とすると、RecyclerViewのサイズを固定してくれるのですが、それによりパフォーマンスが向上するらしいです。
とりあえずおまじない的に書いておけばよさそうです。

次にどういったレイアウトにするかを指定します。

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

RecyclerViewにデータを表示するためにはRecyclerView.Adapterを継承したアダプターを作る必要があります。
MyAdapterがそれにあたります。
MyAdapterはのちほど作っていくのでここではエラーになっていて正解です。

ListViewに比べると単純なデータを表示するだけでもアダプターが必要になってくるので少し面倒にも感じますが、カスタマイズ性はRecyclerViewのほうが高いですし、慣れるとアダプターの作成もそれほど大変ではないかなと思います。

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです(笑)

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示するデータを格納したListを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。
まずはRecyclerView.ViewHolderを継承したクラスを定義します。
引数は親クラスにも渡す必要があるViewにしておきます。

今回のサンプルはTextViewがふたつあるレイアウトを使っていくので、ViewHolderのなかでTextViewを取得しておきます。
おなじみfindViewByIdを使っていきます。

viewにはレイアウトの親Viewが入ってくるので、親Viewに対してfindViewByIdで子Viewを取得してあげればOKです。
今回、リストのレイアウトとして使用するのはAndroid標準のandroid.R.layout.simple_list_item_2なのですが、このレイアウトは TextView が2つ配置されていて、それぞれIDが text1、text2 となっているのでそちらを使って TextView を取得します。
ViewHolderで使う変数名は title と detail とします。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

では、各メソッドを実装していきます。

上から順にやっていきますね。

onCreateViewHolderはViewHolderを作成して、データを表示するために使うViewを設定します。
レイアウトファイルからViewを取得して、ViewHolderのインスタンスにして返してあげればOKです。

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_2を使っています。
このファイルを見てもらうとわかるのですが、TwoLineListItem というViewのなかに TextView が2つあるものになります。
ここでは親Viewである TwoLineListItem が取得できればいいので、そのまま引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderには2つの TextView があるので、それぞれに対応するデータを設定してあげればOKです。

引数にViewHolderとリストの位置が渡されてくるので、memos[position]["title"]memos[position]["detail"]としてあげれば対応するデータが取得できるのでそれを title と detail に入れてあげればOKです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなりますね。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

処理がreturnのみなので、以下のように短くこともできます。

これでMyAdapterクラスが完成です。

データを表示しよう

さぁデータを表示しましょう!
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行!

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

DividerItemDecorationという区切り線用のクラスが用意されているのでそれを使います。
引数でLinearLayoutManager(this).orientationとすることでリスト表示の横線という感じになります。

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

最終的なonCreate()は以下のようになるかと思います。

ここまでできたら実行してみましょう。

区切り線も表示されました!

項目をクリックできるようにしよう

最後にリストの項目をクリックできるようにしてみます。
ListViewのときはsetOnItemClickListenerがありましたが、RecyclerViewにはないのでsetOnClickListenerを使って実装する必要があります。

まずはListenerを作成します。

MyAdapter クラスのなかに以下のようにListenerを作ります。

引数は今回は選択された位置とメモの内容を渡すようにしました。

次にListenerを保持しておく変数を定義しておきます。

あとで初期化するので、lateinit var で定義しておきます。

そのlistenerを初期化するためのメソッドを書きましょう。

次にクリックされたときの処理をかいていきます。
MyAdapteronBindViewHolder()で実装していきます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。

setOnClickListener の中では作成した listeneronItemClickListener を実行すればOKです。

ここまででlistenerの設定ができたので、MainActivityクラスの OnCreate() の方にクリック処理を実装していきます。

viewAdapter.setOnItemClickListener で設定します。MyAdapter.OnItemClickListener を設定しればOKです。

ここまで書くとエラーが出ていると思うので、赤い電球マークをクリックして、「implement members」を選択して、onItemClickListenerを追加します。

onItemClickListener のなかにクリック時の処理を書いていきたいのですが、今回は単純にToastを使って選択された行の title を表示したいと思います。

Toast の第一引数はContext ですが、thisだけだとどのthisなのかわからないのでthis@MainActivityとする必要があるようです。

これでクリック処理が実装ができたので、早速実行してみましょう!

適当な項目をクリックするとToastが表示されるようになりました!

ちょっと雑な説明になってしまいましたが、どなたかの参考になってら嬉しいです♪

年内に更新できてよかった…(笑)

RecycleView の最もシンプルな表示に仕方について解説していきます。
表示内容も文字列ひとつのみで、Androidが標準で用意しているレイアウトを使っていきます。
今回はリストが表示されるところまで見ていきたいと思います。

目次

開発環境
プロジェクトを作ろう
画面を作ろう
表示するデータを作ろう
RecyclerViewを使うための設定しよう
データを表示するためのアダプターを作ろう
データを表示しよう
区切り線を表示しよう
項目をクリックできるようにしよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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

プロジェクトを作ろう

プロジェクトはこちらの記事を参考に作成してください。

Activityのテンプレートは「Empty Activity」を選択してください。

プロジェクト名は「RecyclerViewApp」にしましたが、お好きなものでOKです。

このアプリでは Kotlin Android Extensions を使用しているのでそちらの設定もしておいてください。

画面を作ろう

プロジェクトが起動したら早速画面を作っていきましょう。

activity_main.xmlを開きます。通常は「Design」の状態で開かれると思いますが、違う状態になっていたら右上のある「Design」をクリックしてください。

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

次に「Palette」の左側から「Containers」を選択して、右側から「RecyclerView」を選択して、画面の適当なところにドラッグ&ドロップします。
以下のような状態になるかと思います。

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

次に右側の「Attributes」のなかの「Layout」を開いて「layout_width」と「layout_height」をそれぞれ「match_constraint」にします。

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

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

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

表示するデータを作ろう

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

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

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

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

これ一行だけです。

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

なので、データの作成はこれで完了です。

RecyclerViewを使うための設定しよう

RecyclerViewを使うにはソースからいくつか設定をする必要があります。

onCreate() にコードを追加いきます。

まずは最初に以下のようなコードを書いてあげます。

Kotlin Android Extensionsを使うようにしているので、myRecyclerViewというようにレイアウトエディタで設定したIDを変数名としてそのまま使うことができます。
apply{}としてそのなかに色々設定をしていきます。
applyの説明は長くなるのでここでは省きます。解説してくれているサイトがたくさんあるので検索してみてください)

setHasFixedSize(true)とすると、RecyclerViewのサイズを固定してくれるのですが、それによりパフォーマンスが向上するらしいです。
とりあえずおまじない的に書いておけばよさそうです。

次にどういったレイアウトにするかを指定します。

LinearLayoutManagerでリストのレイアウトが取得できます。それをmyRecyclerViewのlayoutManagerプロパティに設定してあげればOKです。

もう一つやることがあって、RecyclerViewにデータを表示するための設定です。
以下のように書きます。

RecyclerViewにデータを表示するためにはRecyclerView.Adapterを継承したアダプターを作る必要があります。
MyAdapterがそれにあたります。
MyAdapterはのちほど作っていくのでここではエラーになっていて正解です。

ListViewに比べると単純なデータを表示するだけでもアダプターが必要になってくるので少し面倒にも感じますが、カスタマイズ性はRecyclerViewのほうが高いですし、慣れるとアダプターの作成もそれほど大変ではないかなと思います。

データを表示するためのアダプターを作ろう

さて、次にアダプターを作成していきます。これがないとデータが表示されないので作らないとしょうがないです(笑)

まずはRecyclerView.Adapterを継承したクラスを作ります。
ファイルを分けてもいいですが今回はMainActivityクラス内に作成していきます。

クラス名はもちろん自由なのでお好きな名前で大丈夫です。
今回は引数は表示する文字列を格納したArrayを渡していますが、これ以外にも引数は増やすこともできます。
親クラスはRecyclerView.Adapter()ですが、MyAdapter.ViewHolderは後ほど作るのでここではエラーになっていて大丈夫です。

次にそのMyAdapter.ViewHolderを作っていきます。

以下のように書いてあげればOKです。

ViewHolderRecyclerView.ViewHolderを継承する必要があります。親クラスの引数にはViewを渡す必要がありますが、
今回はTextViewが一つだけあるレイアウトを使っていくのでこのように単純なものになっています。
レイアウトの中にViewが複数あるものだともう少し複雑になるのですが、今回はとにかくシンプルに!ということでこれだけにしておきます。

ViewHolderができたらMyAdapterクラスのメソッドを実装していきます。

MyAdapterクラスでエラーがでていると思うので、以下の画像の赤い電球マークをクリックして、「Implement members」をクリックします。

そうすると以下のような画面が表示されるので、すべてのメソッドを選択して、「OK」をクリックします。

メソッドが以下のように追加されたかと思います。

では、各メソッドを実装していきます。

上から順にやっていきます(笑)

onCreateViewHolderはViewHolderを作成して、データを表示するために使うViewを設定します。
レイアウトファイルからViewを取得して、ViewHolderのインスタンスにして返してあげればOKです。

今回はレイアウトファイルは作らずにAndroid標準のandroid.R.layout.simple_list_item_1を使っています。
このファイルを見てもらうとわかるのですが、TextViewが一つあるだけのものです。なのでViewを取得してTextViewにキャストしてあげます。
そのtextViewを引数にしてViewHolderを生成し、returnすればOKです。

次にonBindViewHolderでは、ViewHolderにデータを設定していきます。
今回、ViewHolderはTextViewのみなので、このTextViewにitemsのデータをひとつずつ設定してあげる感じです。

引数にViewHolderとリストの位置が渡されてくるので、items[position]としてあげれば対応するデータが取得できるのでそれをTextViewに設定するだけです。

表示内容が複雑になればなるほど、このメソッドはちょっとやることが多くなります。

最後にgetItemCountですが、これはデータのサイズを返してあげるだけです。
なので以下のようになります。

処理がreturnのみなので、以下のように短くこともできます。

これでMyAdapterクラスが完成です。
MyAdapterクラスのソースはこんな感じになります。

データを表示しよう

さぁデータを表示しましょう!
と言ってもすでに設定は終わっているので、アプリを実行するだけです。

早速実行!

無事、表示されましたー。

でも、区切り線がない…
ので、そのあたりも少しやってみたいと思います。

区切り線を表示しよう

RecyclerViewはそのままでは区切り線が表示されないので、そのあたりの設定もしていきましょう。

単純に区切り線を出すだけなら結構簡単です。

onCreateの中で以下のように書きます。

DividerItemDecorationという区切り線用のクラスが用意されているのでそれを使います。
引数でLinearLayoutManager(this).orientationとすることでリスト表示の横線という感じになります。

これをrecyclerViewに設定してあげればいいので、myRecyclerView.apply{}の中に以下のように書いてあげればOKです。

最終的なonCreate()は以下のようになるかと思います。

ここまでできたら実行してみましょう。

区切り線も表示されました!

項目をクリックできるようにしよう

最後にリストの項目をクリックできるようにしてみます。
ListViewのときはsetOnItemClickListenerがありましたが、RecyclerViewにはないのでsetOnClickListenerを使って実装する必要があります。

MyAdapteronBindViewHolder()で実装していきます。
今回は単純にクリックされた項目の文字列をToastで表示してみます。

onBindViewHolder()のなかでholder.textViewに対してsetOnClickListenerを設定します。
本当はListenerを作ったほうがいいのですが、今回は一番簡単なやり方にしています。

holder.textView.setOnClickListener のなかでToastを表示したいので、ActivtyのContextが必要となってくるので、MyAdapterの引数を増やしてContextを取得するようにします。

準備はできたのでToastを表示します。

ここまでできたら早速実行!

適当な項目をクリックするとToastが表示されるようになりました!

クリック処理はListViewよりは面倒な気もしますが、View一つずつクリックできるようになるのでこれはこれで便利だと思いました。

さて、今回は一番シンプルなRecyclerViewの使い方を紹介しました。
ListViewに比べると少し複雑な気もしますが、色々とカスタマイズできるようなのでまた紹介できたらいいなと思います。(いつになるかな…💦)

どなたかの参考になってら嬉しいです♪

前回までは Android が標準で用意しているレイアウトを使いましたが、
今回はオジリナルなレイアウトを使った ListView の作り方について見ていきたいと思います。

完成版はこのような形になります。

[peg-image src=”https://lh3.googleusercontent.com/-7KcKY8VfVdQ/W2unDOSoDaI/AAAAAAAAbFs/v_-n_0YkdZoPlW1BZrYE7nikUI2roP-3gCCoYBhgL/s144-o/kotlin_customlist_10.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542553777147298″ caption=”” type=”image” alt=”kotlin_customlist_10.png” image_size=”687×1181″ peg_single_image_size=”w400″ ]

Twitter のようなレイアウトを作っていきます。
クリックすると名前が表示されるようになっています。

目次

開発環境
プロジェクトを作ろう
画面を作ろう
画像ファイルを用意しよう
リストビューに表示するレイアウトを作ろう
リストビューに表示するデータを作ろう
リストビューにデータを表示しよう
リストをクリックしてみよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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

プロジェクトを作ろう

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

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

画面を作ろう

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

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

画像ファイルを用意しよう

今回は画像とテキストを2つ使ったオリジナルのレイアウトを作っていくので、表示する画像を用意しておきましょう。
適当なサイズ(1000*1000pxくらいにしてあります)の正方形の画像を5枚用意しました。
ご自身で用意してもらっていいですし、GitHubからダウンロードして使っていただいてもOKです。

用意した画像を Finder 等ですべて選択してコピーします。
Android Studio に戻って、ファイル一覧から app > res > drawable を開いてください。

[peg-image src=”https://lh3.googleusercontent.com/-H5mLhUSFtQk/W2k_IvMek8I/AAAAAAAAbE4/tkbaMieKomgm2om2w-Y_Qgj6XAJ0hEJCACCoYBhgL/s144-o/kotlin_customlist_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865349346366402″ caption=”” type=”image” alt=”kotlin_customlist_03.png” image_size=”572×482″ peg_single_image_size=”w300″ ]

drawable フォルダを選択した状態で貼り付けます。

そうすると、下のようなダイアログが出るので、drawable のほうを選択してOKボタンをクリックします。

[peg-image src=”https://lh3.googleusercontent.com/-R1auZ3Gj2mE/W2k_IrwxuvI/AAAAAAAAbE4/bKQrFKMfxLsU6DE2VtQYk1CYcKSdfXFewCCoYBhgL/s144-o/kotlin_customlist_04.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865348424874738″ caption=”” type=”image” alt=”kotlin_customlist_04.png” image_size=”830×856″ peg_single_image_size=”w400″ ]

すると、drawable フォルダに画像がコピーされたかと思いますので、これでOKです。

[peg-image src=”https://lh3.googleusercontent.com/-CB-JY3qN3_0/W2k_IpHSR_I/AAAAAAAAbE4/P24fe0QZe_4elHlfKtpc2Pm1tuxeH3nkQCCoYBhgL/s144-o/kotlin_customlist_05.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865347713976306″ caption=”” type=”image” alt=”kotlin_customlist_05.png” image_size=”576×676″ peg_single_image_size=”w300″ ]

これで画像の準備は完了です。

リストビューに表示するレイアウトを作ろう

オリジナルなレイアウトを作成するために Layout ファイルをまずは作ってあげます。

app > res > layout フォルダを選択して、右クリックをします。
New > Layout resource file を選択します。

[peg-image src=”https://lh3.googleusercontent.com/-lqpT9-2BIEY/W2k_IvduSSI/AAAAAAAAbE4/WSR_731Gnr4IQ_y2WxEWDj3o9WKn8Dl-ACCoYBhgL/s144-o/kotlin_customlist_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865349418699042″ caption=”” type=”image” alt=”kotlin_customlist_01.png” image_size=”1518×1658″ ]

レイアウト作成ダイアログが表示されるので、下記のように設定してOKボタンをクリックします。
File name: list_item
Root element: android.support.constraint.ConstraintLayout
Source set: main
Directory name: layout

[peg-image src=”https://lh3.googleusercontent.com/-lOnkw0BAsIU/W2k_Igjp-ZI/AAAAAAAAbE4/N6t1zGk0vQwh5MiNXJHuojRtRf2z4mKFwCCoYBhgL/s144-o/kotlin_customlist_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6586865345417050514″ caption=”” type=”image” alt=”kotlin_customlist_02.png” image_size=”1648×946″ ]

では作った list_item.xml を開いてレイアウトを作っていきましょう。

まず、ImageView を左側に配置します。このときなにかしらの画像を選択するように言われるので、先程用意した画像を選択してください。
この状態のままだと ImageView が大きすぎるので、layout_width と layout_height を 72dp にしておきます。
ID は flowerImgView にします

TextView を2つ、ImageViewの右側に配置します。Twitter のようなレイアウトになります。

1つ目の TextView は以下のように設定します。
ID: nameTextView
textStyle: Bold (B を選択します)
textSize: 18dp

2つ目の TextView は以下のように設定します。
ID: descTextView

ざっと設定してから位置を調整していきます。
このあたりは文字で説明すると大変なので、動画にしてあるのでそちらを見てみてください。

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

次にリストに表示するデータを作っていきましょう。
今回はお花の写真をその名前、説明を表示していくので、それぞれ List を作っていきます。

MainActivity.kt を開いてください。
onCreate() の中に以下のように書いていきます。

names は String の List でお花の名前の一覧ですね。
descriptions も String の List でお花の説明の一覧です。
images は Int の List で画像の ID の一覧です。
それぞれ、順番通りになるようにしておいてください。

次にこれらをまとめて扱うために Data Class を作っていきます。

今回は MainActivity クラスのなかに定義していきますが、別のファイルにしてもOKです。
以下のように書いてあげます。

では、この FlowerData クラスを使って List を作ります。

List の生成と初期化が1行でできちゃうので、Kotlin って便利。
(Kotlinのバージョンアップに伴うものなのか、前回から少しだけ書き方が変わっています。)

これでデータは完成です。

スポンサーリンク

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

次は実際にリストビューに表示するところを作っていくのですが、今までは ArrayAdapterSimpleAdapter といった Android 標準のアダプタを使ってきましたが、今回のような複雑なレイアウトになってくると独自にアダプタを作成する必要があります。

すべて MainActivity クラス内に書いていきます。

ViewHolder を作ろう

まずは ViewHolder というクラスを作っていきます。
あとで詳しく見ていきますが、リストはすべての行数分のレイアウトを生成するわけではなく、画面に表示されている分だけ生成して、リソースを使い回すという処理をしています。
そのために必要となってくるのが ViewHolder というものになります。
このクラスにレイアウトの部品を保持しておいて、その中身だけ入れ替える(TextView ならテキストを替える)というような動作になります。

ViewHolder はデータを保持しておくだけなので、データクラスで以下のように作成してあげます。

今回は独自レイアウト内には3つの部品が配置されているので、このように3つプロパティを用意しました。
配置した部品の分だけ用意してくださいね。

独自アダプタを作ろう

ではいよいよ独自アダプタを作成しましょう。
いろいろな作り方がありますが、今回は ArrayAdapter を継承して独自アダプタを作っていきます。

クラスの定義は以下のようになります。

FlowerListAdapter のコンストラクタ引数は コンテキストと先ほど作ったお花のデータのリストになります。
親クラスのコンストラクタ引数にもそのまま渡してあげます。親クラスの第二引数はレイアウトのIDを渡すのですが、あとで設定していくので、ここでは 0 としています。

では次に、あとで必要となってくるプロパティを先に用意しておきましょう。

レイアウトファイルを取得するために必要となる LayoutInflater を取得しておきます。
レイアウトを生成するたびに取得してもいいのですが、何度もやる処理なのでクラスプロパティとして持っておきます。

さて、次は実際にレイアウトにデータを反映していく部分を作っていきます。

getView メソッドをオーバーライドしてあげればOKです。

引数の position は行数、convertView はレイアウトのView、parent は親ビューといった感じです。

まずは必要な変数を用意しておきます。
このメソッドは View を返すのですが、convertView が null でなければそのまま使い、null だったらレイアウトを生成して返します。
Kotlin では引数は不変な変数なので書き換えができないため、別の変数に代入して使っていきます。(5行目)

それから先程作った ViewHolder も必要となっておくので変数を定義しておきます。(6行目)

次に、view が null だった場合に、レイアウトと ViewHolder を生成していきます。
ViewHolder は view の tag に保持しておくことで、レイアウトの使い回しをしています。

view が null 以外だった場合には、view の tag に ViewHolder が格納されているはずなのでそれを使ってあげます。

viewViewHolder の生成ができたら、 ViewHolder のプロパティにデータを反映させて、最後に view を返してあげます。

ImageView のところですが、FlowerData では画像のIDを保持しているだけなので、 BitmapFactory.decodeResource を使って BitMap に変換して上げる必要があります。
最初からBitMapにして持っていくというやり方でもOKだと思いますが、このあたりは好みの問題ですかね。
個人的にはBitMapのような大きなデータをずっと保持しておくのも気持ち悪いのでIDで保持するようにしています。

そんなこんなで、これでアダプターは完成です。

データを表示しよう

ではいよいよ、データの表示ですね。
といってもここは今までと同じようにすればOKです。

onCreate メソッドに以下のように追記します。
独自アダプタを生成して、myListView にセットしてあげるだけですね。

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

[peg-image src=”https://lh3.googleusercontent.com/-Ohlsipze6jY/W2unDBBHY5I/AAAAAAAAbFk/WyfteDz7HHIym0uT48fq9Yad1va39rziQCCoYBhgL/s144-o/kotlin_customlist_07.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542550214042514″ caption=”” type=”image” alt=”kotlin_customlist_07.png” image_size=”688×1224″ peg_single_image_size=”w300″ ]

あ、、、なんか各行の下のマージンがないのが微妙ですね(汗)
直しましょう。

list_item.xml を開きます。
ConstraintLayout を選択して、すべての Attributes を表示して、Padding の Botton を16dp にします。

[peg-image src=”https://lh3.googleusercontent.com/–mtBF4ngjxE/W2unDI8DrAI/AAAAAAAAbFk/XsuajUGFfiItpF7GmDRR85X6HprykvrIACCoYBhgL/s144-o/kotlin_customlist_08.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542552340311042″ caption=”” type=”image” alt=”kotlin_customlist_08.png” image_size=”1746×834″ peg_single_image_size=”w600″ ]

これでいいと思うので、もう一度エミュレーターで確認してみましょう。

[peg-image src=”https://lh3.googleusercontent.com/–X3HiBzSljw/W2unDHY9lHI/AAAAAAAAbFs/khEDL2aN_g8HrDncFWtO0n82AfMEQRwDgCCoYBhgL/s144-o/kotlin_customlist_09.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542551924675698″ caption=”” type=”image” alt=”kotlin_customlist_09.png” image_size=”684×1226″ peg_single_image_size=”w300″ ]

今度は良さそうですね!
無事、独自レイアウトが表示されるようになりました。

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

最後のクリック処理をさっと見ていきます。前回までとやり方は同じです。

onCreate メソッドの最後に次のように追記するだけです。

全て書いてしまいましたが、今まで通り、setOnItemClickListener に処理を書いてあげればOKです。
今回はお花の名前だけ表示するようしています。

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

[peg-image src=”https://lh3.googleusercontent.com/-7KcKY8VfVdQ/W2unDOSoDaI/AAAAAAAAbFs/v_-n_0YkdZoPlW1BZrYE7nikUI2roP-3gCCoYBhgL/s144-o/kotlin_customlist_10.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6587542553777147298″ caption=”” type=”image” alt=”kotlin_customlist_10.png” image_size=”687×1181″ peg_single_image_size=”w300″ ]

クリックして Toast が表示されればOKです!

前回よりは少し難しくなりましたが、独自のレイアウトを使った ListView の作り方について見ていきました。
最初は独自アダプタを作ったりするのが難しく感じるかもしれませんが、慣れるとそこまで難しくも感じなくなるかな、と。
いろいろなレイアウトの ListView をつくってみてください!

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

目次

開発環境
プロジェクトを作ろう
画面を作ろう
リストビューに表示するデータを作ろう
リストビューにデータを表示しよう
リストをクリックしてみよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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() の最後に以下のように追加します。

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

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

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

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

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

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

一行目では 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() のなかに以下のように書いていきます。

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

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

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

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

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

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つのテキストを表示させる方法でした!

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

目次

開発環境
プロジェクトを作ろう
画面を作ろう
リストビューに表示するデータを作ろう
リストビューにデータを表示しよう
リストをクリックしてみよう

いつも通りプロジェクト一式はgithub にありますので、そちらも合わせて参考にしてみてください。

開発環境

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ってカテゴリ嫌ですねw
できれば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() の最後に以下のように追加します。

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

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

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

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

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

これだけです。
一行目では 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() のなかに以下のように書いていきます。

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

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

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

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

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 の使い方でした!