[Android] ToggleButton:トグルボタンを表示する

2015-03-31 APIガイドコメント

トグルボタンとは、クリックすることで２つの状態を交互に切り替えられるコンポーネントです。オン状態でクリックするとオフに、オフ状態でクリックするとオンになるようなボタンで、プレイヤーの再生・一時停止を切り替えるボタン等によく使用されます。ここではトグルボタンの表示方法について説明します。

前提条件

Android Studioでプロジェクトが作成済であること

動作確認端末

Google Nexus 5 – 5.0.0 – API21（エミュレータ）

1. ToggleButtonの概要

トグルボタンを表示させるためにはToggleButtonクラスか<ToggleButton>タグを使います。Buttonクラスを継承しているため、Buttonクラスのメソッドを使用することが可能です。また<Button>タグで使える属性を使用することが可能です。

2. トグルボタンを表示する

レイアウトXMLを使ってトグルボタンを表示させるためには、<ToggleButton>タグを使用します。ラベルに表示するテキストについては、オン状態のラベルはtextOn属性で、オフ状態のラベルはtextOff属性で指定することが出来ます。

<ToggleButton>タグの使用例は以下のとおりです。

res/layout/activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
    <!-- @string/toggle_onの参照先は「ON」 -->
    <!-- @string/toggle_offの参照先は「OFF」 -->
    <ToggleButton
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textOn="@string/toggle_on"
        android:textOff="@string/toggle_off" />

</RelativeLayout>

アプリを実行すると以下のようにトグルボタンが画面に表示されます。

オン状態

オフ状態

ボタンをクリックするとオン・オフ状態が切り替わります。

Javaコードでトグルボタンを扱うためにはToggleButtonクラスを使用します。ラベルに表示するテキストについては、オン状態のラベルはsetTextOn()メソッドで設定し、オフ状態のラベルはsetTextOff()メソッドで指定します。

以下に例を示します。

java/<packagename>/MainActivity.java

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final ToggleButton toggleButton = (ToggleButton) findViewById(R.id.toggle_button);
        toggleButton.setTextOn(getString(R.string.toggle_on));
        toggleButton.setTextOff(getString(R.string.toggle_off));
    }
}

res/layout/activity_main.xml

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <ToggleButton
        android:id="@+id/toggle_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

アプリを実行すると以下のようにトグルボタンが画面に表示されます。

オン状態

オフ状態

Programming Style

初心者がアプリ開発者になるためのプログラミング学習サイト