NumberPickerで数値を入力する/Getting Started

| 2011年12月29日 | ユーザインターフェース | 1 Comment
Bookmark this on Hatena Bookmark

AndroidにはTimePickerDialogやDatePickerDialogという時刻や日付を簡単に入力できる部品があります。

これらに共通していることは数値を入力するということです。

この2つのコンポーネントを構成している部品の一部であるNumberPickerという数値を入力するためのユーザインタフェースがあります。今回はNumberPickerクラスの使い方を説明します。

※NumberPickerクラスはAPIレベル11から利用可能です。

NumberPickerを使う際に重要なメソッドは以下の通りです。

[table “163” not found /]

それでは続きでサンプルソースの説明をしていきます。

初期設定

NumberPickerを使う際には下記を行う必要があります。
  • 最大値の設定
  • 最小値の設定
  • 初期値の設定

サンプルソースを見てみましょう。

public class MainActivity extends Activity {
    private static final int INITIAL_VALUE = 10;

    private NumberPicker mNumberPicer;

    private TextView mTextView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        mTextView = (TextView) findViewById(R.id.textView);
        mNumberPicer = (NumberPicker) findViewById(R.id.numberPicker);

        // 設定できる上限、下限を設定する
        mNumberPicer.setMaxValue(20);
        mNumberPicer.setMinValue(0);

        // 初期値を設定する
        mNumberPicer.setValue(INITIAL_VALUE);

        mTextView.setText(String.valueOf(INITIAL_VALUE));

17行目：NumberPickerでユーザーが設定できる上限（最大値）を20と指定する
18行目：NumberPickerでユーザーが設定できる下限（最小値）を0と指定する
21行目：現在の値（＝ここでは初期値）を10（INITIAL_VALUE=10）と指定する
22行目：NuberPickerの使い方とは関係ないがサンプルとしてNuberPickerの値と連動して表示させるために初期値を同じ値にしておく

ここで注意する必要があるのがsetMinValueメソッドです。setMinValueメソッドで設定できる最小値は0以上です。最小値ということでマイナスの値を設定したいこともあるかもしれませんが、NumberPickerクラスではマイナスの値を取り扱うことができません。

setMinValueメソッドの引数でマイナスの値を設定してもビルドは通ってしまい、アプリケーションを動かして初めてエラーが出て気づきます。気をつけましょう。

また、setMaxValueメソッドを省略して最大値を指定しなかった場合は正常に動作しません。setMinValueメソッドを省略した場合は最小値は0になります。

値を取得する

NumberPickerの値を取得する方法は2つあります。

  • NumberPicker.OnValueChangeListenerクラスのonValueChangeメソッドで取得する
  • getValueメソッドで取得する

前者は事前にリスナーをNumberPickerに登録しておくことで値が変わった時に呼び出されるonValueChangeメソッドを使います。後者は値を取得したい時に呼び出します。

サンプルソースを見てみましょう。

        // 値が変化した時に通知を受け取るリスナーを登録する
        mNumberPicer.setOnValueChangedListener(new OnValueChangeListener() {
            @Override
            public void onValueChange(NumberPicker picker, int oldVal, int newVal) {
                mTextView.setText(String.valueOf(newVal));
            }
        });

        // NumberPickerの値を取得してToastに表示するボタンの処理を記述する
        Button getButton = (Button) findViewById(R.id.getButton);
        getButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                // NumberPickerの現在の値を取得してToastで表示する
                Toast.makeText(getApplicationContext(), String.valueOf(mNumberPicer.getValue()),
                        Toast.LENGTH_LONG).show();
            }
        });

2〜7行目：NumberPickerにOnValueChangedListenerを登録する。値が変わるたびに呼ばれるリスナーのonValueChangeメソッドでTextViewにNumberPickerの値を反映させる
15行目：ボタンを押した時にgetValueメソッドで値を取得してToastに表示する

常に値を知る必要がある場合はリスナーで、ユーザーが決定ボタンなどを押した時だけ値を知ることが出来れば良い時はgetValueメソッドのように使い分けるとよいでしょう。

まとめ

NumberPickerはDatePickerなどと異なり単純な数値入力のユーザーインタフェースです。日付入力など難しいことは出来ない代わりに汎用性があります。

使い方も最大値、最小値、初期値を設定するだけと簡単なので、ユーザーに数値を入力してもらう必要がある場合に活用すると良いでしょう。

About The Author

kkato

One Comment