2011년 10월 16일 일요일

Selector 를 이용해 widget(Button, CheckBox 등)의 모양 바꾸기

Gingerbread 부터 많이 나아졌지만, Android 의 기본 widget(버튼, 체크박스, 등등...)은 별로 예쁘지 않기로 유명하다.

특히 버튼이나 체크박스의 경우 앱의 디자인에 어울리는 모습으로 커스터마이징 해야 하는 경우가 많은데, selector 를 이용하는 게 편하다.

기존 widget 과 전혀 다른 동작을 하길 원하는 커스터마이징이라면 상속을 받아 새로운 widget 을 만들어야겠지만, 단순한 모양 변화라면 selector 가 적당하다.

selector 는 Android resource system 에서 사용되는 XML drawable 의 element 중 하나로, 말 그대로 selection 가능한 drawable 을 의미하며, 내부 element 로 각 상황(포커스를 받았는지, 터치 되었는지, 포커스를 잃었는지, 비활성화 되었는지 등) 에 따른 형태를 표현할 수 있다.

0. 커스텀해서 사용할 이미지를 준비한다.
이미지 파일을 준비해서 res/drawable 아래 적당한 위치(drawable-hdpi 가 될수도 있고, drawable-mdpi 가 될수도 있고...)에 넣는다.
꼭 이미지가 아니라 xml drawable 이 될수도 있겠다.

1. res/drawable/ 아래에 적당한 이름의 xml 파일을 만들고 다음과 같은 형식으로 입력한다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="true"
        android:state_checked="true"
        android:drawable="@drawable/my_check_on" />

    <item android:state_enabled="true" 
        android:state_checked="false"
        android:drawable="@drawable/my_check_off" />

    <item android:state_enabled="false"
        android:drawable="@drawable/my_check_disabled" />
</selector>

위의 예는 체크박스를 위한 drawable 을 정의한 것으로, 활성화 되었고 체크 되었을 때에는 my_check_on.png 를, 활성화 되었고 체크되지 않았을 때에는 my_check_off.png 를, 비활성화 되었을 때에는 체크 여부에 관계없이 my_check_disabled.png 를 보여주게 될 것이다.
기타 상태 정보를 위해 사용가능한 selector 와 item 의 attributes 정보는 다음 링크에서 확인 가능하다.

2. 사용할 widget 의 적절한 속성으로 앞서 작성한 xml 파일의 이름을 준다.
적절한 속성은 사용할 widget 마다 다르다. Button 이라면 android:background 를 지정해 주면 되고, 예를 들고 있는 CheckBox 라면 android:button 이다.
예를 들면 다음과 같은 식이다.

    <CheckBox android:layout_height="wrap_content"
        android:text="" android:id="@+id/my_checkbox"
        android:layout_width="wrap_content"
        android:layout_gravity="center"
        android:button="@drawable/my_checkbox_drawable_selector"      
    />


댓글 없음:

댓글 쓰기