ToggleButtonを使ってON/OFFを切り替える / Getting Started

| 2011年10月9日 | Android, ユーザインターフェース | 1 Comment
Bookmark this on Hatena Bookmark

ToggleButton(トグルボタン)とはクリックすることでON/OFFを切り替えられるボタンのことです。
下図のように、ボタンを見ればON/OFFをすぐに把握することができますので、
オプション機能のON/OFFを切り替えるといった用途に最適です。

ToggleButtonを使うときに重要になるメソッドは以下の通りです。

ToggleButtonを使う際に大事なメソッド

メソッド・インタフェース説明
CompoundButtonクラスのOnCheckedChangeListenerインタフェース
ToggleButtonのクリック時に呼び出されるOnCheckedChangeListenerクラスを登録
CompoundButtonクラスのonCheckedChangedメソッドToggleButtonのクリック時に呼び出される

これらのメソッドを使って以下の手順を踏むことでToggleButtonを使うことができます。

それでは続きから詳しく説明していきます。

ToggleButtonの定義する

レイアウトファイルにToggleButtonを使う為の記述を行います。

1
2
3
4
<ToggleButton android:text="ToggleButton1" android:id="@+id/toggleButton1"
    android:layout_width="wrap_content" android:layout_height="wrap_content"
    android:textOn="Toggle Off" android:textOff="Toggle On"
    android:checked="false"></ToggleButton>

ToggleButtonに設定することができる属性値には以下のようなものがあります。

ToggleButtonの属性値

属性名説明
android:disabledAlphaOFF状態のときのボタンの透過率を0.0～1.0までのFloat値で指定する。（0が透過、1.0が非透過）
android:textOffOFF状態のときにボタン上に表示するメッセージを指定する。
android:textOnON状態のときにボタン上に表示するメッセージを指定する。

ToggleButtonのイベントを取得する

ToggleButtonのイベントを取得する為にはCompoundButtonクラスのOnCheckedChangeListenerインタフェースを使います。OnCheckedChangeListenerインタフェースに定義されているonCheckedChangedコールバックメソッドが、ToggleButtonが押されたときに呼ばれるようになっています。

onCheckedChangedコールバックメソッドの定義は以下のようになっています。


onCheckedChanged(CompoundButton buttonView, boolean isChecked)

・buttonView：状態が変わったToggleButtonのView
・isChecked：ToggleButtonの状態

ToggleButtonはgetIdメソッドを使うことでToggleButtonが複数ある場合でも、
押されたToggleButtonを識別することができます。

1
2
3
4
5
6
7
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    if (buttonView.getId() == R.id.toggleButton1) {
        Log.i("onCheckedChanged", "clicked R.id.toggleButton1");
    } else if (buttonView.getId() == R.id.toggleButton2) {
        Log.i("onCheckedChanged", "clicked R.id.toggleButton2");
    }
}

また、ToggleButtonのメソッドは以下のものが定義されています。

ToggleButtonのメソッド

メソッド名説明
getTextOffメソッドOFF状態のときにボタン上に表示するメッセージを取得する。
getTextOnメソッドON状態のときにボタン上に表示するメッセージを取得する。
setBackgroundDrawableメソッドボタンに背景画像を指定する。
setCheckedメソッドToggleButtonの状態を指定する。
setTextOffメソッドOFF状態のときにボタン上に表示するメッセージを指定する。
setTextOnメソッドON状態のときにボタン上に表示するメッセージを指定する。

onCheckedChangedコールバックメソッドはsetCheckedメソッドを実行することでも呼ばれることに注意してください。
たとえばonCheckedChangedコールバックメソッド内でsetCheckedメソッドを実行してしまうと、
意図していない動作になってしまう恐れがあります。

サンプルプログラム

サンプルプログラムでは2つのToggleButtonを用意しています。
ToggleButtonを押すと、どのToggleButtonが押されたかということと、
押されたToggleButtonの状態をトーストに表示するようにしています。

　

まず、レイアウトファイルは以下のようになります。
トグルボタンを2つ定義し、android:textOn属性とandroid:textOff属性を使ってそれぞれON/OFFのときに表示するメッセージを設定しています。
また、ToggleButtonの初期値はandroid:checked属性を使ってfalse(OFF)に設定しています。

■res/layout/main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
 
    <TextView android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:text="@string/hello" />
 
    <ToggleButton android:text="ToggleButton1" android:id="@+id/toggleButton1"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:textOn="Toggle Off" android:textOff="Toggle On"
        android:checked="false"></ToggleButton>
 
    <ToggleButton android:text="ToggleButton2" android:id="@+id/toggleButton2"
        android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:textOn="Toggle Off" android:textOff="Toggle On"
        android:checked="false"></ToggleButton>
 
</LinearLayout>

次にソースコードです。

■src/ToggleButtonActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
public class ToggleButtonActivity extends Activity implements OnCheckedChangeListener {
    ToggleButton tb1, tb2;
    Button btn1;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        // ToggleButtonの取得
        tb1 = (ToggleButton) findViewById(R.id.toggleButton1);
        tb2 = (ToggleButton) findViewById(R.id.toggleButton2);
 
        // リスナーの登録
        tb1.setOnCheckedChangeListener(this);
        tb2.setOnCheckedChangeListener(this);
    }
 
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // ToggleButton1が押された場合
        if (buttonView.getId() == R.id.toggleButton1) {
            Toast.makeText(this, "clicked togglebutton1: "+isChecked,
                    Toast.LENGTH_LONG).show();
 
        // ToggleButton2が押された場合
        } else if (buttonView.getId() == R.id.toggleButton2) {
            Toast.makeText(this, "clicked togglebutton2: "+isChecked,
                    Toast.LENGTH_LONG).show();
        }
    }
}

1行目でOnCheckedChangeListenerインタフェースを実装しています。
20行目からonCheckedChangedコールバックメソッドの実処理として、押されたToggleButtonとその状態をトーストに表示するようにしています。
最後に15行目と16行目で2つのToggleButtonをsetOnCheckedChangeListenerメソッドを使ってイベントリスナに関連付けています。

以上がToggleButtonの基本的な使い方になります。

About The Author

kseto

One Comment