[Android Tips] 2.1 から Holo テーマの Switch を使う

はじめに

Android 4.0 (ICS) 以降からオン・オフを設定する Switch が追加されましたが、この UI を 4.0 未満では使用することができません。そこで今回は Switch のバックポートライブラリである Android Switch Widget Backport 使って 2.1 (Froyo) から Switch を使ってみたいと思います。
ちなみにライセンスは Apache License Version 2.0 です。

Android Switch Widget Backport をインポートする

ということでライブラリをプロジェクトにインポートしましょう。まずは Git リポジトリをクローンしてきます。

git clone https://github.com/BoD/android-switch-backport.git switch-backport

Eclipse で使いたい場合はリポジトリ直下の library プロジェクトをインポートしましょう。
Android Studio で使う場合ですが、このライブラリには build.gradle が同梱されているのでそのままインポートして使うことができます。

Switch を使ってみる

まずは style.xml のアプリテーマに switchStyle というスタイルを定義し @style/Widget.Holo.CompoundButton.Switch または @style/Widget.Holo.Light.CompoundButton.Switch を設定します。

<style name="AppTheme" parent="AppBaseTheme">
    <item name="switchStyle">@style/Widget.Holo.CompoundButton.Switch</item>
</style>

あとは適当なレイアウトに配置しましょう。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center">

    <org.jraf.android.backport.switchwidget.Switch
        android:id="@+id/switch"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

</LinearLayout>

これで終わりです。簡単ですね！

イベントのハンドリングも標準の Switch と同様の実装で OK です。

Switch switchView = (Switch) findViewById(R.id.switch_view);
switchView.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
        TextView status = (TextView) findViewById(R.id.status_view);
        status.setText(b ? "ON" : "OFF");
    }
});

PreferenceActivity で使う

SwitchPreference もバックポートされているので、PreferenceActivity でも使うことができます。まず styles.xml のアプリテーマに switchPreferenceStyle を追加します。

<style name="AppTheme" parent="AppBaseTheme">
    <item name="switchStyle">@style/Widget.Holo.Light.CompoundButton.Switch</item>
    <item name="switchPreferenceStyle">@style/Preference.SwitchPreference</item>
</style>

次に preference.xml に org.jraf.android.backport.switchwidget.SwitchPreference を追加します。

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:switchpref="http://schemas.android.com/apk/res-auto">

    <org.jraf.android.backport.switchwidget.SwitchPreference
        android:key="switch"
        android:title="すいっち"
        switchpref:switchTextOff="@string/off"
        switchpref:switchTextOn="@string/on"
        switchpref:summaryOff="@string/summary_off"
        switchpref:summaryOn="@string/summary_on"
        />

</PreferenceScreen>

あとは PreferenceActivity を実装すれば、下図のような Preference を作ることができます。

Java からは、標準 SDK の SwitchPreference と同じような方法で制御できます。

SwitchPreference pref = (SwitchPreference) getPreferenceScreen().findPreference("switch");
pref.setSwitchTextOn("オン");
pref.setSwitchTextOff("オフ");

テーマカラーをカスタマイズする

Android Holo Colors を使えば、Switch のテーマカラーをカスタマイズすることができます。

生成したテーマのリソースでライブラリのリソースを書き換えるか、スタイルをカスタマイズすることでテーマカラーを簡単に変更することができます。

まとめ

ToggleButton というウィジェットも以前から存在していますが、Switch のほうが UI 的にも分かりやすいので重宝しそうですね(ToggleButton と Switch は、そもそも用途が若干違う気がしますが)。
Switch のバックポートライブラリは他にもあるので、こちらの採用も検討してみてください。