ToggleButtonでON/OFFを表現する

| 2011年1月19日 | ユーザインターフェース | No Comments
Bookmark this on Hatena Bookmark

ToggleButtonは状態を表現するのに適したウィジェットです。タップ操作でONからOFF、OFFからONと通常のButton等とくらべて直感的に扱えるので機能の状態など、UIコンポーネントとして便利です。ボタンの背景画像のカスタマイズなどはボタンの背景をダイナミックに変えるが参考になります。


layout/main.xml

ToggleButtonを使うため、以下のようにレイアウトファイルへ記述します。
res/layout/main.xml

1
2
3
4
5
6
7
8
9
<LinearLayout android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent" android:layout_height="fill_parent"
    android:orientation="vertical" android:gravity="center">
    <TextView android:text="ToggleButton State: Off" android:id="@+id/TextView01"
        android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView>
    <ToggleButton android:textOn="Toggle On" android:textOff="Toggle Off"
        android:id="@+id/ToggleButton01" android:layout_width="wrap_content"
        android:layout_height="wrap_content"></ToggleButton>
</LinearLayout>

必要部分は上記6行目から8行目までToggleButtonタグです。ToggleButtonタグ固有の要素は以下のとおりです。

android:disabledAlpha 無効時(OFFボタン)のアルファブレンディング(0.0～1.0などFloat型で与えること。0が透過色。1.0が非透過)
android:textOff 未チェック時のボタン表示メッセージ
android:textOn チェック状態のボタン表示メッセージ.

サンプルコード

Activity側のサンプルコードは以下の通りです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
 
    ToggleButton tb = (ToggleButton) findViewById(R.id.ToggleButton01);
 
    tb.setTextOff("Toggle Off");
    tb.setTextOn("Toggle On");  //トグルボタンのメッセージ
    tb.setChecked(false);       //OFFへ変更
 
    //ToggleのCheckが変更したタイミングで呼び出されるリスナー
    tb.setOnCheckedChangeListener(new OnCheckedChangeListener() {
 
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //トグルキーが変更された際に呼び出される
            Log.d("ToggleButton","call OnCheckdChangeListener");
        }
    });
}

8行目から10行目がToggleButtonを制御するメソッド呼び出しです。
ToggleButtonは、CheckBox, RadioButtonなどと同様にandroid.widget.CompoundButtonクラスから派生しており、
10行目のCompoundButton#setCheckedメソッドでToggleの切り替えを行います。setOnCheckedChangeListenerメソッドは、Buttonの状態が変わった際にシステムが呼び出すリスナーです。
サンプルコードでは、リスナーが実行されるたびにLogを出力するだけの単純なコードになっています。

注意点

注意として自分でCompoundButton#setCheckedを使ってチェック状態を変更した場合でもsetOnCheckedChangeListenerが呼び出されます。
これにはまるとsetOnCheckedChangeListener内部でsetCheckedメソッドを使う→再度setOnCheckedChangeListenerが呼び出されてしまう、意図しない動作に繋がることがありました。
ToggleButtonで状態制御する際には、setCheckedとsetOnCheckedChangeListenerの関係を整理しておくと良いでしょう。

About The Author

ひつじ（mhidaka）

Software Engineerだよ。DroidKaigi Organizer / Androidと組込とRe:VIEW。techbooster主宰。mhidaka's writings http://booklog.jp/users/mhidaka 技術書典！ http://techbookfest.org