2017/05/15

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

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

開発環境

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

val items = Array(20, { i -> "Title-$i" })

1	val items = Array(20, { i -> "Title-$i" })

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

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

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

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

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

val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items)
myListView.adapter = adapter

1 2	val adapter = ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items) myListView.adapter = adapter

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

myListView.setOnItemClickListener { adapterView, view, position, id ->
}

1 2	myListView.setOnItemClickListener { adapterView, view, position, id -> }

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

myListView.setOnItemClickListener { _, view, _, _ ->
}

1 2	myListView.setOnItemClickListener { _, view, _, _ -> }

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

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

myListView.setOnItemClickListener { _, view, _, _ ->
    val textView = view.findViewById<TextView>(android.R.id.text1)
}

myListView.setOnItemClickListener { _, view, _, _ ->

val textView = view.findViewById<TextView>(android.R.id.text1)

}

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

myListView.setOnItemClickListener { _, view, _, _ ->
    val textView = view.findViewById<TextView>(android.R.id.text1)
    Toast.makeText(this, "Clicked: ${textView.text}", Toast.LENGTH_SHORT).show()
}

myListView.setOnItemClickListener { _, view, _, _ ->

val textView = view.findViewById<TextView>(android.R.id.text1)

Toast.makeText(this, "Clicked: ${textView.text}", Toast.LENGTH_SHORT).show()

}

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

2017/05/01

[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″]

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

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

目次

開発環境

プロジェクトを作ろう

画面を作ろう

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

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

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

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

目次

開発環境

プロジェクトを作ろう

ひとつ目の画面を作ろう

部品を配置していこう

部品の設定をしていこう

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

ふたつ目の画面を作ろう

Activity を追加しよう

画面を作ろう

画面を遷移してみよう

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

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

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

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

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

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

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

最近の投稿