トグルスイッチを利用して設定を変更する


これまでAndroidでは、機能のON/OFFの切り替えを行う際には、ボタンやチェックボックス、ラジオボタンを利用していました。
Android 4.0 IceCreamSandwich(以後ICS) では、ここにさらに新しく、トグルスイッチ(Switch)が追加されました。

図1:トグルスイッチONとOFF

トグルスイッチを利用することで、これまで以上に簡単に、またユーザーにもわかりやすく、機能のON/OFFを切り替ることが可能です。

トルグスイッチを利用する上で重要になるクラスはSwitchクラスです。
Switchクラスの中で、今回紹介する主なメソッドは以下の通りです。

表:使用するメソッド

API概要
setSwitchTypeface()トグルスイッチ内に表示するテキストの書体を変更する
onCheckedChanged()トグルスイッチのOn/Offが切り替わる際に呼び出されるCallBack関数
setChecked()On/Offを切り替える

それでは以下で詳しく見ていきましょう。

レイアウトファイル定義

まずはトグルスイッチのウィジェットをレイアウトファイルに定義します。
以下がレイアウト(main.xml)で定義されたトグルスイッチのウィジェットです。

■res/layout/main.xml

        <Switch android:id="@+id/sample_switch"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="32dip"
                android:checked="true"/>
        <Switch android:text="このトグルスイッチは上トグルスイッチを切り替えると自動で切り替わる"
            	android:id="@+id/sample_switch_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="32dip"
                android:textOn="yeah"
                android:textOff="oh.."
                android:singleLine="false"/>

今回は下図のように、二つのトグルスイッチを使用して、片方のトグルスイッチを、もう片方のトグルスイッチに連動させてみようと思います(後述)。

上部のトグルスイッチのOn/Offが切り替わると同時に、下部のトグルスイッチも切り替わります。

図2:2つのトグルスイッチが連動

トグルスイッチに表示される「ON/OFF」の文字はデフォルトで設定されているものですが、ON/OFF以外の文字を指定したい場合は、

android:textOn/textOff属性に文字列を指定します(上図では例として「yeah/oh...」に変化させている)。

main.xmlで注目したい属性は、以下の5つです。

表 : トグルスイッチの属性

属性概要
android:textトグルボタンの説明テキスト
android:checkedトグルスイッチの初期値(On/Off)
android:singleLine説明テキストが長くなったときの折り返しの有無を指定
android:textOnスイッチOn時のテキストを変更
android:textOffスイッチOff時のテキストを変更

textは他のウィジェットでもよくある属性ですが、トグルスイッチで用いる場合は、トグルボタンの左側に表示される説明テキストになります。

トグルスイッチ切り替え時のイベントを受け取る

トグルスイッチのOn/Offが切り替わるする際のイベントを受け取り、処理を記述することができます。
今回のサンプルでは、トグルスイッチを切り替えることで、サイレントモードの切り替えを行うようにします。

切り替え時イベントを受け取るには、CompoundButton.OnCheckedChangeListenerをimplementsし、トグルスイッチのインスタンスにsetOnCheckedChangeListener()のリスナーをセットします(15行目)。

■src/SwitchSampleActivity.java

public class SwitchSampleActivity extends Activity implements CompoundButton.OnCheckedChangeListener {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

       // AudioManager取得
        am = (AudioManager) getSystemService(Context.AUDIO_SERVICE);

        // トグルスイッチのインスタンス生成
        s = (Switch) findViewById(R.id.sample_switch);
        s2 = (Switch) findViewById(R.id.sample_switch_2);

        s = (Switch) findViewById(R.id.sample_switch);
        s.setOnCheckedChangeListener(this);
        s.setSwitchTypeface(Typeface.DEFAULT_BOLD, Typeface.ITALIC);
        showRingerMode();
    }
}

ここでは、上部トグルスイッチの書体に、setSwitchTypeface()メソッドにて、ボールドのイタリックを指定しています。

リスナーをセットしたら、イベント取得時に呼び出されるコールバック関数であるonCheckedChanged()メソッド内に処理を記述します。

■src/SwitchSampleActivity.java

    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

       if(isChecked == true){
	       // サイレントモードに設定
	       am.setRingerMode(AudioManager.RINGER_MODE_NORMAL);
	       s2.setChecked(true);
       }else{
	       // ノーマルモードに設定
	       am.setRingerMode(AudioManager.RINGER_MODE_SILENT);
	       s2.setChecked(false);
       }

ここでは、isChecked変数によってトグルスイッチの状態を判別し、状態によって端末をサイレントモードもしくはノーマルモードに切り替えています。
同時に、setChecked()メソッドにて、下部に配置したトグルスイッチの状態も変化させています。

showRingerMode()関数内では、上に配置したトグルスイッチの左側に表示させるテキストを、トグルスイッチの状態によって切り替えています。

■src/SwitchSampleActivity.java

    // RingerMode表示メソッド
    void showRingerMode() {
        // getRingerModeメソッドで現在のマナーモードを取得
        switch (am.getRingerMode()) {
            // ノーマルモードの場合
            case AudioManager.RINGER_MODE_NORMAL:
                s.setText("ノーマル");
                break;
            // サイレントモードの場合
            case AudioManager.RINGER_MODE_SILENT:
                s.setText("サイレント");
                break;
        }
    }

以上の実装によって、図2で示すようなトグルの連動と、トグルスイッチの切り替えに伴い設定の変更が行えます。

アプリの設定画面などに活用してみてはどうでしょうか。

One Comment