Android Studio の使い方解説 ~ 複数のボタンを使ってみよう :図解、サンプルコード付き ~

※この記事は2021年7月2日に更新しました。

「ボタンは作れたし、複数個のボタンを挙動させたい！」

そんな声に答える記事が本記事です。
今回は複数個のボタンを設置し、ボタンを押したときそれぞれ異なる挙動をする、
そんなアプリを作ってみましょう。

前提として、今回の記事はAndroid Studio 4.2.1を対象に記載します。

本記事の使用言語はJavaとなります。
今回はProgate のJavaのレッスンがすべて理解できている、
という前提の上進めていきます。

1個のボタンを押したときの動作を紹介した記事はこちら

複数のボタンを使ってみよう
まとめ

複数のボタンを使ってみよう

複数のボタンの使い方を解説していきます。

今回の作り方を学ぶと、以下のようなアプリが作れます。

今回のアプリはGitHubに公開しています。
下記URLの『SampleColorButton』です。
是非参考にしてください。

GitHub - Umigishi-Aoi/SampleColorButton: Android Studioでの複数のボタンの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、 https://zerokara-app.com/299/ にあります。How to use some buttons in Android Studio. This project is created in studying how to use Android Studio. This Commentary is in https://zerokara-app.com/299/

Android Studioでの複数のボタンの使い方です。このプロジェクトは自分のAndroid Studio の勉強の中で作られたものです。この解説は、にあります。How to use some buttons in Android Studio. This project is created in study...

今回は以下の流れで作成していきます。

文字列リソースファイル、レイアウトファイルを作成する
アクティビティファイルに、ボタンを押されたかどうか確認するクラスを作成する
ボタンが押されたときの動作を定義する
アプリ立ち上げ時に、ボタンに2のクラスのインスタンスを設定する

文字列リソースファイル、レイアウトファイルを作成する

準備ができたら、新規プロジェクトを作成しましょう。
空のアクティビティ、名前は『SampleColorButton』としてください。

まず、文字列リソースファイルの作成です。

以下のコードをstring.xmlに記載してください。

<resources>
    <string name="app_name">カラーボタン</string>
    <string name="red">赤色</string>
    <string name="blue">青色</string>
    <string name="yellow">黄色</string>
    <string name="text">ボタンを押してください</string>
</resources>

string.xml

続いてレイアウトファイルを作成します。
ボタンの配置については今回本題ではないため、作成方法は省略します。
以下のコードをactiviy_main.xmlに記載してください。

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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=".MainActivity">

    <TextView
        android:id="@+id/color_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_red"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:text="@string/red"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button_blue"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button_blue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:text="@string/blue"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/button_yellow"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button_red" />

    <Button
        android:id="@+id/button_yellow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="32dp"
        android:text="@string/yellow"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/button_blue" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml

ここまでできたら一度アプリを実行してみましょう。
上の動画のようにボタンが配置されていれば成功です。

ボタンを押されたかどうか確認するクラスを作成する

アクティビティファイルに、ボタンが押されたかどうかを確認するクラスを作成します。
このクラスを持つインスタンスをボタンに配置することによって、
ボタンが押されると、

インスタンス「ボタンが押された！命令を実行します！」

と命令を実行します。

今回、3つボタンがあるため3つクラスを作成してもいいのですが、
ちょっとテクニカルに、1つのクラスで動作を制御しましょう。
動作の制御の仕方は、次のセクションで説明します。

onCreateメソッドの下に以下のクラスを追加してください。

//ボタンを押されたときの動作を定義するクラスを作成
    private class ButtonClickListener implements View.OnClickListener{

        //ボタンを押されたときの動作を定義
        @Override
        public void onClick(View view){

        //・・・

        }
    }

MainActivity.java

ボタンが押されたときの動作を定義する

続いて、ボタンが押されたときの動作を定義します。

ButtonClickListenerの中のonClickメソッドの中に記述していきます。

動作の流れは以下の通りです。

上記の図のようにクリックされたボタンのidを取得し、そのidによって条件分岐するようにします。
こうすることで、1つのクラス、メソッドで3つのボタンの挙動を書き表すことができます。

実際のコードはこちらです。

//ボタンを押されたときの動作を定義するクラスを作成
    private class ButtonClickListener implements View.OnClickListener{

        //ボタンを押されたときの動作を定義
        @Override
        public void onClick(View view){

            //結果を出力するテキストビューを取得
            TextView color =findViewById(R.id.color_text);

            //押されたボタンのidを取得
            int id = view.getId();

            //押されたボタンのidによって条件分岐
            switch (id) {

                //赤色ボタンの時
                case R.id.button_red:
                    //テキスト『赤色』を表示
                    color.setText(R.string.red);
                    //テキストの色を赤色に変更
                    color.setTextColor(Color.RED);
                    break;
                //青色ボタンの時
                case R.id.button_blue:
                    //テキスト『青色』を表示
                    color.setText(R.string.blue);
                    //テキストの色を青色に変更
                    color.setTextColor(Color.BLUE);
                    break;
                //黄色ボタンの時
                case R.id.button_yellow:
                    //テキスト『黄色』を表示
                    color.setText(R.string.yellow);
                    //テキストの色を黄色に変更
                    color.setTextColor(Color.YELLOW);
                    break;
            }
        }
    }

MainActivity.java

アプリ立ち上げ時に、ボタンにインスタンスを設定する

アプリ立ち上げ時の挙動を定義するonCreateメソッドに、以下を記載していきます。

レイアウトのボタンを取得
ButtonClickListenerのインスタンスを生成
ボタンに上のインスタンスを設定

上記を記載し、完成したコードがこちらです。

package com.zerokaraapp.samplecolorbutton;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        //ボタンビューを3つ取得
        Button buttonRed = findViewById(R.id.button_red);
        Button buttonBlue = findViewById(R.id.button_blue);
        Button buttonYellow = findViewById(R.id.button_yellow);

        //ボタンを押されたときの動作を持つインスタンスを生成
        ButtonClickListener listener = new ButtonClickListener();

        //ボタンにButtonClickListenerインスタンスをセット
        buttonRed.setOnClickListener(listener);
        buttonBlue.setOnClickListener(listener);
        buttonYellow.setOnClickListener(listener);
    }

    //ボタンを押されたときの動作を定義するクラスを作成
    private class ButtonClickListener implements View.OnClickListener{

        //ボタンを押されたときの動作を定義
        @Override
        public void onClick(View view){

            //結果を出力するテキストビューを取得
            TextView color =findViewById(R.id.color_text);

            //押されたボタンのidを取得
            int id = view.getId();

            //押されたボタンのidによって条件分岐
            switch (id) {

                //赤色ボタンの時
                case R.id.button_red:
                    //テキスト『赤色』を表示
                    color.setText(R.string.red);
                    //テキストの色を赤色に変更
                    color.setTextColor(Color.RED);
                    break;
                //青色ボタンの時
                case R.id.button_blue:
                    //テキスト『青色』を表示
                    color.setText(R.string.blue);
                    //テキストの色を青色に変更
                    color.setTextColor(Color.BLUE);
                    break;
                //黄色ボタンの時
                case R.id.button_yellow:
                    //テキスト『黄色』を表示
                    color.setText(R.string.yellow);
                    //テキストの色を黄色に変更
                    color.setTextColor(Color.YELLOW);
                    break;
            }
        }
    }

}

MainActivity.java

※1行目packageの部分は人によって異なります。
コピペする場合は2行目以降をコピペしてください。

ここまでできたらアプリの実行をしてみましょう。
本記事一番上の動画のようにボタンを押して文字が表示されれば成功です。