初心者僕「KotlinでAndroidプログラミングをしたい」2

# 前回の反応
友人「この記事短すぎない？」
僕「続き書くから許して......」


# 機能を追加していこう
前回の続き。たぶんこんな画面で止まってるはず。
<img width="959" alt="page1.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167019/bae008fd-dfb6-56e7-ad67-9e17fa2fd24e.jpeg">

[<font color="Red">activity_main.xml</font>] → [<font color="Lime">Palette</font>] を選択
※Previewが表示されてない場合　[View] → [Tool Windows] → [Preview] で表示されます。
<img width="958" alt="page2.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167019/7866cc67-482d-7d94-2a6f-261b5422d694.jpeg">

##ボタンの設置
今回は手始めにボタンを設置してみましょう。
[Palette]から
[Common]→[Button]を選んでPreviewにドラッグ＆ドロップします。
すると、下図のようにPreviewとXMLに反映されます。
<img width="960" alt="page3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167019/7b00095d-cc7c-77b5-8c0c-6ab07c9f66ad.jpeg">

青枠の部分はこんな感じ

```
<Button
            android:text="Button" <!-- 表示される文字 -->
            android:layout_width="wrap_content" <!-- なんだァ？てめェ...... -->
            android:layout_height="wrap_content" <!-- あとで調べます -->
            tools:layout_editor_absoluteY="103dp" <!-- 画面左上からのY座標 -->
            tools:layout_editor_absoluteX="33dp" <!-- 画面左上からのX座標 -->
            android:id="@+id/button3" <!-- @+id/???となるように自動でIDが付く -->
/>
```


ボタンの設置以外にもスクロールバーやテキストの設置もPalleteからできます。

##ボタンに動作をつける
ボタンの設置はできましたが、今のところ動作しません。
今回は[Kotlin Android Extensions](https://kotlinlang.org/docs/tutorials/android-plugin.html)を使って動作を記述します。
まずはプラグインを有効にしましょう。(もしかしたらデフォルトで有効かも)
[Gradle Scripts] → [build.gradle(Module: app)] に

```
apply plugin: 'kotlin-android-extensions'
```

を追記します。

次にactivity_main.xmlを編集しょう。Hello World!の部分をこのように編集します。
重要なのはidの部分。

```
<TextView
            android:layout_width="wrap_content"
            android:layout_height="69dp"
            android:id = "@+id/helloId"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
/>
```

そしてMainActivity.ktを編集。MainActivity.kyにKotlin Android Extensionsをインポートしましょう。
MainActivity.kyに

```
import kotlinx.android.synthetic.main.activity_main.*
```

を追記します。

そして、bottonの動作を記述。難しいことは書いてないのでまとめて示すとこんな感じ。
今回はボタンを押されたときにHello World!の表示非表示を切り替えさせる動作になっています。

```
package com.example.myapplication

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        var boolVar = false
        helloId.text = ""

        button3.setOnClickListener {
            if (boolVar) {
                helloId.text = ""
                boolVar = false
            } else {
                helloId.text = "Hello World!"
                boolVar = true
            }
        }

    }
}
```

Kotlin Android Extensionsを使うと記述が短くなるみたい。
もう少し賢いやり方があるのだろうけど、まぁいいか。

#Android端末をエミュレートしよう
Android StudioにはAndroid端末を疑似的に動作させるAndroid Emulatorという機能があります。
とりあえず、<font color="Yellow">矢印</font>の部分を押してみましょう。するとSelect Deployment Targetというウィンドウが出てくるはずです。初めての方はAvailable Virtual Devicesの欄に何もないかも。(覚えてない)
仮想端末を追加していない方は[Create New Virtual Device]をクリックして新しく仮想端末を追加します。
僕はNexus 5X API 28を追加しました。

<img width="959" alt="page3.jpg" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167019/3a1ddaff-12cb-3684-c4e3-d04fcd4ed093.jpeg">

自分が使う仮想端末を選択したらOKを押すとエミュレートが開始します。
今回は画面に追加したボタンをクリックするとHello World!の表示非表示が切り替わる動作となっていれば成功です。

#次回
コーヒーを飲みすぎたのでここで小休止。
次回は画面遷移とかそこらへんかな？

ところで、1週間後に結果お送りしますといった企業から連絡が2週間ないのですが。