[ Android ] Custom NumberPicker

Android Number Picker를 Custom한 디자인으로 줄려고 할 경우, 

Theme를 변경 시켜야 하는데 기능은 그대로 사용하고 세부적인 것을 수정할려고 하니,

API에서 제공하는 함수로는 함수가 있었습니다.

그래서!!! 열심히 구글링을 해본 결과, Android 구글 소스에서 NumberPicker ( 4.2 버전 ) 을 빼와서 따로 Library화 시킨 소스가 있더라구요!

License 는 Apache license 2.0!! Open source 인거죠~ ㅎ

사이트 : https://github.com/SimonVT/android-numberpicker

위 소스만 가지고서는 내 마음대로 style 변경을 하기 힘듭니다.

그럼 제가 Test 해본 소스를 보여드립니다.

먼저, Eclipse에서 Application Project를 하나 생성 하세요.

그 생성한 Project에 위 사이트에서 받은 library 소스를 복사 합니다. 

복사는 아래와 같이 진행 하세요.

1. src 폴더에 있는 NumberPicker.java와 Scroller.java 파일을 가져 옵니다.

2. drawable 폴더에 있는 모든 xml 파일과 이미지 파일을 똑같이 복사 합니다.

   (xml 4개와 png 파일 7개가 사이즈 별로 있음)

3. layout 폴더에 number_picker_with_selector_wheel.xml 파일을 가져 옵니다.

4. values에 있는 xml파일 3개를 가져 옵니다.

위 내용대로 하면 에러가 없어 집니다.

하지만!!!

위 상태에서 그대로 사용하면 Resource 관련 에러가 뜹니다.

simonVT 소스에서 themes.xml에서도 이런 글을 볼 수 있는 데요.

    <!-- Copy one of these attributes to your own theme (choose either dark or light).

        <item name="numberPickerStyle">@style/NPWidget.Holo.NumberPicker</item>

        <item name="numberPickerStyle">@style/NPWidget.Holo.Light.NumberPicker</item>

    -->

위 Style에 아이템을 추가하여 사용하라는 의미입니다.

따라서, 복사하신 thems.xml에 한가지 더 추가할 내용이 있습니다.

    </style>

        <style name="TestTheme" parent="AppTheme">

        <item name="numberPickerStyle">@style/NPWidget.Holo.NumberPicker</item>

    </style>

위 parent 속성은 styles.xml에 보시면 기본 Theme로 생성해 놓은 것입니다.

그 형태 그대로 우선 상속을 받은 후 TestTheme에는  numberPickerStyle 속성 만 

NPWidget.Holo.NumberPicker로 지정한다는 의미 입니다.

이제 MainActivity에 위 Theme를 적용 시키고, MainActivity에서 NumberPicker를 사용 하기 되면

Android에서 제공하는 기본 NumberPicker가 아니라 직접 제어 할 수 있는 NumberPicker가 되는 것입니다.

AndroidManifest.xml

<activity

            android:name="com.example.numberpickertest.MainActivity"

            android:label="@string/app_name"

            android:theme="@style/TestTheme">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />

            </intent-filter>

        </activity>

이제!!!! 우리 스스로 NumberPicker를 디자인 할 수 있습니다.

제가 한가지 팁으로 NumberPicker에 Divider 역할을 하는 두 줄을 제거 시켜보겠습니다.

themes.xml

    <style name="NPWidget.Holo.NumberPicker" parent="NPWidget.NumberPicker">

        <item name="solidColor">@android:color/transparent</item>

        <item name="selectionDivider">@drawable/np_numberpicker_selection_divider</item>

        <item name="selectionDividerHeight">0dip</item>

        <item name="internalLayout">@layout/number_picker_with_selector_wheel</item>

        <item name="internalMinWidth">64dip</item>

        <item name="internalMaxHeight">180dip</item>

        <item name="virtualButtonPressedDrawable">@drawable/item_background_holo_dark</item>

    </style>

Divider에서 높이를 0으로 주었습니다. 이렇게 수정하면 두줄이 사라지는 것을 확인 할 수 있습니다.

위 내용 중에 더 필요하거나 질문 사항이 있으시면 댓글 달아주세요.

아니면 NumberPicker를 Custom화 시키는데 좋은 방법이 있으시는 분들도~^^

그럼 오늘도 즐코딩~