selector 태그

selector 태그

selector 태그는 컴포넌트의 상태에 따라 다른 리소스를 보여줘야 하는 drawable을 만들 경우 사용하는 태그입니다.

예를 들어, 카테고리 버튼이 클릭되었을 때와 그렇지 않을 때 다른 아이콘 색상을 보여주는 것이 이에 해당합니다.

위의 사진처럼 카테고리 화면을 클릭했을 때와 그렇지 않을 때 다른 이미지를 보여줘야 하는데, 이를 xml로 구현하고자 할 때 selector태그를 사용할 수 있습니다.

사용하기

먼저 색칠된 카테고리 drawable과 색없는 카테고리 drawable을 만들어줘야 합니다.
제 경우 vector asset을 사용했는데, webp와 같은 확장자도 사용할 수 있습니다.

ic_tabber_category_on.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
  <path
      android:pathData="M7,22h18v2H7zM7,15h18v2H7zM7,8h18v2H7z"
      android:fillType="evenOdd">
    <aapt:attr name="android:fillColor">
      <gradient 
          android:startY="15.90128"
          android:startX="9.57742"
          android:endY="16.09872"
          android:endX="26.18404"
          android:type="linear">
        <item android:offset="0" android:color="#FFFD62FF"/>
        <item android:offset="1" android:color="#FF6B19FF"/>
      </gradient>
    </aapt:attr>
  </path>
</vector>

ic_tabber_category_off.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="32dp"
    android:viewportWidth="32"
    android:viewportHeight="32">
  <path
      android:pathData="M7,22h18v1.5H7zM7,15h18v1.5H7zM7,8h18v1.5H7z"
      android:fillColor="#111"
      android:fillType="evenOdd"/>
</vector>

그 다음 selector 태그를 활용해서 이 둘을 담으면 됩니다.

selector_category_icon.xml

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

세번 째 줄 item속성 오른쪽 끝을 보면 android:state_selected가 있습니다. 여기에 선택되었을 때의 drawable을 담아주면 끝입니다.

android:state_selected이 속성을 따라가보면

<attr name="state_selected" format="boolean" />
<!-- State value for {@link android.graphics.drawable.StateListDrawable StateListDrawable},
set when the user is pressing down in a view. -->

라고 합니다.

끝.