[Kotlin de Android] 最初はやっぱりHelloWorld

仕事で少しだけ Kotlin を触る機会があったのですが、思った以上に書きやすいと思いました。
せっかくなので Kotlin で Android アプリを作る手順などを紹介しようかなと思います。

ここでは、Kotlin の言語仕様などは省きます。今はたくさんの入門サイトもありますので、そちらをざっとやっておいてください。
また、Android Studio やエミュレータの使い方についてもここでは割愛します。こちらもたくさんのサイトで解説されていますので…。

開発環境

今回の開発環境は以下のようになります。

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

HelloWorldを表示させてみよう

「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 のクリックイベントを取得できます。

changeButton.setOnClickListener(View.OnClickListener {
})

1 2	changeButton.setOnClickListener(View.OnClickListener { })

ちなみに Java で書くとこうなります。

final Button changeButton = findViewById(R.id.changeButton);
changeButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
    }
});

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" は年月日時分秒ミリ秒になります。

changeButton.setOnClickListener(View.OnClickListener {
    val df = SimpleDateFormat("yyyy/MM/dd HH:mm:ss:SSS")
})

changeButton.setOnClickListener(View.OnClickListener {

val df = SimpleDateFormat("yyyy/MM/dd HH:mm:ss:SSS")

})

これを使って表示を変えてあげればOKですね。
df.format(Date()) とすれば現在日時を SimpleDateFormat で指定した形式の文字列を作ってくれるので、
timeText の text プロパティに代入すればOKです。

changeButton.setOnClickListener(View.OnClickListener {
    val df = SimpleDateFormat("yyyy/MM/dd HH:mm:ss:SSS")
    timeText.text = df.format(Date())
})

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です！

今回はとても簡単なアプリでしたが、今後も色々アップしていこうと思います♪

目次