스피너(Spinner) 사용 - 크기 및 모양 조작하기

출처 - http://withwani.tistory.com/168

 

Android Spinner를 기본 상태로 사용하면 크기 조절이 힘들어 투박하게 보일 수 있다. 그리고 각 제조사별로 사용하는 컴포넌트가 달라 제조사별 단말기마다 다른 Spinner가 보이게 된다.

<그림 1> Spinner Button image

상기 이미지는 HTC Desire 단말기에서 Dropdown style Spinner를 구현한 모습니다. 다른 단말기에서는 다르게 보일 것이다. 위의 이미지는 우측의 버튼 이미지로 인해 Height 조정이 제한적이다. 그렇기 때문에 이번 글에서 상기 Spinner를 변경하는 것으로 새로운 Spinner 상속 없이 Resource 조작만으로 간단하게 수정하는 방법을 설명할 것이다.

우선 기본적인 구조를 살펴보자.

## XML resource file : layout/spinner_ex.xml ## <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_vertical" />

## JAVA code file : Spinner_Ex.java ## ArrayAdapter adtRegion = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_dropdown_item, contry_list); Spinner spRegion = (Spinner)findViewById(R.id.spinner); spRegion.setAdapter(adtRegion);

## Shown image ## <그림 2> Spinner pop-up list image

Spinner는 기본적으로 Dropdown style과 Normal style을 주로 사용한다. 위에 구현된 것은 Dropdown style로 Single Checkbox가 구현되어 있는 구조다. 그리고 <그림 1>과 <그림 2>를 보면 눈치 챌 수 있겠지만 Spinner의 Button에 구현된 View와 Spinner의 Button을 선택하여 보여지는 pop-up list에서의 item View는 동일한 구조를 가진다. 즉 하나의 View로 재 사용함을 알 수 있다. 그렇기 때문에 Button의 background를 변경하면 pop-up list의 View도 같이 바뀌게 된다. 이 둘 사이에 다른 View를 적용하고 싶으면 Spinner를 상속받아 추가적으로 작업을 해야 하는 것이기에 여기서는 다루지 않겠다.

우선적으로 Spinner Button의 우측 Pin모양의 이미지로 인해 height 변경에 제한적이기 때문에 Simple한 Normal style의 이미지(9 patch image)로 변경하도록 한다.

<그림 3> btn_dropdown image

<그림 4> btn_dropdown_pressed image

<그림 3> <그림 4>와 같이 SDK에 포함된 이미지 중 [android.R.layout.simple_spinner_item] style에 사용하는 Background 이미지를 가져와 사용하기로 한다. 상기 이미지를 사용하여 spinner_bg.xml을 생성하고 Spinner Button에 적용하기로 한다. 그리고 원하는 Height를 추가적으로 입력하기로 한다.

## XML resource file : drawable/spinner_bg.xml ## <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" android:drawable="@drawable/btn_dropdown_pressed" /> <item android:drawable="@drawable/btn_dropdown" /> </selector>

## XML resource file : layout/spinner_ex.xml ## <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="38dip" android:gravity="center_vertical" android:background="@drawable/spinner_bg" />

## Shown image ## <그림 5> 변경 후 Spinner button image <그림 6> 변경 후 Spinner pop-up list image

적용 후 상기 그림처럼 Spinner button 변경되고 Height도 줄어든 것을 확인할 수 있다. 그렇지만 Radio button이 height에 맞지 않아 위 아래가 잘려 있는 모습이 썩~ 보기 좋지 않다. 그러므로 Radio button도 변경하도록 하자. Radio button의 변경은 Spinner의 내부 View, 즉 Button과 List에 사용되는 View를 변경하는 것이므로 이때까지 사용하고 있던 [android.R.layout.simple_spinner_dropdown_item]를 사용할 수 없다. 새로운 View를 생성해야 한다. Spinner에서 사용되는 View는 CheckedTextView이다. 이 Vew를 사용하여 좀 더 작은 Radio button을 적용한 View를 생성하여 적용하도록 한다.

## XML resource file : android.R.layout.simple_spinner_dropdown_item.xml ## <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="?android:attr/spinnerDropDownItemStyle" android:singleLine="true" android:layout_width="fill_parent" android:layout_height="?android:attr/dropdownListPreferredItemHeight" android:ellipsize="marquee" />

## XML resource file : layout/simple_spinner_dropdown_item_ex.xml ## <CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/text1" style="@style/SpinnerCheckedSmall" android:singleLine="true" android:layout_width="fill_parent" android:layout_height="38dip" android:gravity="center_vertical" android:paddingRight="8dip" android:paddingLeft="8dip" android:ellipsize="marquee" />

## XML resource file : styles.xml ## <style name="SpinnerCheckedSmall"> <item name="android:checkMark">@drawable/spinner_checked</item> </style>

## XML resource file : drawable/spinner_checked.xml ## <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="false" android:drawable="@drawable/btn_radio_off" /> <item android:state_checked="true" android:drawable="@drawable/btn_radio_on" /> </selector>

<그림 7> btn_radio_on image <그림 8> btn_radio_off image

## JAVA code file : Spinner_Ex.java ## ArrayAdapter adtRegion = new ArrayAdapter<String>(this, R.layout.simple_spinner_dropdown_item_ex, contry_list);

<그림 9> 변경 후 Spinner Button image <그림 10> 변경 후 Spinner pop-up list image

<그림 9>와 <그림 10>에서 보듯이 새로 생성한 View가 적용되었다. <그림 1>과 <그림 2>와 비교해보면 확연히 줄어든 height와 이미지를 확인할 수 있다.

이번 글은 최대한 쉽게 설명하기 위해 장황하게 적었지만 Resource만 조금 수정하는 아주 간단한 작업이다. 이 부분에 대해 필요성은 가지고 있었지만 해결 방법을 모르고 있었던 필자가 적은 것이니 같은 고민을 하고 있는 개발자가 있다면 도움이 되었으면 좋겠다.