2017/05/01
今回は画面遷移について見ていきたいと思います。
単純なアプリですが、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() に以下のように書いてください。
|
1 2 3 4 5 6 7 |
override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) button.setOnClickListener { } } |
これだけで、ボタンのクリックイベントを取得することができます。Java のときに比べてかなりスッキリ書けますよね。
確認したい場合は Log.d("MainActivity: onCreate", "Button Clicked!") などとログを出力するようにするといいと思います。
さて、クリックイベントができたところで、さっそく画面を遷移させてみたいのですが、まずは画面を作っていきましょう。
ファイル一覧の適当なところで右クリック、または 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{} の中に以下のように書いてあげます。
|
1 2 3 4 |
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 の中に以下のように書いてあげます。
|
1 2 3 4 5 6 7 |
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″ ]
次のようなソースが生成されると思います。
|
1 2 3 |
override fun onOptionsItemSelected(item: MenuItem?): Boolean { return super.onOptionsItemSelected(item) } |
item の itemId を調べて戻るボタンだったら画面を閉じてあげればOKです。
色々な書き方がありますが次のように書いていきます。
|
1 2 3 4 5 6 7 |
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 に以下のように追加します。
|
1 2 3 4 5 |
button.setOnClickListener { val intent = Intent(this, SecondActivity::class.java) intent.putExtra(EXTRA_TEXTDATA, editText.text.toString()) startActivity(intent) } |
Intent にデータを登録するには putExtra() というメソッドを使います。
第一引数はキー名、第二引数に渡したいデータを設定します。
キー名は定数してあげます。
クラスの冒頭で以下のように書いていきます。
|
1 2 3 |
companion object { const val EXTRA_TEXTDATA = "com.usaco_pg.intentsample.TEXTDATA" } |
Java の static const final と言った書き方が Kotlin ではできないので、そういった静的定数を用意する場合には companion object {} の中に書いてあげる必要があります。
String の val の場合は const キーワードを付けることができるので付けておきます。
キー名の文字列はなんでもいいのですが、他のアプリと被らないことが推奨されているので、パッケージ名.キー名 などにしてあげるといいでしょう。
これでデータを渡す側は完成です。
ひとつ目の画面から送られてくるデータを受け取って、表示する部分を実装していきましょう。
SecondActivity.kt を開いてください。
とても簡単なのですが、onCreate()の最後に以下のように書いてあげます。
|
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 を以下のように書き換えます。
|
1 2 3 4 5 6 7 8 9 |
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″]
これで一通りの実装は完了です！
簡単なアプリでしたが画面遷移の仕方の基本として参考にしてもらえるといいなと思います。
2017/04/11
仕事で少しだけ Kotlin を触る機会があったのですが、思った以上に書きやすいと思いました。
せっかくなので Kotlin で Android アプリを作る手順などを紹介しようかなと思います。
ここでは、Kotlin の言語仕様などは省きます。今はたくさんの入門サイトもありますので、そちらをざっとやっておいてください。
また、Android Studio やエミュレータの使い方についてもここでは割愛します。こちらもたくさんのサイトで解説されていますので…。
開発環境
プロジェクトを作ろう
HelloWorldを表示させてみよう
テキストとボタンを使ってみよう
テキストの内容を変えてみよう
プロジェクトファイルはGitHubに公開しているのでそちらもご利用ください♪
今回の開発環境は以下のようになります。
Android Studio 3.1
JDK 8.0
AndroidStudioはインストールされている前提で話を進めます。
もしインストールされていない場合は、公式サイトからダウンロードしてインストールをしておいてください。
さっそくプロジェクトを作っていきましょう！
Android Studio を起動すると次のような画面が表示されます。
ここから「Start a new Android Studio project」をクリックしてください。
[peg-image src=”https://lh3.googleusercontent.com/-56OeYvzBcuo/Wp-T8Zkh7UI/AAAAAAAAaV8/VgE4_xidCZ4lcFhCvh8D6C9SrYvRYvP0wCCoYBhgL/s144-o/kotolin_hello_00001.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100650576047426″ caption=”Kotlin Android 最初はやっぱりHelloWorld 01″ type=”image” alt=”kotolin_hello_00001.png” image_size=”1554×964″ ]
そうするとプロジェクト作成画面が表示されます。
[peg-image src=”https://lh3.googleusercontent.com/-2AybAeqNwTQ/Wp-T8Xw3hMI/AAAAAAAAaV8/PvON513Cd4EIjLvyDLFtvaNT53lGs-v-ACCoYBhgL/s144-o/kotolin_hello_00002.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100650090923202″ caption=”Kotlin Android 最初はやっぱりHelloWorld 02″ type=”image” alt=”kotolin_hello_00002.png” image_size=”1800×1344″ ]
Application name は「HelloApp」にしました。お好きなものにしてくださいね。
Company domain はあればご自身のものを、なければ今回はストアに公開するアプリではないので適当に設定しましょう。
Project location もご自身の環境に合わせて設定します。通常はデフォルトのままでいいと思います。
最後に「Include Kotlin support」に必ずチェックを入れてください。
ここにチェックをしておくことでデフォルトで Kotlin 用のプロジェクトを作ってくれます。
ここまでできたら「Next」をクリックしてください。
次はターゲットデバイスの設定です。
[peg-image src=”https://lh3.googleusercontent.com/-XfskO788DZk/Wp-T8R9bKwI/AAAAAAAAaV8/wBNZtCGyqOE0Wt_Bj6eTvQO0jcAyBA2WwCCoYBhgL/s144-o/kotolin_hello_00003.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100648532978434″ caption=”Kotlin Android 最初はやっぱりHelloWorld 03″ type=”image” alt=”kotolin_hello_00003.png” image_size=”1800×1344″ ]
今回はデフォルトのまま「Phone and Tablet」にしておきます。
APIはとくに指定がなければデフォルト設定のままでいいと思います。
では「Next」をクリック。
次は Activity のテンプレートの選択画面です。
[peg-image src=”https://lh3.googleusercontent.com/-lZLff5OnRmc/Wp-T8dT25SI/AAAAAAAAaV8/FaWCJKmIBkoyD0iAuUb-FvJO1ytuvXu1wCCoYBhgL/s144-o/kotolin_hello_00004.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100651579860258″ caption=”Kotlin Android 最初はやっぱりHelloWorld 04″ type=”image” alt=”kotolin_hello_00004.png” image_size=”1800×1344″ ]
今回のアプリは画面が1つあればいいので、一番シンプルな「Empty Activity」を選択しましょう。
最後に Activity の名前を設定です。
今回はこのままでOKだと思います。
[peg-image src=”https://lh3.googleusercontent.com/-KwKGXu4a0NY/Wp-T8fL9sxI/AAAAAAAAaV8/eGObVfq7QTcSc6Katx8QhkSrIgqgzq5GwCCoYBhgL/s144-o/kotolin_hello_00005.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100652083622674″ caption=”Kotlin Android 最初はやっぱりHelloWorld 05″ type=”image” alt=”kotolin_hello_00005.png” image_size=”1800×1344″ ]
では、「Finish」をクリックします。
ごにょごにょとプロジェクトが作成されます。結構時間がかかりますが、のんびり待ちましょう(笑)
この画面が表示されればプロジェクトが作成されました。
[peg-image src=”https://lh3.googleusercontent.com/-Ve94StoFinA/Wp-T8Vk3VEI/AAAAAAAAaV8/2G3Aooo3g3M0SBZH5MXo-vuKCrkaa9WVgCCoYBhgL/s144-o/kotolin_hello_00006.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100649503708226″ caption=”Kotlin Android 最初はやっぱりHelloWorld 06″ type=”image” alt=”kotolin_hello_00006.png” image_size=”1992×1112″ ]
「MainActivity.kt」が開かれていると思いますが、これが Kotlin のソースファイルです。
とりあえずこれは後で見るとして、「activity_main.xml」 を開いてください。
そうするとこのような画面になるはずです。
もしテキストが表示されている画面になっていたら、画面下部の「Design」と「Text」タブで「Design」を選択してください。
[peg-image src=”https://lh3.googleusercontent.com/-BKEcygc9Ylg/Wp-T8Sv0yoI/AAAAAAAAaV8/FoyZrutoqvsM8H0MRnoZim69kEacLA2-ACCoYBhgL/s144-o/kotolin_hello_00007.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100648744372866″ caption=”Kotlin Android 最初はやっぱりHelloWorld 07″ type=”image” alt=”kotolin_hello_00007.png” image_size=”2300×1414″ ]
最初から画面中央に部品が追加された状態になっているのがわかるかと思います。
そこにはちょっと小さくて見にくいのですが「Hello World」を書いてあるのがわかるかと思います。
これは TextView と言って、文字を表示するための部品になります。
このあたりの使い方はあとで少し見ていくので、ここでは省略します。
特になにもしていませんが、これだけで、とりあえずアプリとして動作するので、エミュレータで起動してみましょう。
起動するとこんな感じですね。「Hello World」と表示されるだけのアプリですが動作しました！
[peg-image src=”https://lh3.googleusercontent.com/-jYHRTL_CX3w/Wp-T8U5R-ZI/AAAAAAAAaV8/2qBNZ5I-aW01NDnTrDlClrELGEIxb44YACCoYBhgL/s144-o/kotolin_hello_00008.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100649320905106″ caption=”Kotlin Android 最初はやっぱりHelloWorld 08″ type=”image” alt=”kotolin_hello_00008.png” image_size=”550×914″ peg_single_image_size=”w300″]
さて、「Hello World」と表示されたからどうした、という感じなので、もう少しアプリっぽくしてみたいと思います。
テキストとボタンを配置して、ボタンを押すとテキストが変化するというな簡単アプリを作ってみます。
今ある「Hello World」と表示されている部品は削除しましょう。部品を選択してDeleteキーで削除できます。
では、テキストとボタンを配置していきましょう。
まず、テキストですが、Palette から Text を選択してください。
下図のようにいろいろと部品の一覧が表示されますが、一番上の TextView を選択して、画面の中央あたりにドラッグ＆ドロップします。
先程削除した「Hello World」もこの TextView を使っていました。
[peg-image src=”https://lh3.googleusercontent.com/-hBYGQ-8bTew/Wp-T8eOHdCI/AAAAAAAAaV8/jYhi-GzKltANmziOiLm42oRP_Jsrg-LWwCCoYBhgL/s144-o/kotolin_hello_00010.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100651824215074″ caption=”Kotlin Android 最初はやっぱりHelloWorld 10″ type=”image” alt=”kotolin_hello_00010.png” image_size=”458×226″ ]
次にボタンですが、Palette の Widget を選択してください。
そして、Button を選択して、先程配置した TextView の下辺りにドラッグ＆ドロップします。
[peg-image src=”https://lh3.googleusercontent.com/-veVfK8lKjiE/Wp-T8aUONcI/AAAAAAAAaV8/4_Axd2iVEBU-1JOfyP3A21Kb9dV6DO_2QCCoYBhgL/s144-o/kotolin_hello_00011.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100650776081858″ caption=”Kotlin Android 最初はやっぱりHelloWorld 11″ type=”image” alt=”kotolin_hello_00011.png” image_size=”454×224″ ]
ちなみにこの画面を作成していく画面を Layout Editor といいます。
次に、部品の位置を設定していきましょう。
TextView を画面中央に、Button は TextView から少し下に配置したいと思います。
まず TextView を中央に配置する方法からやっていきます。
TextView を選択した状態で Layout Editor のツールバーから下図の Align のボタンをクリックします。
[peg-image src=”https://lh3.googleusercontent.com/-v1pyWCiOREo/Wp-T8fHm8vI/AAAAAAAAaV8/3q-bRQhAu805HSpdoNVHxA2yOKRH_YGkACCoYBhgL/s144-o/kotolin_hello_00014.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100652065354482″ caption=”Kotlin Android 最初はやっぱりHelloWorld 14″ type=”image” alt=”kotolin_hello_00014.png” image_size=”274×166″ ]
赤丸の2つのボタンをクリックします。左側が左右の中央に、右側が上下の中央に配置してくれます。
すると中央に配置されるはずです。
次に、Button の配置をしていきましょう。
Buttonを選択して、先程と同じように Align のボタンをクリックして、左右の中央になるボタンをクリックします。
これでまず左右の中央に配置されたはずです。
そうしたら TextView との距離を決めたいのですが、Button を選択すると上下左右に青い丸が表示されていると思いますが、
上の丸をドラッグして TextView の下の丸にくっつけてあげます。
それから Layout Editor の右型の Attributes の下記の箇所を 32 に変更してあげます。
[peg-image src=”https://lh3.googleusercontent.com/-DBjWlQV0_b8/WqC6F88pLFI/AAAAAAAAaYA/9rrCpJ1AhgQqKfAF35Z_Xn0AoibXeywiACCoYBhgL/s144-o/kotolin_hello_00021.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530424071109815378″ caption=”” type=”image” alt=”kotolin_hello_00021.png” image_size=”1498×1050″ ]
これで TextView と Button が程よく離れたかなと思います。
ここまでの操作ですが文章だと少しわかりにくいので動画にしました。
設置した部品ですがもう少し設定をしていきましょう。
まずは TextView からやってきます。
プログラムから扱えるように ID を設定してあげましょう。
と言っても最初のデフォルトのIDが設定されているのですが、もう少しわかりやすい名前にしてあげます。
「Attributes」の一番上に ID とあるのでそこを「timeText」としてあげます。
日時を表示してあげるので適当な名前を付けておきます。(dateTextのほうがよかったな…)
最初に表示されるテキストも設定していきましょう。Attributes の下の方に text という項目があるので「—」(ハイフン3つ)にしておきます。
ちょっと文字サイズが小さいので大きくしましょう。Attributes の一番上に虫眼鏡マークがあるのでそこをクリックします。
[peg-image src=”https://lh3.googleusercontent.com/-UuqHNxbNoXw/Wp-T8aDc_fI/AAAAAAAAaV8/7UwMySkyRyMUpbgamJooAzV-66hoa8BiwCCoYBhgL/s144-o/kotolin_hello_00012.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100650705747442″ caption=”Kotlin Android 最初はやっぱりHelloWorld 12″ type=”image” alt=”kotolin_hello_00012.png” image_size=”474×144″ ]
そうすると入力できるようになるので、「size」などとするとプロパティの候補が出てくるので、「textSize」を「24sp」に変更しましょう。
[peg-image src=”https://lh3.googleusercontent.com/-L-VSfyqZyRY/Wp-T8Uf0VrI/AAAAAAAAaV8/jbEFIfPVYzMQh9HYaYuwsGt08nJ4pT6ogCCoYBhgL/s144-o/kotolin_hello_00013.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100649214105266″ caption=”Kotlin Android 最初はやっぱりHelloWorld 13″ type=”image” alt=”kotolin_hello_00013.png” image_size=”456×134″ ]
これでとりあえず TextView についてはできたので、続いて Button をやっていきます。
同じように ID は「changeButton」、text は「Change」に変更します。
ButtonはこれでOKです。
ここまで設定すると、Layout Editor のツールバーの右側に黄色い三角マークが点滅しているかと思います。
なんらかのエラーやワーニングが出ているときに表示されます。(エラーがあると赤、ワーニングがあると黄色だったと思います)
これを解決していきましょう。
三角マークをクリックすると、下の方にエラーの一覧が表示されます。
[peg-image src=”https://lh3.googleusercontent.com/-dn_EaboK5ls/Wp-T8THckvI/AAAAAAAAaV8/oK1Ge5f7DVswgwOcyS2-rArxnBRLQfU1wCCoYBhgL/s144-o/kotolin_hello_00016.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100648843449074″ caption=”Kotlin Android 最初はやっぱりHelloWorld 16″ type=”image” alt=”kotolin_hello_00016.png” image_size=”1054×844″ ]
「Hardcoded text」とあるので直接テキストを書いているよね、と言う意味になります。
TextView も Button も text に直接記入しましたが、Android では strings.xml に記述してそれを読み込むことを推奨しているのでワーニングになっているわけです。
なので、一応直しておきましょう。
ひとつ目のワーニングをクリックすると詳細が表示されるので、下の方にすすーっとスクロールしていきます。
[peg-image src=”https://lh3.googleusercontent.com/-OawEUlg_9zU/Wp-T8R8hRjI/AAAAAAAAaV8/3uYsIgKrVW4YU8aUjXx3vUpVf5J5LlvOwCCoYBhgL/s144-o/kotolin_hello_00017.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100648529184306″ caption=”Kotlin Android 最初はやっぱりHelloWorld 17″ type=”image” alt=”kotolin_hello_00017.png” image_size=”1058×578″ ]
そうすると「Fix」ボタンがあるのでクリックします。
すると String の設定画面になるので、次のように設定しましょう。
[peg-image src=”https://lh3.googleusercontent.com/-vwFknckywqU/Wp-T8RoyAFI/AAAAAAAAaV8/fS6b-egT6gsds_rQNm160dQ52O_WbUrYwCCoYBhgL/s144-o/kotolin_hello_00018.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100648446394450″ caption=”Kotlin Android 最初はやっぱりHelloWorld 18″ type=”image” alt=”kotolin_hello_00018.png” image_size=”564×854″ peg_single_image_size=”w300″ ]
同じようにもう一つも設定しましょう。
[peg-image src=”https://lh3.googleusercontent.com/-70qbLqX6rn0/Wp-T8e1xGXI/AAAAAAAAaV8/8fSFe-2yTcsKm4RXh4rdO0qOIBCJA9fMACCoYBhgL/s144-o/kotolin_hello_00019.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100651990522226″ caption=”Kotlin Android 最初はやっぱりHelloWorld 19″ type=”image” alt=”kotolin_hello_00019.png” image_size=”564×854″ peg_single_image_size=”w300″ ]
これで黄色い三角マークが消えたかと思います。
これで一通り画面の設定ができました。
ここの手順も少しわかりにくかもしれないので、動画にしました。
さて、ここまでで結構長くなってしまいましたが、今まで設置してきた部品を使って、テキストの表示内容を変えてみましょう。
MainActivity.kt を開いてください。
まずはボタンのクリックイベントを取得してみましょう。
onCreate() に以下のコードを追加します。元々書かれているコードの下に書いてください。
これだけで changeButton のクリックイベントを取得できます。
|
1 2 |
changeButton.setOnClickListener(View.OnClickListener { }) |
ちなみに Java で書くとこうなります。
|
1 2 3 4 5 |
final Button changeButton = findViewById(R.id.changeButton); changeButton.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { } }); |
Kotlin だとすっきしていますよね♪
まず Kotlin だとAndroidアプリ開発でおなじみだった findViewById() が不要です。
ID がそのままプロパティ名として使えます。
それから、OnClickListener の中で Java の場合は onClick() を書いていますが、Kotlin にはそればありません。
というのも Kotlin では Listener のメソッドが1つしかない場合は省略して書くことができるからです。
今回の例がまさにそれなので、よりすっきりと書くことができるのです。
では次にテキストの内容を変更して表示してみましょう。
ボタンが押されるたびに変化してほしいので、日時を表示してみたいと思います。
先程書いた OnClickListener の中に書いていきます。
まずは日時を文字列にするための処理を書いていきます。
Java のときと同じように SimpleDateFormat を使えばOKです。
"yyyy/MM/dd HH:mm:ss:SSS" は年月日 時分秒ミリ秒になります。
|
1 2 3 |
changeButton.setOnClickListener(View.OnClickListener { val df = SimpleDateFormat("yyyy/MM/dd HH:mm:ss:SSS") }) |
これを使って表示を変えてあげればOKですね。
df.format(Date()) とすれば現在日時を SimpleDateFormat で指定した形式の文字列を作ってくれるので、
timeText の text プロパティに代入すればOKです。
|
1 2 3 4 |
changeButton.setOnClickListener(View.OnClickListener { val df = SimpleDateFormat("yyyy/MM/dd HH:mm:ss:SSS") timeText.text = df.format(Date()) }) |
では動作確認をしてみましょう。Runボタンを押してエミュレータを起動します。
[peg-image src=”https://lh3.googleusercontent.com/-PpCDsTYtOUg/Wp-T8edffyI/AAAAAAAAaV8/jlJQnFaRo48eeH00z4lKcTpiHGU5juKHgCCoYBhgL/s144-o/kotolin_hello_00020.png” href=”https://picasaweb.google.com/104967861399298501788/6530100651433058145#6530100651888705314″ caption=”Kotlin Android 最初はやっぱりHelloWorld 20″ type=”image” alt=”kotolin_hello_00020.png” image_size=”550×914″ peg_single_image_size=”w300″ ]
Change ボタンを押すたびに日時が更新されればOKです！
今回はとても簡単なアプリでしたが、今後も色々アップしていこうと思います♪
2016/03/25
先日、横浜マラソン観戦のときに、たくさん歩く予定だから歩数計があったらいいなー
と、ふと思って、スマホにもともと入ってたアプリを起動して行動したものの、
徒歩の時間はほとんどカウントされず。。。
1時間以上は確実に歩いているのに、歩いた時間は24分で歩数は4900歩。なんか変。
なので他のアプリを使ってみよう。
とは言え、この手はアプリは山程ある。どれがいいのー？
なんとなく目に止まったのがGoogle Fit。
なんでもかんでもGoogleもどうよ、とか思ったけど、
普段から大変御世話になっているし、使ってみる。
自宅から駅までの道のりの時間はほぼ正確で、歩数はわからないけどそれっぽいのが出ている。
地図にも経路が出てて、いい感じ。
途中山の手線に乗ったところが自転車にカウントされてたのがナゾだけど、速度的にそんな感じなのかな。
この辺はまぁ誤差ってことで気にしない。
私が知りたいのはウォーキング時間と歩数なのだ。
アプリの設定もとっても簡単。
アプリの右上にあるメニューから設定をタップ。
基本情報として身長、体重、年齢を入力。
単位はたしか日本の単位(kmとか)になっていたはずなので、間違ってたら直す。
あとは通知の設定なんかとお好みでやっていただき。
それまでできたらあとはスマホを持ってお出かけするだけ。
電池の消耗もそんなに気にならないレベルだと思う。
(より正確なデータが欲しい場合はアクティビティを開始する必要あり。でも消費電力すごいよ)
そうすると、こんな感じに一日のデータが表示される。
[peg-image src=”https://lh3.googleusercontent.com/–WHyovGFv5o/VvUqsh7fd4I/AAAAAAAAR7I/wHN9-cn5J1UzAZyOPGmRINDra6EKjSD2gCHM/s144-o/Screenshot_2016-03-25-19-28-31.png” href=”https://picasaweb.google.com/104967861399298501788/20160325?authkey=QqEdvgncFqk#6265961401066420098″ caption=”” type=”image” alt=”Screenshot_2016-03-25-19-28-31.png” image_size=”720×1280″ peg_single_image_size=”w200″ peg_large_limit=”w200″ ]
歩いた時間がまず表示されて、左右にスワイプすると距離や消費カロリー、歩数が確認できる。
ちょっと下の方のアクティビティ一覧をタップするとより詳細なデータも。
地図だとか、ペースだとか。
地図はきちんと経路が表示されずに、ざっくりここらへんよ、ってかんじに
赤い丸枠しか出ない時があるのがちょっと残念ポイントだけど、
そのうち改善されるだろうことに期待。だってGoogle様ですもの。
ちなみに設定した目標時間を達成すると、「目標達成！」ってきらきら表示してくれたりして
地味に嬉しい…ｗ
ホーム画面にウィジェットを置いてみた。
[peg-image src=”https://lh3.googleusercontent.com/-zui1j-YRLXs/VvUqqwgTd9I/AAAAAAAAR7I/G7afslWjtFsbc9EDDARofIo8VjwPat-XgCHM/s144-o/Screenshot_2016-03-25-19-27-43.png” href=”https://picasaweb.google.com/104967861399298501788/20160325?authkey=QqEdvgncFqk#6265961370619181010″ caption=”” type=”image” alt=”Screenshot_2016-03-25-19-27-43.png” image_size=”720×1280″ peg_single_image_size=”w200″ peg_large_limit=”w200″]
こんな感じに、歩いた時間(っていうか、活動した時間)が常に表示されるから、
あぁ、もう少し歩かないと
とか妙なモチベーションが維持される。
気がする。いまのところは。
この画像みたいに、57分とか微妙なところで目標達成できないと妙に悲しかったりもして。
あと3分歩いてこようかしら、とか思っちゃうもの。結局歩いてないけども。
そんあこんなで使い始めて1週間ちょっとですが、楽しくウォーキングできてるので、
ひとまず良いアプリだと思います。
Google fit おすすめ。