Programming Style

メニュー

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

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

android_android-togglebutton_1

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

 

広 告

 

目次

前提条件

動作確認端末

  • 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>

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

 

オン状態

android_android-togglebutton_1

オフ状態

android_android-togglebutton_2

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

 

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>

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

 

オン状態

android_android-togglebutton_1

オフ状態

android_android-togglebutton_2

 

広 告