Androidアプリケーション開発入門(ボタンの配置とイベントの設定)

今回は **ボタンを配置しボタンをクリックしたときのイベントを実行させる** ところまで進めてみます。


## 前提

以下のページを参考に、 **[最速でHelloWorldアプリケーションを作成](https://qiita.com/genzouw/items/33c5ffe44bfded56a3e7)** が終了していること

* [Androidアプリケーション開発入門(最速でHelloWorldアプリケーションを作成) - Qiita](https://qiita.com/genzouw/items/33c5ffe44bfded56a3e7)

---

### 1) HelloWorldプロジェクトを起動

前回作成したプロジェクトを起動。

* [Androidアプリケーション開発入門(最速でHelloWorldアプリケーションを作成) - Qiita](https://qiita.com/genzouw/items/33c5ffe44bfded56a3e7)

### 2) **activity_main.xml** を開く

`app/src/main/res/layout/activity_main.xml` をダブルクリックする。  

![](https://drive.google.com/uc?usp=sharing&export=view&id=17Hv8EISvxrvZaMSoGEii_pupnI8GRkvJ)


アプリケーションは最低1つのActivity（アクティビティ）を持つ。ユーザーインターフェイズの1画面のこと。  
Activityの下には、画面の構成要素である **コンポーネント** を配置する。
起動直後は **Activity** の中央に "Hello World!" と書かれた **TextView** コンポーネントが配置されている。

今回はこれは不要なので、クリックし **Delete** キーを押し削除。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1Lo2ER3POlMiOha_kYl-7ioyitUriUX0G)


ちなみに **Activity** を構成するコンポーネントは階層構造で入れ子にできる。  
階層構造が現状どうなっているのかを確認するには、左隣にある **「コンポーネント・ツリー」** を見ると良い。  
先程 **TextView** を削除したばかりなので、 **ContraintLayout** と呼ばれるものしか見えない。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1BztRqi9PPgTlR46KykefPXcF6DJ9XUsi)


### 3) **Button** コンポーネントを配置

左上にある **「パレット」** の欄から **Button** コンポーネントを **Activity** の中央辺りにドラッグ。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1vzSSJprzFD1cu4Ihsrc_Xc5CZvRFqY-0)

ドラッグ後は次のような状態になっている。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1bdQ0jw13v4eg3GXIJ4tU4ajGwsM9ikwL)


### 4) 現状を確認するために実行

ここで一旦実行してみる。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1Hb2PTHI-Q_oBdgTfl57gAVlfpvom4yyG)

中央に配置したボタンが、左上に配置されてしまう。こちらのレイアウト崩れを解消してみる。

`ConstraintLayout` を使用する場合には、その上に配置するコンポーネントに多少属性の設定を追加する必要がある。


### 5) **「テキスト」** タブからボタンの属性を追記

画面下の方に「デザイン」と「テキスト」というタブがあるので、「テキスト」クリックする。  
**Activity** のレイアウト情報はXMLで管理されている事がわかる。

以下のように内容を書き換えることで、中央に配置されるようになる。

```xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.genzouw.helloworld.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
```

以下の4つの属性が追記されることになるはず。

* `app:layout_constraintBottom_toBottomOf="parent"`
* `app:layout_constraintLeft_toLeftOf="parent"`
* `app:layout_constraintRight_toRightOf="parent"`
* `app:layout_constraintTop_toTopOf="parent"`


### 6) 現状を確認するために実行

再び実行してみる。

![](https://drive.google.com/uc?usp=sharing&export=view&id=12CUbzraEZE8UMp_aEAoBEY1FVRp2iyp0)

ボタンの配置が修正されていればOK。

試しにタップしてみると、ボタンの色が僅かに変わり、押されたことがわかるようにはなっている。
現時点では何も起きないため、イベントを割り当ててみる。


### 7) クリックイベントの割当

`MainActivity.java` を開き、 `MainActivity#onCreate()` メソッドに以下のような処理を追記する。


先程 **Activity** 上に配置した `Button` を取得し、 クリックリスナを登録する。  
ひとまずの `onClick()` の中でログ出力してみる。

```java
package com.genzouw.helloworld;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = this.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View v) {
                Log.d("debug", "ここまできたよ！");
            }
        });
    }
}
```

再度起動し、ボタンを押下。
エミュレータ上は何も起こっていないが、 **Android Studio** の **Logcat** にはログが出力されている。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1K-7Iks8Bweq7N4xogeQHAtqUqq-7wDJE)


### 8) ダイアログ表示

最後に、イベントを書き換えて **メッセージダイアログ** を表示させてみる。

```java:MainActivity.java
package com.genzouw.helloworld;

import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = this.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext());
                builder
                        .setTitle(R.string.dialog_title)
                        .setMessage(R.string.dialog_message)
                        .show();
            }
        });
    }
}
```

**メッセージダイアログ** には、タイトルとメッセージを設定していますが、こちらの文言は `res/values/strings.xml` に登録してやる必要がある。

```java:strings.xml
<resources>
    <string name="app_name">Hello World</string>
    <string name="dialog_title">たいとるですよ</string>
    <string name="dialog_message">めっせーじですよ</string>
</resources>
```

これで、ボタン押下後に **メッセージダイアログ** が表示される。

![](https://drive.google.com/uc?usp=sharing&export=view&id=1H7e3EZ3FPsIvzWfm2GPKctGFqGL_oUCv)