サイト移転のお知らせ:http://techbooster.org/に移転しました

ToggleButtonでON/OFFを表現する

1月 19, 2011   //   by @mhidaka   //   ユーザインターフェース  //  No Comments

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


layout/main.xml

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

<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側のサンプルコードは以下の通りです。

    @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の関係を整理しておくと良いでしょう。

関連する記事:

Sponsored Link

Comments are closed.

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です