NumberPicker UIの使い方です。
NumberPicker UIはこんなレイアウトになります。
ドラムロール式のUIで、日付などを選択する際によく使われると思います。
では実装方法を見ていきます。
まずは、レイアウトファイルから
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- hour --> <RelativeLayout android:id="@+id/hour_wrapper" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/time_explain_text" android:layout_gravity="left" android:layout_marginRight="12dp"> <!-- hour picker --> <NumberPicker android:id="@+id/hour_number_picker" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" /> <!-- hour --> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/hour_number_picker" android:layout_centerHorizontal="true" android:layout_marginTop="8dp" android:text="Hour" /> </RelativeLayout> |
特に要素を定義していませんが、インスタンス化した後に、最大値や最小値、
Default値などをセットすることができます。
時間を入力するとなると、0〜23までに制限をかける必要がありますが、
Number Pickerの関数を呼び出すことで、設定することができます。
では実装を見ていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// インスタンス化されたNumberPicker // 0-23の間でループさせる設定 hourNumberPicker.setWrapSelectorWheel(true); // 最大値の設定 hourNumberPicker.setMaxValue(23); // 最小値の設定 hourNumberPicker.setMinValue(0); hourNumberPicker.setValue(8); hourNumberPicker.setOnValueChangedListener(new NumberPicker.OnValueChangeListener() { @Override public void onValueChange(NumberPicker numberPicker, oldVal i, int newVal) { // 時間が切り替わった際の処理 } }); |
setWrapSelectorWheel関数で、0-23の範囲でループさせるようにします。
setMaxValue関数でループの最大値を決定します。
setMinValue関数でループの最小値を決定します。
NumberPickerを操作し、値が切り替わったことをハンドリングするために、
setValueChangedListener関数でlistenerを登録します。
onValueChange
added in API level 11
|
1 2 3 |
void onValueChange (<a href="https://developer.android.com/reference/android/widget/NumberPicker.html">NumberPicker</a> picker, int oldVal, int newVal) |
Called upon a change of the current value.
| Parameters | |
|---|---|
picker |
NumberPicker: The NumberPicker associated with this listener. |
oldVal |
int: The previous value. |
newVal |
int: The new value. |
oldValが切り替わる前の値
newValが切り替わった時の値になります。
codemore code
~~~~