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

はじめに

NumberPicker は Android 3.0 (APIレベル11) で追加された数値を選択するためのウィジェットです。DatePicker と TimePicker は API レベル1からありましたが 単純に数値を選ぶものは 3.0 で初めて導入された形になります。そんな NumberPicker を 2.1 から、それも Holo テーマで使えるライブラリがあるので使ってみましょう。

ライブラリ使ってみる

ということでライブラリをダウンロードします。

git clone https://github.com/SimonVT/android-numberpicker.git

このリポジトリには library プロジェクトと sample プロジェクトがあります。まずは試してみるということでこの 2 つのプロジェクトをインポートして sample プロジェクトを実行してみましょう。
本記事では Eclipse で実行しましたが Android Studio で使う場合は build.gradle を作ってからインポートしましょう。

Light theme

Dark theme

2.3.3 で実行してみましたが Holo テーマの NumberPicker が表示されていますね！ちなみに以下のような感じで実装します。

NumberPicker np = (NumberPicker) findViewById(R.id.numberPicker);
np.setMaxValue(20);
np.setMinValue(0);
np.setFocusable(true);
np.setFocusableInTouchMode(true);

レイアウトはこんな感じでOKです。

<net.simonvt.numberpicker.NumberPicker
    android:id="@+id/numberPicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

2013/10/10 Styleについてのご指摘をいただき追記しました。有益な情報ありがとうございます！

また実際に使う上での注意点ですが、style に以下の属性を追加する必要があります。

2.x の場合

<resources>
    <style name="SampleTheme" parent="android:Theme.Holo">
        <item name="numberPickerStyle">@style/NPWidget.Holo.NumberPicker</item>
    </style>
</resources>

3.0 以上の場合

<resources>
    <style name="SampleTheme.Light" parent="android:Theme.Holo.Light">
        <item name="numberPickerStyle">@style/NPWidget.Holo.Light.NumberPicker</item>
    </style>
</resources>

もちろん編集もできます。

また、以下のように実装すると…

NumberPicker np = (NumberPicker) findViewById(R.id.numberPicker);
String[] strings = new String[] { "あ", "か", "さ", "た", "な", "は", "ま", "や", "ら", "わ" };
np.setMaxValue(strings.length - 1);
np.setMinValue(0);
np.setDisplayedValues(strings);
np.setFocusable(true);
np.setFocusableInTouchMode(true);

数値以外も出せます！

Holo テーマにしたくない場合

若干内容がそれますが、Holo テーマではなく従来のテーマで使いたい場合は以下のライブラリを使うと良いと思います。

git clone https://github.com/michaelnovakjr/numberpicker.git

これは↓のような感じの UI です。DatePicker や TimePicker と同じやつですね。

まとめ

以上、ちょっと便利なライブラリの紹介でした。数値選択の UI を実装したい場合は上記いずれかのライブラリを使うと良いと思います。