2017/05/01

[Kotlin de Android] 第3回: 画面遷移をしてみよう

スポンサーリンク

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

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開発の参考になったらうれしいです。
次回はリストビューの使い方について見ていきたいと思います!

スポンサーリンク