初心者がKotlinでAndroidアプリをつくってみた

#はじめに
メルカリで買った本↓が届いたのでAndroidアプリをためしに作ってみた
https://www.sbcr.jp/products/4797395808.html


#準備
AndroidStudioをインストールする
https://developer.android.com/studio/install?hl=ja

#電卓アプリをつくろう

アプリ開発の流れは
①プロジェクトの作成
②リソースの作成
③画面レイアウトの作成
④機能の実装
⑤マニフェストファイルの定義
⑥テスト・デバッグ
だそうな

正直初心者の私にはどこから何を手をつけていけばいいやら全くわからないのである


##①プロジェクトの作成

AndroidStudioを起動するとこんな画面が表示される
<img width="773" alt="スクリーンショット 2018-11-11 22.33.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/3a8ac279-a593-e738-e8ac-df5f599409ca.png">

一番上の
<img width="343" alt="スクリーンショット 2018-11-11 22.38.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/3bb9052e-35d4-77de-f3ea-6a1b4cc23df7.png">
を押してみる

<img width="891" alt="スクリーンショット 2018-11-11 22.53.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/85e76e4c-253c-a21e-224b-71100c8af652.png">
アプリ名とか保存するフォルダとか選んで
<img width="197" alt="スクリーンショット 2018-11-11 22.55.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9dacec1d-2ed8-8449-6f8e-c676da485f15.png">
ここにチェックをいれよう！
これでKotlinが使えることになる

次はアプリが動く端末やOSのバージョンを選ぶところ
とりあえずPhone and Tablet のAndroid 8.1 にした
（私のスマホは7だけど…）
<img width="891" alt="スクリーンショット 2018-11-11 22.56.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/55a0e8df-869b-932c-35dc-fb12ae0c3b83.png">


ここはなんかテンプレを用意してくれるみたい
今回はおためしなのでEmpty Activityで
<img width="890" alt="スクリーンショット 2018-11-11 22.59.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e50e6621-1899-620d-593b-e462abc762ed.png">

アクティビティの名前とレイアウトの名前を入れろとのこと
ふむふむ
画面の単位のことをアクティビティと呼ぶらしい
こんかいはとりあえずこのままで

<img width="897" alt="スクリーンショット 2018-11-11 23.00.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/978ed544-a326-f02a-7e61-0056bce618b8.png">

こんな感じの画面になるのでちょっとまってFinishをおす

<img width="893" alt="スクリーンショット 2018-11-11 23.05.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/97b00ab3-0dcf-18aa-6d7a-c685ca53e8de.png">

これでプロジェクトの作成は完了だ
<img width="1377" alt="スクリーンショット 2018-11-11 23.11.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/2c17398f-250a-0422-1dc1-52d297907879.png">

##②リソースの作成 ③画面レイアウトの作成

リソースは画面に表示する文字とか色とか画像イメージとかのことを指すみたい
レイアウトファイルによって、リソースをどこに配置するかを決めるらしいよ

ということでまずはこの電卓ツールのレイアウトファイルであるactivity_main.xmlをひらいてみよう
（さっきアクティビティを作った時に名前を決めたファイルだね）

<img width="1090" alt="スクリーンショット 2018-11-11 23.19.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/fccdac0b-982d-84c5-87df-e4f46007eeb0.png">

場所はapp→res→layoutのとこにあるみたい
デフォルトでも開かれてたけどね

レイアウトファイルをいじる方法は
1.デザインビューをつかう
2.ソースコードを直接編集する
の２つの方法があるみたいだけど、今回はデザインビューを使ってみる

ちなみにデザインビューとテキストの切り替えは↓ここでできる（左下らへんにある）
<img width="110" alt="スクリーンショット 2018-11-11 23.23.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/dfdac885-7a6d-d6ec-7198-40dbdf133261.png">

最初は「Hello World」が書かれているのがわかる
<img width="417" alt="スクリーンショット 2018-11-11 23.25.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/92d9863d-315c-adcd-ad18-40dd176edefd.png">

左側がデザインビューで右側がブループリントと言うらしいよ
主に左側をいじるんだけど、ブループリントもなんかに使うみたい（後述のConstraintLayout）

#####最初に電卓アプリをつくると言ったな　あれはウソだ
電卓と言ったら０から９のボタンがあっていろいろ計算ができるけど、
そこまでのものをおためしでつくれる気がしなかったので
単純な計算をするアプリにします…

「Hello World」の削除
せっかくこんにちはしてくれたのにごめんね（計算にはつかわないのだ）
<img width="424" alt="スクリーンショット 2018-11-11 23.34.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/042f5be8-3112-ba25-d48c-dcde76cf9ce5.png">

左側にあるPaletteにあるいろんなパーツを組み合わせることでデザインビューをそだてていく
まずはTextViewをドラッグ＆ドロップして
<img width="215" alt="スクリーンショット 2018-11-11 23.36.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9081bbb6-0790-eede-1eb5-adfe91ec4a62.png">
パーツを置きました
<img width="206" alt="スクリーンショット 2018-11-11 23.36.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/138405ca-6d84-3dfb-5099-ab7da3134ab9.png">

次に置いたパーツの中身を編集します
右側のAttributesで編集できる
textを「定価」
textAppearanceを「AppCompact.Large」に変更
<img width="263" alt="スクリーンショット 2018-11-11 23.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9b0c0aa5-216a-6696-4ee1-49c71f6cfb28.png">
するとこうなる
<img width="202" alt="スクリーンショット 2018-11-11 23.40.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/327458c3-3b5d-34c1-3800-1f9fb8d38741.png">

#####ConstraintLayout
いまの状態でComponent Treeという場所をみてみると！マークのエラーが出ている
<img width="529" alt="スクリーンショット 2018-11-11 23.45.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/7e8f1eae-e544-d1fd-9469-141ba9e711ef.png">
ちょっと何言っているのかわからないけど
「This view is not constrained.」らしい

ConstraintLayoutという機能があります
Constraintを訳すと「制約」という意味で
パーツのひとつひとつにスマホ画面のどこらへんに表示するか制約を設ける必要があるそうな
よくわかんないので今置いた「定価」という文字を例にとってみる

ConstraintLayoutはブループリントで確認できる

これが制約が全くない状態
<img width="205" alt="スクリーンショット 2018-11-11 23.59.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/dca4e22f-872c-27fd-ec6f-c56a60ac9d4d.png">

制約をつけるのはAttributesのここ
<img width="248" alt="スクリーンショット 2018-11-12 0.00.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/8ec1e59b-c11c-0174-3c9c-57ec51ed498b.png">

これをこうしてやると
<img width="249" alt="スクリーンショット 2018-11-11 23.54.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/aa355044-1438-0ab8-2a2a-e5b549f1aef1.png">

ブループリントがこんな感じになってエラーがなくなる
<img width="197" alt="スクリーンショット 2018-11-11 23.54.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e94ca7f6-09b1-c1ce-c977-a0de62c0d224.png">

この制約はスマホ画面の上から48dp、左から48dpの場所に「定価」という文字を表示しますよというもの
こんな感じで垂直方向や水平方向に制約を持たしてあげないといけないんだって

#####エディットテキストの追加
次は定価を入力するところをつくろう

PaletteのText→Numberを配置する
<img width="716" alt="スクリーンショット 2018-11-12 0.07.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/46dac6e8-7b5a-4e20-6c79-49488b21f49a.png">

制約をいれる
・水平方向：左側は「定価」文字列との間に38dp、右側は画面端との間に48dp

<img width="207" alt="スクリーンショット 2018-11-12 0.10.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/a7248050-6099-a035-47c3-b472716b4671.png">
<img width="243" alt="スクリーンショット 2018-11-12 0.10.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/40c434ca-bb21-b114-9e71-e408f1e7baa2.png">

・垂直方向：「定価」文字と同じ高さにしたいので以下の設定をする


shiftキーを押しながらふたつを選択
<img width="205" alt="スクリーンショット 2018-11-12 0.13.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/85164b27-ff1d-5036-0da6-e9f1b3804ad4.png">

ここのBaselinesをおす
<img width="288" alt="スクリーンショット 2018-11-12 0.13.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/ea2b7946-634b-3636-8ebc-ddd13e7929c9.png">
これでふたつのパーツの高さが同じになるようにベースラインが決まった
（うにょーん）
<img width="200" alt="スクリーンショット 2018-11-12 0.14.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/11116aeb-9399-1deb-9b43-e758a90ec526.png">

あとここの入力値は後ほど使うので
このパーツのIDをわかりやすいものにしておこう
<img width="255" alt="スクリーンショット 2018-11-12 0.17.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/b2466c94-f541-9328-1820-fe4806f8dd59.png">


#####もういっこ追加
スーパーで３割引とか書かれていてもパッと計算するのって大変だよね（そうでもない？）
このハイテクアプリはどんな割引シールが貼ってあっても即座に値段を教えてくれる優れものです

ということで割引率を入力するパーツも追加しよう

でーん
<img width="419" alt="スクリーンショット 2018-11-12 0.24.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/5b5dba23-8792-f2fe-d60f-4697462b1567.png">


<img width="260" alt="スクリーンショット 2018-11-12 0.25.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/d41fff60-f7fc-2f73-e203-6781d2918bd9.png">
<img width="255" alt="スクリーンショット 2018-11-12 0.25.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/ee3a0aa8-c80b-501c-ad96-ce46513458e0.png">

#####計算ボタンの追加

<img width="422" alt="スクリーンショット 2018-11-12 0.27.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/c1832adb-c4a2-2b88-34f0-9a871807dde9.png">

「計算する」ボタンも置いてレイアウトは完成！

<img width="255" alt="スクリーンショット 2018-11-12 0.28.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/1e459280-8c46-1d0c-808b-8e93ae1cf736.png">
ID:calculate
text:計算する
と設定しました



#####エラーの消し込み
Component Treeにはまだエラーが残っています
<img width="568" alt="スクリーンショット 2018-11-20 10.13.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/0d9fbf54-7b9c-f5ab-7c15-a63fedc4a7e3.png">

こいつらを消し込んで行こう

######priceとdiscountのエラー
前段で設定した定価と割引率を入力する箇所であるpriceとdiscountのエラーを消そう
<img width="553" alt="スクリーンショット 2018-11-20 10.30.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/93d61ef1-477b-5480-55cd-b5bf1ecb13e1.png">


「Missing accessibility label」って言ってる
priceやdiscountはテキストエディットというコンポーネントで、テキストエディットはラベル（「定価」とか「割引率」っていう文字そのもの）に紐づいてなきゃいけないんだって
紐づけ方はこう↓
・「定価」ラベルをデザインビューから選択
<img width="215" alt="スクリーンショット 2018-11-20 10.22.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9b62e4f1-34a5-876e-8b7d-ac2e5b28ce47.png">
・Attributesの一番下の「View all attributes」をクリック
<img width="255" alt="スクリーンショット 2018-11-20 10.22.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9a2be5be-c9f5-d54a-d0a8-c72eebc6aaee.png">
・たくさんでてくるので「labelFor」を見つけて紐づけ対象の「price」テキストエディットを指定する
<img width="264" alt="スクリーンショット 2018-11-20 10.23.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e9324276-ba90-8918-cc33-b7c119fe2f3d.png">

・これで紐づけ完成！
<img width="279" alt="スクリーンショット 2018-11-20 10.23.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/a5f41b4b-d1fe-b11e-689a-fa8f7e4f4f42.png">

同じように「割引率」ラベルと「discount」テキストエディットの紐づけも行おう
<img width="747" alt="スクリーンショット 2018-11-20 10.23.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/4f5348f2-5390-9b57-09e5-527bdf22f1a8.png">

警告が消えた
<img width="245" alt="スクリーンショット 2018-11-20 10.31.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/589ac7b3-cd75-beb1-96ff-3342907976cf.png">

（最初以下の警告だったんだけどFixを押したら消えた）
<img width="462" alt="スクリーンショット 2018-11-20 10.18.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/f2357035-22b5-654a-e7a1-e983e6f71faf.png">

######「定価」「割引率」ラベルのエラー
「Hardcoded string "定価", should use '@string' resource」って言ってる
ハードコーディングしてるところがあるからなんとかせいって感じ

<img width="867" alt="スクリーンショット 2018-11-20 10.35.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/06356a87-4b9b-ea04-539a-ababc1ea1e5a.png">

よくわかんないけど誘導通りに↓のFixボタンを押してみる
<img width="259" alt="スクリーンショット 2018-11-20 10.36.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/b22d8a9e-236b-966f-b9ce-1ceed4a9b9cc.png">

こんなのが出てくるので、Resource nameに「price_label」と入力
<img width="310" alt="スクリーンショット 2018-11-20 10.38.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/561c18d6-8c53-2ae6-1d57-f0fb97d5caae.png">
警告が消えた…！
<img width="243" alt="スクリーンショット 2018-11-20 10.39.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/a15dee1b-c3b0-b875-bb11-53921051485f.png">

「定価」ラベルのAttributesのtext項目を見てみるとさっき入力したprice_labelというのに置き換わっている
（元は「定価」って直書きしてたね）
<img width="256" alt="スクリーンショット 2018-11-20 10.39.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e9836f72-fcd9-5a89-552e-06c0425b05db.png">

ここでちょっと以下のファイルを見てみよう
string.xmlというファイルがあるはずだ
<img width="251" alt="スクリーンショット 2018-11-20 10.41.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e941603b-8e93-f261-19ef-202c30c81bff.png">
price_labelというタグがあってその中身が「定価」となっている
<img width="362" alt="スクリーンショット 2018-11-20 10.41.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/142c5cf3-65bd-bdcb-4e64-da6b4641e480.png">

さっきのFixボタンの処理はこのタグをつくる処理だったらしい
こうすることでラベルに「定価」とハードコーディングするのを回避しているんだね

同様に「割引率」と「計算する」ボタンもFixしてあげよう
<img width="302" alt="スクリーンショット 2018-11-20 10.45.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/3937490b-a9ab-e474-afe1-746ce6eaadb3.png">
<img width="294" alt="スクリーンショット 2018-11-20 10.46.12.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/79ecd9a7-7dda-3f45-b9fd-ae0f9f64dd86.png">
<img width="436" alt="スクリーンショット 2018-11-20 10.46.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9543e477-d44b-aa52-bc3d-71789abf4789.png">
これで綺麗になった！
<img width="235" alt="スクリーンショット 2018-11-20 10.47.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/64432d41-f417-75ec-c136-994e5dd325dd.png">

##④機能の実装
入力画面はできた（結果を表示する画面はまだだけど）ので次は機能を実装しよう

機能はアクティビティとよばれる単位で実装されるみたい
画面ごとアクティビティを定義したり、１つのアクティビティで済ませたり色々作り方はあるみたいだけど、今回は入力画面と結果画面の２つのアクティビティを用意しよう

実はすでにアクティビティファイルが作られている
<img width="329" alt="スクリーンショット 2018-11-20 10.54.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9d22117c-6543-5591-410b-8be026baf07f.png">
<img width="489" alt="スクリーンショット 2018-11-20 10.54.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/5ebc5130-65be-e40a-26cd-a42154a0b56d.png">

Kotlinのメソッドについてちょっと触れよう（私もあんまりわかってないけど）
####onCreate()
アクティビティが生成された時に呼ばれるメソッドだって
super.onCreate()でスーパークラスを呼んでるのがみえるけど、これは必須なんだって
onCreate()に関わらずアクティビティのライフサイクルに関するメソッドはスーパークラスを呼ぶことを強制させられるらしい
ふーん

####setContentView()
このアクティビティで使用するレイアウトファイルを指定するメソッドだそうだ
activity_main.xmlはさっきまでさんざんごにょごにょしてたファイルのことだね


###どんな機能が必要なのか？
レイアウトができたので、この画面にはどんな機能が必要なのか考えてみよう
・「計算する」ボタンを押した時に入力値の妥当性を検証する
・上記が妥当であった場合、計算結果画面に遷移する
主にこの二つかな？
計算処理を入力画面でするのか、計算結果画面でするのか考えるところだけど、入力画面でしてしまったら計算結果画面の仕事が表示だけになるから、計算機能は計算結果画面におまかせしよう

###クリックイベントのハンドリング
まあまずはコードを書いてみよう


```MainActivity.kt

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<Button>(R.id.calculate)

        button.setOnClickListener {
            // ここに任意の処理を実装する
        }
    }
}
```

val以降を追加した
####findViewById()
IDを指定することでビューを取得できるというもの
今回は「計算する」ボタンを取得してbutton変数に入れたい
IDは「calculate」だったね
<img width="260" alt="スクリーンショット 2018-11-20 11.14.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/1e1e06ae-d954-89ea-d60a-5bc7ae9680ca.png">

####setOnClickListener()
アプリはどうやってボタンが押されたことを察知するのかというと、このメソッドのおかげで察知できるのである
このようにリスナーを記述することによって、ボタンが押された時の処理を書くことができる

それじゃあ処理を書いてみよう

```MainActivity.kt
package com.example.natsuki.dentaku

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<Button>(R.id.calculate)

        button.setOnClickListener {
            // ここに任意の処理を実装する
            //妥当かどうか
            var isValid = true

            val priceEditText = findViewById<EditText>(R.id.price)
            val priceText = priceEditText.text.toString()

            if (priceText.isEmpty()) {
                //定価が未入力
                priceEditText.error = "定価を入力してください"
                isValid = false
            }

            val discountEditText = findViewById<EditText>(R.id.discount)
            val discountText = discountEditText.text.toString()

            if (discountText.isEmpty()) {
                //割引率が未入力
                discountEditText.error = "割引率を入力してください"
                isValid = false
            }

            if(isValid) {
                //文字列を整数型に変換
                val price = Integer.parseInt(priceText)
                val discount = Integer.parseInt(discountText)

                //ここで画面遷移を行う
            }
        }
    }
}
```


未入力だったらエラーとするようにした

<img width="436" alt="スクリーンショット 2018-11-20 11.28.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/facd01e3-de3d-8424-2c43-acc94a4c5a07.png">
ここの<img width="30" alt="スクリーンショット 2018-11-20 11.29.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/96634017-4f79-e7d6-cdd1-a3ba82b3a000.png">をおすとエミュレータが起動して実装した処理を確認できる


<img width="445" alt="スクリーンショット 2018-11-20 11.29.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/9ab36111-da76-099b-1490-fa964d5a5dad.png">
エラーになってる！

####ちょこっとリファクタリング
現在、"定価を入力してください"や"割引率を入力してください"という文言をハードコーディングしている
せっかく「strings.xml」というのがあるのだからそっちに移そう

<img width="491" alt="スクリーンショット 2018-11-25 14.55.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/b3ba9ef8-60e3-6731-d774-e5c0489293f0.png">
なんと左側に出てくるアイコンに従っていけばうつすことができるぞ！

<img width="298" alt="スクリーンショット 2018-11-25 14.57.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/5c1af5d4-d38e-1c0b-117e-06017e0bc58a.png">
<img width="292" alt="スクリーンショット 2018-11-25 14.57.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/651941bd-47fc-1cf4-3e6a-0e9fa0f84867.png">
<img width="484" alt="スクリーンショット 2018-11-25 14.57.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e9f58e4f-1594-7e5e-5105-9633707cb50e.png">

###画面の追加
次は計算結果を表示する画面を追加してみよう
MainActivity.ktがある階層で右クリック→New→Activity→EmptyActivityで空のアクティビティをもう一個追加できる

<img width="1164" alt="スクリーンショット 2018-11-25 15.02.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/e0b3172c-1a5d-1c3d-8d0d-674417c6b904.png">
名前はResultActivityとしよう
<img width="796" alt="スクリーンショット 2018-11-25 15.03.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/96cfd0d1-1b76-fa0c-8f4b-0858d54b5491.png">
できた
<img width="319" alt="スクリーンショット 2018-11-25 15.03.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/959b902b-8102-e970-75cc-785190bedbbb.png">

###画面遷移機能の実装
実装途中だったMainActivity.ktに追記した

```MainActivity.kt
package com.example.natsuki.dentaku

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.Button
import android.widget.EditText
import android.content.Intent

class MainActivity : AppCompatActivity() {

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

        val button = findViewById<Button>(R.id.calculate)

        button.setOnClickListener {
            // ここに任意の処理を実装する
            //妥当かどうか
            var isValid = true

            val priceEditText = findViewById<EditText>(R.id.price)
            val priceText = priceEditText.text.toString()

            if (priceText.isEmpty()) {
                //定価が未入力
                priceEditText.error = getString(R.string.price_error)
                isValid = false
            }

            val discountEditText = findViewById<EditText>(R.id.discount)
            val discountText = discountEditText.text.toString()

            if (discountText.isEmpty()) {
                //割引率が未入力
                discountEditText.error = getString(R.string.discount_error)
                isValid = false
            }

            if(isValid) {
                //文字列を整数型に変換
                val price = Integer.parseInt(priceText)
                val discount = Integer.parseInt(discountText)

                //ここで画面遷移を行う
                val intent = Intent(this, ResultActivity::class.java)
                intent.putExtra("price",price)
                intent.putExtra("discount",discount)
                startActivity(intent)
            }
        }
    }
}
```

`android.content.Intent`をimportして//ここで画面遷移を行う以降を追記しました
Kotlinで別のアクティビティを起動するにはIntentというのを使うんだって
よくわかんないけど使い方は↑の通り

####startActivity()
Intentに詰め込んだ情報で別のアクティビティを起動させるメソッドなんだって

###計算結果画面のレイアウト作成
遷移処理まで書いたので、遷移先の画面のレイアウトファイルを作成しよう
activity_result.xmlができているはずだ
<img width="280" alt="スクリーンショット 2018-11-25 15.32.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/5eed6685-be58-5ffc-5e1b-33c9d9d29605.png">

####ガイドラインをつかってみる
ツールバーにある「Add Horizontal Guideline」を押すとなんか水平な線が出てくる
このガイドラインに対しても制約をかけられるんだって
<img width="490" alt="スクリーンショット 2018-11-25 15.35.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/7e07c00b-9917-142f-d189-8a76143dc610.png">
左側の▲を％にかえて50％のところにガイドラインを移動させる
<img width="427" alt="スクリーンショット 2018-11-25 15.36.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/2290218b-e64d-14ac-3fb6-3f30a0c94efc.png">

そんで二つのTextViewに制約を与える
<img width="444" alt="スクリーンショット 2018-11-25 15.42.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/72af6e07-d98d-e29b-adc3-318efbac5166.png">
<img width="260" alt="スクリーンショット 2018-11-25 15.43.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/a2428e11-4a80-c908-b8de-a7f606504258.png">
<img width="259" alt="スクリーンショット 2018-11-25 15.42.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/0c0a88f7-3c6e-8b99-7ad5-4511aab750cf.png">
<img width="459" alt="スクリーンショット 2018-11-25 15.43.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/4e6d6498-0d99-0628-5504-7ff904d8a5ba.png">
こんな感じ

###計算結果画面の実装
計算結果表示画面の機能を実装してみたよ

```ResultActivity.kt
package com.example.natsuki.dentaku

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.widget.TextView



class ResultActivity : AppCompatActivity() {

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

        //入力画面でIntentに詰めた値を取り出す
        val price = intent.getIntExtra("price",0)
        val discount = intent.getIntExtra("discount",0)

        val expression = findViewById<TextView>(R.id.expression_label)
        expression.text = getString(R.string.expression,price,discount)

        //割引後の価格を計算
        val discountedPrice = price * (100 - discount) /100

        val result = findViewById<TextView>(R.id.result_label)
        result.text = getString(R.string.result,discountedPrice)

    }
}
```

完成！

##⑥テスト・デバッグ
ちゃんと動くよ！
<img width="397" alt="スクリーンショット 2018-11-25 15.58.44.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/3641a0e0-c78f-2d3a-76d4-25e9d4240b0e.png">
<img width="403" alt="スクリーンショット 2018-11-25 15.58.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/283826/3826b852-46b0-8953-14ac-89942211c5e6.png">

#あとがき
最後らへん雑になってたけど初めてのAndroidアプリができて嬉しい
もうちょっと勉強しよ