Android XML Selector 생성 및 적용하기

  안드로이드에서 Selector를 xml로 만들어서 Button이나 ListView 등 클릭 이벤트가 들어가는 View에 적용할 수 있다. 기본으로 제공하는 View를 특별히 커스텀하게 사용하지 않는 이상 기본 제공하는 Selector기능을 사용할 수 있지만, View를 커스텀하게 사용하는 경우가 대부분이기 때문에 Selector를 사용해야한다.

  예를 들면 Button을 눌렀을때(pressed)와 누르지 않았을 경우(nonPressed)에 이미지, 또는 색을 다르게 구분하고 싶을때 사용하는 것이 바로 Selector이다.

1. Drawable 폴더 생성

안드로이드 프로젝트를 생성하면 기본적으로 drawable 폴더는 추가 되어 있지 않기 때문에 사용자가 추가해 주어야한다. res폴더 밑에 drawable 디렉토리를 생성한다.

new > Directory > drawable

2. Color Selector 만들기

Color를 이용한 Selector든 Image를 이용한 Selector 모두 android:drawable="" 속성에 적용한다.

Color Selector는 색상값을 바로 입력하면 사용이 불가능하고, color.xml을 만들어 주어야한다.

• color.xml

<!--?xml version="1.0" encoding="utf-8"?-->

<resources>

    <color name="pressed">#B3CA6F</color>

    <color name="nonpressed">#4D5052</color>

</resources>

color.xml파일은 res/values 폴더에 생성한다.

• btn_color_selector.xml

<!--?xml version="1.0" encoding="utf-8"?-->

<!--color selector-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 클릭 했을 경우 -->

    <item android:state_pressed="true" android:drawable="@color/pressed"/>

    <!-- 클릭하지 않은 경우 -->

    <item android:state_pressed="false" android:drawable="@color/nonpressed"/>

</selector>

3. Image Selector 만들기

pressed(눌렀을때) 이미지와 nonpressed(누르지 않았을때) 이미지를 res/drawable에 추가한다.

• btn_image_selector.xml

<!--?xml version="1.0" encoding="utf-8"?-->

<!--image selector-->

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 클릭 했을 경우 -->

    <item android:state_pressed="true" android:drawable="@drawable/btn_pressed"/>

    <!-- 클릭하지 않은 경우 -->

    <item android:state_pressed="false" android:drawable="@drawable/btn_nonpressed"/>

</selector>

4. Selector 적용하기

• main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:orientation="vertical"

              android:layout_width="fill_parent"

              android:layout_height="fill_parent" >

    <Button

            android:layout_weight="2"

            android:text="color"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@drawable/btn_color_selector"/>

    <Button

            android:layout_weight="2"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:background="@drawable/btn_image_selector"/>

</LinearLayout>

Button에 적용 : android:background=""

ListView에 적용 : android:listSelector=""

5. 적용 화면

  nonPressed 상태                              pressed 상태

   

6. Press 상태 종류

• android:state_enable : 사용 가능 상태
• android:state_selected : 선택 상태
• android:state_pressed : 클릭 상태 (눌려있는 경우)
• android:state_focused : 포커스 상태
• android:state_checked : 체크된 상태