Android NumberPicker を拡張して ItemPicker を作ってみた。

Android には日時を設定するための DatePicker, 時刻を設定するための TimePicker が用意されています。これらの Picker の元になっているのが NumberPicker です。ちなみに NumberPicker は非公開クラスになっています。

この NumberPicker のレイアウトでは、 + ボタンが上にあるために、+ ボタンを押している間、設定している値が指で見えなくなってしまいます。そこで、この NumberPicker を元にして + ボタンと - ボタンが設定値の左右にある Picker を作ってみました。

ItemPicker at yanzm/yanzm-s-Custom-View-Project - GitHub

ついでに、ボタンと入力部分の画像リソースと、選択範囲および選択アイテムを attribute として指定できるようにしました。

こんな感じで、XML から値の設定などが全部できます。

view plainprint?

1. <LinearLayout   
2.     xmlns:android="http://schemas.android.com/apk/res/android"  
3.     xmlns:custom="http://schemas.android.com/apk/res/yanzm.products.customview.itempicker"  
4.       
5.     android:orientation="vertical"  
6.     android:layout_width="fill_parent"  
7.     android:layout_height="fill_parent"  
8.     >  
9.     <DatePicker   
10.         android:id="@+id/datePicker1"   
11.         android:layout_width="wrap_content"   
12.         android:layout_height="wrap_content"/>  
13.       
14.     <TimePicker   
15.         android:id="@+id/timePicker1"   
16.         android:layout_width="wrap_content"   
17.         android:layout_height="wrap_content"/>  
18.   
19.     <yanzm.products.customview.itempicker.ItemPicker  
20.         android:layout_width="180dip"   
21.         android:layout_height="wrap_content"  
22.         android:focusable="true"  
23.         android:focusableInTouchMode="true"  
24.         android:text="+"  
25.         custom:start="0"  
26.         custom:end="10"  
27.         custom:current="2"           
28.         />  
29.   
30.     <yanzm.products.customview.itempicker.ItemPicker  
31.         android:layout_width="240dip"   
32.         android:layout_height="wrap_content"  
33.         android:focusable="true"  
34.         android:focusableInTouchMode="true"  
35.         android:text="+"  
36.         custom:start="1"  
37.         custom:end="9"  
38.         custom:current="2"     
39.         custom:speed="100"  
40.         custom:displayedValue="@array/color_names"        
41.         />  
42.           
43.     <yanzm.products.customview.itempicker.ItemPicker  
44.         android:layout_width="240dip"   
45.         android:layout_height="wrap_content"  
46.         android:focusable="true"  
47.         android:focusableInTouchMode="true"  
48.         android:text="+"  
49.         custom:start="1"  
50.         custom:end="9"  
51.         custom:current="4"  
52.         custom:incrementBackground="@drawable/picker_bg"  
53.         custom:decrementBackground="@drawable/picker_bg"  
54.         custom:editTextBackground="@drawable/input_bg"  
55.         custom:displayedValue="@array/color_names"        
56.         />   
57.                           
58. </LinearLayout>  

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:custom="http://schemas.android.com/apk/res/yanzm.products.customview.itempicker" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <DatePicker android:id="@+id/datePicker1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TimePicker android:id="@+id/timePicker1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <yanzm.products.customview.itempicker.ItemPicker android:layout_width="180dip" android:layout_height="wrap_content" android:focusable="true" android:focusableInTouchMode="true" android:text="+" custom:start="0" custom:end="10" custom:current="2" /> <yanzm.products.customview.itempicker.ItemPicker android:layout_width="240dip" android:layout_height="wrap_content" android:focusable="true" android:focusableInTouchMode="true" android:text="+" custom:start="1" custom:end="9" custom:current="2" custom:speed="100" custom:displayedValue="@array/color_names" /> <yanzm.products.customview.itempicker.ItemPicker android:layout_width="240dip" android:layout_height="wrap_content" android:focusable="true" android:focusableInTouchMode="true" android:text="+" custom:start="1" custom:end="9" custom:current="4" custom:incrementBackground="@drawable/picker_bg" custom:decrementBackground="@drawable/picker_bg" custom:editTextBackground="@drawable/input_bg" custom:displayedValue="@array/color_names" /> </LinearLayout>

attribute として用意したのは

• incrementSrc : 増加ボタン (ImageButton) の 画像リソース
• decrementSrc : 減少ボタン (ImageButton) の画像リソース
• incrementBackground : 増加ボタン (ImageButton) の 背景画像リソース
• decrementBackground : 減少ボタン (ImageButton) の背景画像リソース
• editTextBackground : 設定値 (EditText) の背景画像リソース
• start : 最少値 (int)
• end : 最大値 (int)
• current : 現在の値 (int)
• speed : ボタン長押し時の自動増加／減少の切り替え速度
• displayedValue : 数字ではなく文字を設定値にする場合の文字列配列。最小値が index 0 にあたる