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

catch

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

NumberPicker は Android 3.0 (APIレベル11) で追加された数値を選択するためのウィジェットです。DatePickerTimePicker は 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

number_picker01

Dark theme

number_picker02

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>

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

number_picker03

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

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);

number_picker04

数値以外も出せます!

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

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

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

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

number_picker05

まとめ

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

AWS Cloud Roadshow 2017 福岡