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. -->
라고 합니다.
끝.
Author And Source
이 문제에 관하여(selector 태그), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@suee97/selector-태그저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)