CheckboxとSwitchをバージョンごとに切り替える

チームEggの曽川です。

本日からチームメンバーとちょっとずつ更新していきます。
よろしくお願いします。

さて、本日はSwitchの話です。
ICSからSwitchというUIが新しく導入されました。

以前はCheckboxを使用していましたが、SwitchはよりリッチなUIであるため、ICS以降ではSwitchが使われることが多いようです。
では、ICSとそれ以前のアプリでの切り替え方法です。
まず、resのlayoutにCheckboxで定義したXMLを記述します。
widget_profile_onoff.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!-- アーティストについて -->
    <CheckBox
        android:id="@id/profile_artist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/switch_text_artist" />
    <!-- 野菜について -->
    <CheckBox
        android:id="@id/profile_vegetable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/switch_text_vegetable" />
</LinearLayout>

次に、resのlayout-v14に上記ファイルと同じ名前でSwitchで定義したXMLを記述します。
widget_profile_onoff.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <!-- アーティストについて -->
    <Switch
        android:id="@id/profile_artist"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/switch_text_artist"
        android:textOff="@string/switch_text_off"
        android:textOn="@string/switch_text_on" />
    <!-- 野菜について -->
    <Switch
        android:id="@id/profile_vegetable"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/switch_text_vegetable"
        android:textOff="@string/switch_text_off"
        android:textOn="@string/switch_text_on" />
</LinearLayout>

あとは表示したいレイアウトにincludeします。

<LinearLayout 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:orientation="vertical" >
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/profile" />
    <include layout="@layout/widget_settings_onoff" />
</LinearLayout>

※ちなみにidはresのvaluesで以下のように定義しています。
ids.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <item name="profile_artist" type="id"/>
    <item name="profile_vegetable" type="id"/>
</resources>

こうすることで、ICSより前ではCheckboxが表示され、ICS以降ではSwitchが表示されます。 また、チェックのON/OFFのイベントを扱いたい場合は、CompoundButtonを型として使うことでソースコードに修正を加えずにCheckboxとSwitchの処理を扱うことができます。

    private void setupViews() {

        // アーティストについて
        final CompoundButton artistProfile = (CompoundButton) findViewById(R.id.profile_artist);
        artistProfile.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(final CompoundButton buttonView, final boolean isChecked) {
                // チェック状態を表示
                Toast.makeText(MainActivity.this, buttonView.getText() + ":" + String.valueOf(isChecked), Toast.LENGTH_LONG).show();
            }
        });

        // 野菜について
        final CompoundButton vegetableProfile = (CompoundButton) findViewById(R.id.profile_vegetable);
        vegetableProfile.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(final CompoundButton buttonView, final boolean isChecked) {
                // チェック状態を表示
                Toast.makeText(MainActivity.this, buttonView.getText() + ":" + String.valueOf(isChecked), Toast.LENGTH_LONG).show();
            }
        });
    }

以下のようにバージョンに応じてCheckboxとSwitchが表示されます。