[Kotlin de Android] 画面遷移をしてみよう

今回は画面遷移について見ていきたいと思います。
単純なアプリですが、Intentを使った画面遷移の仕方や元の画面への戻り方、画面遷移時のデータの受け渡し、アラートダイアログの使い方などを解説しています。

開発環境
 プロジェクトを作ろう
 ひとつ目の画面を作ろう
 ボタンのクリック処理を作ろう
 ふたつ目の画面を作ろう
 画面を遷移してみよう
 ひとつ目の画面に戻ってみよう
 ふたつ目の画面にデータを渡してみよう
 渡すデータがなかった場合にアラートを出してみよう

いつものとおり、GitHub にプロジェクト一式を置いてあるのでそちらも参考にしてみてください。

開発環境

開発環境は以下の通りです。
Android Studio 3.1
Kotlin 1.2
JDK 8.0

Android Studio 3.0 以上を使っていれば基本的には同様に作成できると思います。

プロジェクトを作ろう

プロジェクトは [Kotlin de Android] 最初はやっぱりHelloWorld の記事と同様に作成してください。

今回の Application Name は「IntentSample」としています。
Activity は上記記事と同様に「Empty Activity」を使用します。

ひとつ目の画面を作ろう

MainActivity の画面を作っていきましょう。「activity_main.xml」を開いて、Design タブに切り替えてください（たぶんなってますが）

部品を配置していこう

最初からある TextView は使わないので削除します。

Palette の Text の中から Plain Text を選択して、画面の中央辺りにドラッグ＆ドロップで配置します。
Buttons の中から Button を選択して、Plain Text の下あたりに配置します。

次に位置の調整をしていきます。
PlainText の方は画面の中央にくるようにしたいので、ツールバーの Align ボタンから下図の2つを設定してください。

[peg-image src=”https://lh3.googleusercontent.com/-CB_acLvIpak/WsCb_3HuwZI/AAAAAAAAagI/aneDBL-xSrEawLM9jwHkIFbHSJUeIsjAQCCoYBhgL/s144-o/kotlin_intent_01.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398180372398482″ caption=”” type=”image” alt=”kotlin_intent_01.png” image_size=”432×274″ ]

そのあとに、Attributes で左右の余白を16dpに変更します。

[peg-image src=”https://lh3.googleusercontent.com/-x59S57zOJfA/WsCb_24QxyI/AAAAAAAAagI/1OdR3xkMtXAiIWjvAra9xkA2VF9wY0teQCCoYBhgL/s144-o/kotlin_intent_03.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398180307519266″ caption=”” type=”image” alt=”kotlin_intent_03.png” image_size=”452×546″ ]

それから、layout_width を「match_constraint」にしてあげます。これで左右に広がればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-ueokjNuA8eY/WsCb_wJlICI/AAAAAAAAagI/sZoNlc3GPfwEBivrR47womdMltPlqU9bACCoYBhgL/s144-o/kotlin_intent_04.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398178501107746″ caption=”” type=”image” alt=”kotlin_intent_04.png” image_size=”578×244″ ]

Button のほうは、左右の中央にして、PlainText との上下の中央にくるようにしたいので、下図の2つを設定します。

[peg-image src=”https://lh3.googleusercontent.com/-R5RV-zEjfZ4/WsCb_8j4koI/AAAAAAAAagI/uYx_fekD7vYSS0xvSGzZfkDT9QGTkMupgCCoYBhgL/s144-o/kotlin_intent_02.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398181832659586″ caption=”” type=”image” alt=”kotlin_intent_02.png” image_size=”432×274″ ]

部品の設定をしていこう

次に、IDやテキストなどの設定をしていきます。

Plain Text は Attributes で ID を「EditText」にして(デフォルトでこれになっていれば変更しなくてOKです)、text は特にいらないので削除します。
下図のような設定になっていればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-3B1nIEhw6-8/WsCb_8fSFcI/AAAAAAAAagI/PAvM-JKlxccvBS1uIWJ0pxWRVsDoeJKmQCCoYBhgL/s144-o/kotlin_intent_05.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398181813360066″ caption=”” type=”image” alt=”kotlin_intent_05.png” image_size=”1488×1186″ ]

Button は ID を「button」、text は「Send」とします。
下図のような設定になっていればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-66yMSys_g-4/WsCb_zFlDcI/AAAAAAAAagI/9B4hpt7C7_4Ifq6tuPX4Of5wyG5w17hpQCCoYBhgL/s144-o/kotlin_intent_06.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6539398179289632194″ caption=”” type=”image” alt=”kotlin_intent_06.png” image_size=”1480×1202″ ]

と、ここまでの流れはちょっと文章と画像ではわかりにくいかもしれないので、動画にしました。参考にしてみてください。

ボタンのクリック処理を作ろう

次はボタンのクリック処理を書いていきましょう。
以前はボタンのonClick属性にメソッド名を指定する方法できたが、最近は OnClickListener を使う方法が主流なようです。

onCreate() に以下のように書いてください。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    button.setOnClickListener {
    }
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

button.setOnClickListener {

}

これだけで、ボタンのクリックイベントを取得することができます。Java のときに比べてかなりスッキリ書けますよね。
確認したい場合は Log.d("MainActivity: onCreate", "Button Clicked!") などとログを出力するようにするといいと思います。

ふたつ目の画面を作ろう

さて、クリックイベントができたところで、さっそく画面を遷移させてみたいのですが、まずは画面を作っていきましょう。

Activity を追加しよう

ファイル一覧の適当なところで右クリック、または File メニューから New ＞ Activity ＞ Empty Activity を選択します。

[peg-image src=”https://lh3.googleusercontent.com/-eRrmT0ymtZE/Ws4CwO0P2EI/AAAAAAAAajs/snAKkyiJxN0zKDW_SLGYQg_v6FdC7ZCVQCCoYBhgL/s144-o/kotlin_intent_07.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543170336250124354″ caption=”” type=”image” alt=”kotlin_intent_07.png” image_size=”2880×1755″ ]

Activity 作成画面が表示されるので、「Activity Name」を「SecondActivity」にして、あとはデフォルトのまま「Finish」ボタンをクリックします。

[peg-image src=”https://lh3.googleusercontent.com/-kHWLjgerQsE/Ws4DOKUeT6I/AAAAAAAAaj0/x8w44WpkEPwSyQCcF6h72i2GscQeHEVfgCCoYBhgL/s144-o/kotlin_intent_08.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543170850439188386″ caption=”” type=”image” alt=”kotlin_intent_08.png” image_size=”1600×1344″ ]

javaフォルダに SecondActivity.kt、layoutフォルダに activity_second.xml が追加されていればOKです。

画面を作ろう

ひとつ目の画面から渡されてくる文字列を表示したいだけなので、TextView を1つ中央に配置しましょう。
制約は「Horizontally in Parent」と「Vertically in Parent」で中央に配置します。
ID は intentTextView、textSize は少し大きくしたいので 18sp、text は特にいらないので消しておきましょう。

単純な画面ですが、ここの手順も動画にしてみたので、参考にしてみてください。

画面を遷移してみよう

まずは画面を遷移してみましょう。Intentという仕組みを使っていきます。
最近はいろいろな実装方法があるようですが、まずは基本ということでオーソドックスなやり方でやってみたいと思います。

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

onCreate() の中に書いた、button.setOnClickListener{} の中に以下のように書いてあげます。

button.setOnClickListener {
  val intent = Intent(this, SecondActivity::class.java)
  startActivity(intent)
}

button.setOnClickListener {

val intent = Intent(this, SecondActivity::class.java)

startActivity(intent)

}

まず Intent を生成しています。第二引数の書き方がちょっと特殊なのですが、Javaのクラスを指定するときの書き方になります。
Javaでは SecondActivity.class と書いていたところですね。

Intent を生成したら startActivity を実行してあげるだけです。
引数には先程生成した intent を渡してあげます。

これだけで SecondActivity に遷移しますので、エミュレータで確認してみましょう。
起動するとこのような画面になるので、Sendボタンを押してみましょう。

[peg-image src=”https://lh3.googleusercontent.com/-Rh6g8Y9SM0k/Ws8IKZUs75I/AAAAAAAAakc/hmBP5aAhoh00fAofp7GuQ8RxvY2vpj0TgCCoYBhgL/s144-o/kotlin_intent_09.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543457758282051474″ caption=”” type=”image” alt=”kotlin_intent_09.png” image_size=”684×1224″ peg_single_image_size=”w400″ ]

そうすると、もう一つの画面が表示されるはずです。
この段階では画面になにも表示されないのでちょっとわかりにくいですが(汗)

[peg-image src=”https://lh3.googleusercontent.com/-YepFvtOc8rQ/Ws8IKZov_iI/AAAAAAAAakc/XTZ13KsBJpcO_oi3ib2Ac0FeKlz_xEgYwCCoYBhgL/s144-o/kotlin_intent_10.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543457758366137890″ caption=”” type=”image” alt=”kotlin_intent_10.png” image_size=”688×1224″ peg_single_image_size=”w400″]

ひとつ目の画面に戻ってみよう

画面遷移はできるようになったものの、端末の戻るボタン以外に前に画面に戻る方法がないので、戻れるようにしましょう。
タイトルバーのところに「＜」といった戻るボタンを配置して、前に画面に戻れるようにしてみましょう。

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

戻るボタンを表示してみよう

タイトルバーの部分は ActionBar というのですが、そこにホーム画面に戻るボタンを表示する設定があるのでそれを使っていきます。
onCreate の中に以下のように書いてあげます。

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_second)

    supportActionBar?.setDisplayHomeAsUpEnabled(true)
    supportActionBar?.title = "SecondActivity"
}

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_second)

supportActionBar?.setDisplayHomeAsUpEnabled(true)

supportActionBar?.title = "SecondActivity"

}

ActionBar は Support Library の物を使う必要があります。
setDisplayHomeAsUpEnabled を true に設定するだけで戻るボタンを表示することができます。

もう一つ supportActionBar が出てきますが、こちらはタイトルを変更する場合に使います。
ひとつ目の画面とタイトルが同じでわかりにくいので、変えておいてあげましょう。

この状態でエミュレータで確認してみるとわかるのですが、現状は戻るボタンを押してもなにも起きません。
戻るために処理を書いてあげる必要があります。

戻るボタンが動作するようにしよう

戻るボタンは OptionsItem の1つなので、選択したときのイベントは OptionsMenu と同様に onOptionsItemSelected() で取得することができます。

なので、まずは onOptionsItemSelected() を override してあげましょう。
onOptions…と書いていくと選択肢が出てくると思うのでそれをクリックすればOKです。

[peg-image src=”https://lh3.googleusercontent.com/-xrpzptLRork/Ws8wusIjxsI/AAAAAAAAak8/Ra3i2DU0_g0erCJp6rkq3ZiMcZtUk-J7wCCoYBhgL/s144-o/kotlin_intent_11.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543502362271794882″ caption=”” type=”image” alt=”kotlin_intent_11.png” image_size=”1070×268″ ]

次のようなソースが生成されると思います。

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
        return super.onOptionsItemSelected(item)
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

return super.onOptionsItemSelected(item)

}

item の itemId を調べて戻るボタンだったら画面を閉じてあげればOKです。
色々な書き方がありますが次のように書いていきます。

override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    when (item?.itemId) {
        android.R.id.home -> finish()
        else -> return super.onOptionsItemSelected(item)
    }
    return true
}

override fun onOptionsItemSelected(item: MenuItem?): Boolean {

when (item?.itemId) {

android.R.id.home -> finish()

else -> return super.onOptionsItemSelected(item)

}

return true

}

戻るボタンのIDは android.R.id.home が割り当てられているので、そのときは Activity を終了する finish() を呼び出してあげればOKです。

今回は他にメニューなどないのですが、メニューがあるときはここに続けて色々書いていくことになると思います。
該当するIDがなかった場合には else としてあげて規定の処理を行ってあげます。

Boolean を返す必要があるので、最後に return true としてあげればOKでしょう。

これで戻るボタンが動作するようになったはずなので、エミュレータで確認してみましょう。

Sendボタンで遷移したときに、戻るボタンとタイトルが変更されているか確認します。

[peg-image src=”https://lh3.googleusercontent.com/-9iyYZ1okz3s/Ws8ySIwC9DI/AAAAAAAAalM/zfG2lFf9HC0qxtqEO_UhmVIQQEEi0Tl6QCCoYBhgL/s144-o/kotlin_intent_12.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6543504070760657970″ caption=”” type=”image” alt=”kotlin_intent_12.png” image_size=”688×1220″ peg_single_image_size=”w400″ ]

戻るボタンを押して画面が終了して、最初の画面に戻ることが確認できればOKです。

ふたつ目の画面にデータを渡してみよう

ではいよいよ、ふたつ目の画面にデータを渡してみましょう。

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

まずは渡す側から作っていきたいので、MainActivit.kt を開いてください。

渡したいデータを Intent に登録してあげる必要があります。
button.setOnClickListener に以下のように追加します。

button.setOnClickListener {
  val intent = Intent(this, SecondActivity::class.java)
  intent.putExtra(EXTRA_TEXTDATA, editText.text.toString())
  startActivity(intent)
}

button.setOnClickListener {

val intent = Intent(this, SecondActivity::class.java)

intent.putExtra(EXTRA_TEXTDATA, editText.text.toString())

startActivity(intent)

}

Intent にデータを登録するには putExtra() というメソッドを使います。
第一引数はキー名、第二引数に渡したいデータを設定します。
キー名は定数してあげます。

クラスの冒頭で以下のように書いていきます。

companion object {
    const val EXTRA_TEXTDATA = "com.usaco_pg.intentsample.TEXTDATA"
}

companion object {

const val EXTRA_TEXTDATA = "com.usaco_pg.intentsample.TEXTDATA"

}

Java の static const final と言った書き方が Kotlin ではできないので、そういった静的定数を用意する場合には companion object {} の中に書いてあげる必要があります。
String の val の場合は const キーワードを付けることができるので付けておきます。

キー名の文字列はなんでもいいのですが、他のアプリと被らないことが推奨されているので、パッケージ名.キー名などにしてあげるといいでしょう。

これでデータを渡す側は完成です。

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

ひとつ目の画面から送られてくるデータを受け取って、表示する部分を実装していきましょう。
SecondActivity.kt を開いてください。

とても簡単なのですが、onCreate()の最後に以下のように書いてあげます。

intentTextView.text = intent.getStringExtra(MainActivity.EXTRA_TEXTDATA)

1	intentTextView.text = intent.getStringExtra(MainActivity.EXTRA_TEXTDATA)

intent は Java のときの getIntent() と同じです。Kotlin の場合はプロパティになっています。
getStringExtra() は Intent に登録されているデータを取得できるので、引数にキー名を指定してあげればOKです。
取得できた文字列を画面に配置した部品(intentTextView) に設定してあげます。
これだけで表示できます。

エミュレータで確認してみましょう。

テキストボックスに適当に文字を入力して、Sendボタンをクリックします。

[peg-image src=”https://lh3.googleusercontent.com/-9FTB_lJ3KNc/WtIBcaco2gI/AAAAAAAAamk/krdiQjc0lQ4UlPNhhGsMLjoeskup2FjXQCCoYBhgL/s144-o/kotlin_intent_13.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6544294796170156546″ caption=”” type=”image” alt=”kotlin_intent_13.png” image_size=”690×1224″ peg_single_image_size=”w400″ ]

次の画面に入力した文字が表示されればOKです！

[peg-image src=”https://lh3.googleusercontent.com/-pMNOS2Mz8Pw/WtIBcQLR1MI/AAAAAAAAamk/6xbmLUiZk-ERcDikUgPVZlmXx9kf_K8dgCCoYBhgL/s144-o/kotlin_intent_14.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6544294793412990146″ caption=”” type=”image” alt=”kotlin_intent_14.png” image_size=”684×1222″ peg_single_image_size=”w400″ ]

渡すデータがなかった場合にエラーメッセージを出してみよう

ここまでで基本的な実装は完了しているのですがもう少しだけ機能を追加してみましょう。

ひとつ目の画面でなにも入力しないまま Send ボタンをクリックしたときにエラーメッセージを表示するようにしてみましょう。
メッセージの表示にもいろいろありますが、今回は EditText にメッセージを表示させる方法にします。

MainActivity.kt を開いて、ボタンの setOnClickListener を以下のように書き換えます。

button.setOnClickListener {
    if (editText.text.toString() == "") {
        editText.error = "なにか入力してください"
    } else {
        val intent = Intent(this, SecondActivity::class.java)
        intent.putExtra(EXTRA_TEXTDATA, editText.text.toString())
        startActivity(intent)
    }
}

button.setOnClickListener {

if (editText.text.toString() == "") {

editText.error = "なにか入力してください"

} else {

val intent = Intent(this, SecondActivity::class.java)

intent.putExtra(EXTRA_TEXTDATA, editText.text.toString())

startActivity(intent)

}

まず、editText に入力されているかどうか、text プロパティを確認します。
空文字だった場合にはエラーメッセージを表示させるのですが、editText.error に文字列を代入するだけでOKです。

文字が入力されいる場合には今まで書いていた画面遷移のコードを else の中に移動してあげます。

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

なにも入力しないで Sendボタンを押したときに、以下のようにメッセージが表示されて、画面遷移されなければOKです！

[peg-image src=”https://lh3.googleusercontent.com/-EjRHV9o-Mdo/WtIElb4cGeI/AAAAAAAAanA/Fg2n-Di6G7sPIcq50qXp6End33ZMnetMACCoYBhgL/s144-o/kotlin_intent_15.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6544298249708902882″ caption=”” type=”image” alt=”kotlin_intent_15.png” image_size=”786×1406″ peg_single_image_size=”w400″]

これで一通りの実装は完了です！
簡単なアプリでしたが画面遷移の仕方の基本として参考にしてもらえるといいなと思います。

目次

開発環境

プロジェクトを作ろう

ひとつ目の画面を作ろう

部品を配置していこう

部品の設定をしていこう

ボタンのクリック処理を作ろう

ふたつ目の画面を作ろう

Activity を追加しよう

画面を作ろう

画面を遷移してみよう

ひとつ目の画面に戻ってみよう

戻るボタンを表示してみよう

戻るボタンが動作するようにしよう

ふたつ目の画面にデータを渡してみよう

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

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

渡すデータがなかった場合にエラーメッセージを出してみよう

最近の投稿