さて、今回はデータの永続化について見ていきたいと思います。
一番簡単な方法はSharedPreferencesを使う方法なので、まずはこちらから。

簡単に使えますが、キーと値のペアを保存するだけなので、アプリの設定値などごく小さい単位のデータの保存に使います。
大きなデータには向かないのでご注意を。

今回はSharedPreferencesの使い方だけ見ていきたいと思うので、AndroidStudioのプロジェクトは作らずに、コードの紹介だけしたいと思います。
いろいろなサイトで紹介されていますが、Kotlinでの書き方を紹介します。

もくじ

1. SharedPreferencesを生成してみよう
2. データを読み込んでみよう
3. データを書き込んでみよう
4. 複数のSharedPreferencesを使ってみよう

1. SharedPreferencesを生成してみよう

まずはSharedPreferenceのインスタンスを生成する必要があります。と言っても簡単でActivityにgetPreferencesというメソッドが用意されているのでそれを使います。

引数はアクセス権限の指定で、いろいろモードはあるのですが、現在推奨されているのはMODE_PRIVATEのみなようです。このアプリ内のみで使う、といった指定ですね。

上記の例はActivityから使う場合の書き方です。
もし、Fragmentなどから使う場合にはContextの取得が必要なので、以下のように書いてください。

以降はActivity内で実行することを前提として話を進めます。

2. データを読み込んでみよう

SharedPreferenceからデータを読み込むにはgetInt()getString()といった具合に、取得したいデータのデータ型に応じたメソッドを使う必要があります。

例えば、「count」というキー値に対応しているデータを取得したい場合には以下のように書いてあげます。

1つ目の引数がキー値ですね。2つ目の引数はキーが存在しない場合のデフォルト値になります。

なので上の例だと、countというキーのデータがSharedPreferenceにあればそれを取得、もしキーがなければ0が取得できるというわけです。

3. データを書き込んでみよう

データの書き込みはちょっと面倒だったりします。
SharedPreferenceのインスタンスから、SharedPreferences.Editorというのを生成して上げる必要があります。
それから、putInt()putString() といったメソッドを使用してキーと値をセットしたあとに、commit()メソッドを使って保存する、といった流れになります。

上記の例は、SharedPreferencesからcountのデータを取得して、countを更新後、再びSharedPreferencesに書き込む、といったものです。

最後のcommit()は忘れがちなのでご注意を…。(私はそれでしばらく悩みましたw)

書き込むのが1つだけでshardPrefEditorとかいちいち変数を用意するのが面倒な場合は、下記のようにまとめて書いちゃうことも可能です。

4. 複数のSharedPreferencesを使ってみよう

保存する値が少ない場合などは今までのやり方で問題ないのですが、例えば画面毎に分けたいなどといった場合は、複数個生成することが可能です。

SharedPreferencesのインスタンスを作るときに、getSharedPreferences()というメソッドを使ってあげればOKです。

1つ目の引数は識別子になります。ここを変更することで複数のSharedPreferencesを持つことができるようになります。
識別子は「com.example.myapp.PREFERENCE_FILE_KEY」といったようにアプリを一意に識別できるような名前にすることが推奨されています。

2つ目の引数はgetPreferences()のときと同じようにアクセス権限を指定します。こちらもMODE_PRIVATEを使うようにしましょう。

読み書きは今までと同様です。
シンプルなサンプルですが、次のように使えばOKです。ここでは同じActivityで2つのSharedPreferencesを使うようになっています。

SharedPreferencesの識別子が違うものになっていれば、キー値は同じものが使えます。
このソースが実行されるたびに、count1は1ずつ、count2は2ずつカウントアップされていきます。
本来、アプリの設定値などを保存するためのものなので、このサンプルの使い方はそれとは違うものになっているので、動作の参考にとどめてくださいね。

簡単でしたが、SharedPreferencesのKotlinでの使い方の紹介でした。

さて、前回に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の使い方についても取り上げたいと思っています。

さて、今回は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の使い方についても取り上げたいと思っています。

今回は画面遷移についてやっていきたいと思います。

Androidの画面遷移はIntentというものを使っていきますが、Intentの機能はとても幅広いです。
今回のようにアプリ内のActivityの切り替えのときに使ったり、
端末にインストールされている他アプリにデータを渡すときにも使われます。

今回は単純な例ではありますが、そのIntentを使って、データを渡しつつ画面を遷移する、
というのをやってみたいと思います。

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

起動すると、テキストボックスとボタンがあるので、

kotlin-intent-101.png

適当にテキストを入力して、Clickボタンを押すと、

kotlin-intent-102.png

二つ目の画面に遷移して、テキストボックスに入力されていた内容が表示される
というなんとも単純なアプリです。

kotlin-intent-103.png

テキストボックスが空だった場合はアラートメッセージを出すようにもしてみましょう。

kotlin-intent-104.png

もくじ

1. 開発環境
2. プロジェクトを作ろう
3. 画面を作ろう
4. もう一つ画面を作ろう
5. ひとまず画面遷移をしてみよう
6. 画面を戻ってみよう
7. 次の画面にデータを渡してみよう
8. 前の画面からデータを受け取ってみよう
9. アラートを出してみよう
10. 動作確認してみよう

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

1. 開発環境

今回の開発環境は以下の通りです。

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

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

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

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

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

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

3. 画面を作ろう

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

部品を追加しよう

今回、必要となってくる部品はEditTextとButtonになります。

EditTextは Palette の Text の中にある、「Plain Text」 を画面に適当な位置に配置してください。

kotlin-intent-301.png

Buttonも適当な位置に配置しておきましょう。

部品の設定をしよう

それぞれの部品の設定を行っていきましょう。
いつもはIDをつけるのですが、今回は同じ部品はないのでIDはデフォルトのまま使っていきましょう。
EditText は 「editText」、 Buttonは「button」 になっているはずです。

次にそれぞれの部品の text を変えていきましょう。
直接変えてもいいのですが、strings.xmlを使うことが推奨されているので、そうしておきましょう。
strings.xmlを直接編集してもいいですが、前回同様に設定画面が用意されているのでそちらを使っていきましょう。
部品を選んで、Properties の中になる text の「…」 ボタンをクリックします。

kotlin_omikuji_02.png

Resourceの設定画面になるので、右上の「Add new resource」をクリックして、新しいStringを追加します。

それぞれの部品は以下のように設定しましょう。
editTextは最初は空欄にしたいので、空の文字列を指定しておきます。

text Resource name Resource value
editText blank_text
button button_text Click

それから、editText はプレースホルダーを設定しておきましょう。
properties の hint を設定してあげればOKです。
ここもstrings.xmlから指定するようにしたいので、上記のやり方と同じようにResourceを追加してあげます。

hint Resource name Resource value
editText hint_text テキストを入力してください

editTextはもう一つ設定があって、input type を 「text」 にしておきましょう。
ここではパスワードやURL、時間と言った入力したい内容にあったものを選んでおくと、それぞれに対応したスタイルに変えてくれます。
パスワードだったら入力した文字を***にしてくれたりするものですね。
今回はとくに制限はないのでnoneでもいいと思うのですが、一応設定しておきます。

部品の位置を設定しよう

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

buttonは中央に配置したいので、ツールバーのalignから「Center Horizontally in Parent」と「Center Vertically in Parent」を設定します。

editTextはalignから「Center Horizontally in Parent」を設定して左右中央に配置してから、
editTextの下端とbuttonの上端を接続して、マージンを24にします。
editTextのlayout_width は「match_parent」にして、左右のマージンを16に設定します。

と言ってもわかりにくいので、動画にしてみたので参考にしてみてください。

これで最初の画面は完成です。

4. もう一つ画面を作ろう

続いて、遷移先の画面を作っていきましょう。

Activityを追加しよう

画面左側のファイル一覧から、app/java/ の中にあるパッケージ名を選択して、右クリックをします。
New > Kotlin Activity を選択してください。

kotlin_intent_04.png

テンプレートは「Empty Activity」
Activity Name は「SubActivity」にしてください。
他の設定はデフォルトのままでOKです。

部品を追加しよう

遷移先の画面で必要となってくる部品はTextViewになります。
画面の適当な位置に配置しておいてください。

部品の設定をしよう

それぞれの部品の設定を行っていきましょう。

こちらの画面もIDはデフォルトのまま使っていきましょう。textViewにはっているはずです。

次にtextViewの text を変えておきましょう。
まぁ、プログラムから書き換えてしまうので設定しなくてもいいのですが、一応…。
こちらもいつもの通り、strings.xmlを使うようにします。
部品を選んで、Properties の中になる text の「…」 ボタンから値を設定しましょう。

textViewは以下のように設定しましょう。

text Resource name Resource value
textView sub_view_text SubView

部品の位置を設定しよう

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

textViewは中央に配置したいので、ツールバーのalignから「Center Horizontally in Parent」と「Center Vertically in Parent」を設定します。

こちらは単純な例ではありますが、一応動画にしてみたのでよかったら参考にしてみてください。

さて、これで画面は完成したので、次はいよいよ画面遷移をさせてみましょう!

5. ひとまず画面遷移をしてみよう

まずはMainActivityからやっていきましょう。

メソッドを作ろう

まずはbuttonがクリックされたときの処理を書いていきたいのですが、メソッド名を指定しておかないといけないので、
の設定からやっておきます。

activity_main.xml を開いて、buttonを選択します。
properties の onClick に「changeActivity」と入力しておきます。

MainActivity.kt を開きましょう。
onCreate()の下の方にメソッドを作っていきます。引数でViewを取るようにする必要があるので忘れずに。

画面遷移をしてみよう

とりあえず、SubActivityへ遷移するようにしてみましょう。
先程作ったchangeActivity()の中に、以下のコードを書いてあげます。

Intentを生成します。引数は自分自身のインスタンスと遷移先のクラスを指定します。
Javaのときのクラスの指定はSubActivity.class と書いていましたが、Kotlinの場合は SubActivity::class.java というような書き方になります。

KotlinでJavaクラスを指定する場合にはclass.javaとします。
SubActivityはKotlinで書かれていますが、Intentの引数がJavaクラスを受け取るようになっているので.javaとする必要があるようです。

次のstartActivity()でintentで指定したアクティビティを起動します。
これで、とりあえずは遷移するようになるので、エミュレータで確認をしてみましょう。

アプリが起動したら、Clickボタンを押してみます。
そうすると、画面が切り替わってSubActivityが表示されるはずです。

kotlin-intent-500.png

これが画面遷移の基本的なやり方になります。

6. 画面を戻ってみよう

先程の画面からMainActivityに戻るには端末の戻るボタンでもOKなのですが、
よくある、画面上部のナビゲーションバーのところに戻るための←ボタンを表示する方法もやってみましょう。
ここはKotlinに特化した内容ではないのですが、せっかくなのでちょっとやっておきましょう。

これが結構簡単でマニフェストファイルを修正するだけでOKです。

AndroidManifest.xmlを開きます。(app → manifests → AndroidManifest.xml)

以下のようなactivityタグがあると思います。
ここでSubActivityの設定をしてあげます。

以下のように android:parentActivityName というのを追加して、親のアクティビティを指定してあげます。

これだけで←ボタンが追加されるのでエミュレータで確認してみましょう。

エミュレータが起動されたら、Clickボタンをクリックして、画面遷移をしてみます。
そうすると、左上に←ボタンが表示されているのがわかると思います。

kotlin-intent-600.png

クリックするとMainActivityに戻るはずです。
これで元に画面に戻る機能は実装完了です。

7. 次の画面にデータを渡してみよう

次はeditTextに入力されたテキストをSubActivityに渡してみましょう。

テキストを取り出してみよう

まずはeditTextからテキストを取り出しておきます。

2行目の部分ですが、editText.text は Editable 型で返ってくるので、toString()でStringに変換してあげる必要があります。
editText.text? となっているのは、 textがEditable型のNullableなので、安全に呼び出すために ?を使っています。
もしnullだったら、toString()を実行するまえに text にnullを返してくれます。

テキストをIntentにセットしよう

テキストが取り出せたら、Intentに値をセットしてあげます。
textはNullableなのでnullになっている可能性があるので、本当はエラー処理が必要になるのですが、
そのあたりはあとでやっていくとして、ここではそのまま使っていきましょう。

4行目で行なっています。intent.putExtra()で値をセットできます。
第一引数はキー値になります。
第二引数が渡したい値なので、ここではeditTextから取り出したtextになります。

これで入力したテキストをSubActivityに渡せるようになりました。

キー値を定数にしよう

これでもOKなのですが、putExtra()のキー値は他のアプリとも被らない一意のものにすることが推奨されています。
なので、パッケージ名+キーというような形にしたいのですが、長くなっちゃいますし、遷移先のSubActivityからも使うことになるので定数にしておきましょう。

定数に入れる文字列はcom.usaco_pg.intentsample.EXTRA_TEXT といったものになります。

Javaの場合はstatic final を使って以下のように書きます。

ただ、kotlinには static に代わるものがないため、コンパニオンオブジェクトを使ってあげます。
MainActivityクラス内に以下のように書きます。

変数は不変であるvalを使って定義しましょう。
大文字にしておいたほうが定数だとわかりやすいのでそうしています。

これを先程のputExtraで使う場合は以下のよう書き換えてあげればOKです。

これでeditTextのテキストをSubActivityに渡せるようになりました。

8. 前の画面からデータを受け取ってみよう

editTextのテキストを渡せるようになったので、SubActivityで受け取って、表示してみましょう。
SubActivity.ktを開きましょう。

Intentからデータを受け取ろう

Intentからデータを受け取りたいのですが、onCreate() の中に、以下のように書いてあげます。

Javaの場合はgetIntent としていましたが、KotlinではintentとするだけでOKです。
getStringExtra()でMainActivityから渡されたテキストを取り出すことができます。
引数にはキー値を指定します。MainActivity.ktで定義した定数を使うようにします。

ちなみに今回は文字列を取り出したいのでgetStringExtra()を使っていますが、数値だったらgetIntExtra() と言った具合に、取り出したいデータ型に応じたメソッドを使ってあげてください。

テキストを表示しよう

では、取り出したテキストを画面に表示してみましょう。
getStringExtra()は一致するキーがなかった場合はnullを返すので、一応nullチェックも入れておきましょう。
もしnullだったら適当な文字列を、nullじゃなければ渡された文字列を表示します。

ここまででエミュレータで確認すると、最初の画面で適当なテキストを入れてボタンをクリックすると、次の画面に表示されているはずです。

これで基本的な機能は実装できましたが、もう少し細かい修正をしてみたいと思います。

9. アラートを出してみよう

今の状態だとeditTextにテキストを入れない状態でボタンをクリックすると、空文字が送られて、次の画面でなにも表示されないということになってしまうはずです。
なので、入力されていない場合は画面遷移は行わず、アラートを出すようにしてみましょう。

画面遷移をしないようにしよう

画面遷移をしないようにするのは簡単で、startActivity()が実行されるまえにreturnしてしまえばOKです。
なので、editText から取り出した text が null か空文字だったらすぐに return するようにしましょう。

これでなにも入力しない場合は画面遷移しないと思うので、エミュレータで確認してみましょう。

アラートと出してみよう

これだけだとなぜ画面遷移しないのかわからないので、アラートメッセージを出してみましょう。

AlertDialog.Builde() でアラートダイアログを作って、
setTitle でアラートダイアログのタイトルを、
setMessage でダイアログに表示するメッセージを
setPositiveButton でダイアログに表示するボタンを設定します。
ボタンは今回の場合はOKボタンだけでいいので一つだけですが、最大で3つまで指定することができます。
設定が終わったら、サイトに show でアラートダイアログを表示してあればOKです。

strings.xmlを使ってみよう

これでもいいのですが、一応文字列なんかはstrings.xmlに設定してそちらを使うことが推奨されているので修正しましょう。

strings.xmlを開きましょう。

そうすると今までResouceの画面から追加していたstringも設定されているのがわかりますね。
これらと同じ要領で新しくstringを追加していってあげれば大丈夫です。

messageに表示される内容は hint_text と同じでいいと思うので、ここでは title と positiveButton の文字列を追加すればいいので、以下のように書いておきます。

追加できたら、プログラムからstringを使っていきましょう。

resources.getText(ID) という使い方をします。
resources は Java のときは getResource() と書いていましたね。

そこから文字列を取得したいので、getText() を使ってあげればOKです。
ID は R.string.alert_title と言ったように書きます。

なので、AlertDialogを作るところは以下のように書き換えてあげましょう。

10. 動作確認してみよう

さて、これで全ての機能が実装できたはずなので、エミュレータを起動して動作確認をしてみましょう。

冒頭で紹介したような動作になればOKです。

長々とやってきましたが、KotlinでのAndroid開発の参考になったらうれしいです。
次回はリストビューの使い方について見ていきたいと思います!