【Android入門】ToggleButton（トグルボタン）の使い方と実装例をわかりやすく解説

ToggleButtonとは

実装例に入る前に、AndroidにおけるToggleButton（トグルボタン）について簡単に確認しておきましょう。ToggleButtonはButtonビューを拡張したウィジェットで、ボタンの状態を「チェック済み（ON）」と「未チェック（OFF）」の2つの状態として表現できます。設定の有効・無効を切り替えるなど、オン・オフ操作が必要な場面で活躍するUIパーツです。

ここからは、AndroidアプリでToggleButtonを実装する具体的な手順をステップごとに見ていきます。

ステップ1：新規プロジェクトを作成する

Android Studioで新しいプロジェクトを作成します。メニューから「File」⇒「New Project」を選択し、必要な項目を入力してプロジェクトを作成しましょう。

ステップ2：レイアウトファイルにToggleButtonを配置する

res/layout/activity_main.xml に以下のコードを追加します。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ToggleButton
        android:id="@+id/result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Result Data"
        android:textColor="#FFF"
        android:background="@color/colorPrimary"
        android:textOff="Off"
        android:textOn="On"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

上記コードではToggleButtonを1つ配置しています。textOn属性とtextOff属性を指定することで、ONの時・OFFの時にそれぞれ表示されるテキストを設定できます。ユーザーがボタンをタップするたびに、状態が自動的に切り替わります。

ステップ3：MainActivityにクリック処理を実装する

続いて、src/MainActivity.java に以下のコードを追加します。

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

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ToggleButton toggleButton = findViewById(R.id.result);
        toggleButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (toggleButton.isChecked()) {
                    toggleButton.setTextOn("You have Checked");
                    toggleButton.setChecked(true);
                } else if (!toggleButton.isChecked()) {
                    toggleButton.setTextOff("You have not Checked");
                    toggleButton.setChecked(false);
                }
            }
        });
    }
}

このコードのポイントは、ボタンがクリックされたタイミングで toggleButton.isChecked() を呼び出し、現在の状態を判定している点です。チェック済み（ON）の場合は setTextOn() で表示テキストを変更し、setChecked(true) で状態を確定させます。逆に未チェック（OFF）の場合は setTextOff() でテキストを変更し、setChecked(false) で状態をOFFに切り替えます。

ステップ4：Manifestファイルの修正は不要

今回の実装では、AndroidManifest.xml を変更する必要はありません。

アプリを実行して動作を確認しよう

それでは、実際にアプリを実行してみましょう。ここでは実機のAndroid端末をパソコンに接続しているものとして説明します。Android Studioからアプリを実行するには、プロジェクト内のアクティビティファイルをいずれか開いた状態で、ツールバーの「Run」アイコンをクリックします。デバイス選択画面で自分のモバイル端末を選ぶと、端末に以下のような初期画面が表示されます。

これはアイドル状態（初期状態）の画面です。ここでボタンをクリックすると、次のように表示が変化します。

ご覧のとおり、ボタンのテキストが「YOU HAVE CHECKED」に変わり、内部的には setChecked(true) によって状態がONに切り替わっています。さらに同じボタンをもう一度クリックすると、今度は次のような表示になります。

この結果では、テキストが「YOU HAVE NOT CHECKED」に変化し、内部的には setChecked(false) によって状態がOFFへと切り替わっています。

まとめ

ToggleButtonを使えば、ON/OFFの2状態を持つボタンを非常にシンプルに実装できます。isChecked() で現在の状態を取得し、setTextOn()・setTextOff()・setChecked() を組み合わせることで、状態に応じた柔軟なUI表現が可能になります。なお、本記事のサンプルコードは旧supportライブラリを使用していますが、最新のAndroid Studio環境ではAndroidX（androidx.appcompat.app.AppCompatActivity や androidx.constraintlayout.widget.ConstraintLayout など）への置き換えが推奨されているため、実際の開発では適宜読み替えてください。