2. 【Android/Kotlin】ボタン追加

#はじめに
DreamHanksのMOONです。

前回はAndroid開発ツールのAndroid Studioをインストールしました。
[1. 【Android/Kotlin】Android Studioインストール](https://qiita.com/DreamHanks/items/ad6e8002044dcca26bf7)

今回はアプリの画面にボタンを追加し、そのボタンにイベント機能を追加していきます。

#Viewの概要
![2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/d8341add-1dc4-cf90-eb81-85b20929634f.png)
View オブジェクトは、通常は「ウィジェット」と呼ばれ、Button や TextView などの多数のサブクラスの 1 つです。ViewGroup オブジェクトは、通常は「レイアウト」と呼ばれ、LinearLayout や ConstraintLayout などの異なるレイアウト構造を提供する多数のタイプの 1 つです。

詳細な概要は、
https://developer.android.com/guide/topics/ui
上記のリンクで確認することができます。

#ボタン追加とイベント設定
まず、ボタンヴューをレイアウトに追加します。
![1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/ed8ec25a-e873-35f9-f873-a87edff89d97.png)

```kotlin:activity_main.xml
<?xml version="1.0" encoding="utf-8"?>									
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"									
    xmlns:app="http://schemas.android.com/apk/res-auto"									
    xmlns:tools="http://schemas.android.com/tools"									
    android:layout_width="match_parent"									
    android:layout_height="match_parent"									
    android:orientation="vertical"									
    tools:context=".MainActivity"									
    android:gravity="center">									
									
    <TextView									
        android:layout_width="wrap_content"									
        android:layout_height="wrap_content"									
        android:id="@+id/main_tv"									
        android:text="テキストです。" />									
									
    <Button									
        android:layout_width="wrap_content"									
        android:layout_height="wrap_content"									
        android:id="@+id/change_btn"									
        android:text="ボタン"/>									
									
</LinearLayout>	
```
レイアウトには色んなレイアウトの種類がありますが、ヴューを配置する時に一番使いやすい「LinearLayout」を使用してヴューを追加します。
次にボタンを追加します。


```kotlin:MainActivity.kt
package com.example.practiceapplication													
													
import androidx.appcompat.app.AppCompatActivity													
import android.os.Bundle													
import android.widget.Button													
import android.widget.TextView													
													
class MainActivity : AppCompatActivity() {													
    override fun onCreate(savedInstanceState: Bundle?) {													
        super.onCreate(savedInstanceState)													
        setContentView(R.layout.activity_main)													
													
        val main_tv = findViewById<TextView>(R.id.main_tv)        //画面のテキストヴュー													
        val change_btn = findViewById<Button>(R.id.change_btn)    //画面のボタン
													
        //ボタンクリックイベントリスナー設定												
        change_btn.setOnClickListener {													
            main_tv.text = "クリックされました‼"													
        }													
    }													
}		
```
１．「findViewById」メソッドでテキストヴューとボタンオブジェクトを取得します。
２．テキストの内容を変更させるクリックリスナーをボタンに設定します。
#アプリ起動
このアプリを実行するためには仮想デバイスやアンドロイドスマホが必要です。

仮想デバイスのエミュレーターで実行する場合は、
https://developer.android.com/studio/run/emulator

ハードウェアデバイス上で実行する場合は、
https://developer.android.com/studio/run/device

各環境に合わせて設定後、アプリを実行
今回はハードウェアデバイス上で実行します。

・ボタンをクリックする前
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/acc88236-1351-17dc-96c6-ad29a49c9c16.jpeg width=40%/>
・ボタンをクリックした後
<img src=https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/708649/ffbda370-0463-1a8a-2459-68a511bd3d2f.jpeg width=40%/>

#終わりに
今回はボタンを追加し、クリックイベント設定までを説明しました。

次回は画面遷移について説明していきたいと思います。
　[3. 【Android/Kotlin】画面遷移](https://qiita.com/DreamHanks/items/6604efbca55fa4991f9c)

最新内容については下記のリンク（DreamHanksのブログ）で確認することができます。
[DreamHanksブログ（Android/Kotlinアプリ開発）](http://blog.dreamhanks.com/android-kotlin%e3%82%a2%e3%83%97%e3%83%aa%e9%96%8b%e7%99%ba/)