[2018.11.04] 113. ColorStateList 개념 및 실습

도입

이번 포스팅에서는 ColorStateList에 대해 정리할 예정이다. 

View가 선택(select)되거나 눌렸(press)을 상황에 따라 View의 background, text color 등의 색을 바꿔줘야하는 경우가 있었다.

이런 경우, 

1. 코드 안에서 리스너를 통해 처리

2. xml의 selector로 처리

크게 2가지 방법으로 처리할 수 있다.

그 중에 xml의 selector로 처리하면 비지니스 로직과 색 변경 로직을 파일로서 나눠 관리할 수 있는 장점이 생긴다.

selector를 사용하면 컴파일의 결과로 ColorStateList가 반환된다.

개념

(출처 - https://developer.android.com/guide/topics/resources/color-list-resource)

ColorStateList는 개발자가 View의 상태에 따라 색을 적용하기 위해 정의한 xml 정의한 객체이다.

개발자는 item element로 상태에 따른 색을 정의 할 수 있다.

실습

상태에 따라 text와 background 색을 변경하는 실습을 진행할 예정이다.

Step1. selector 생성

a. res/color/selector_button_text.xml 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/selectedText" android:state_pressed="true" />
    <item android:color="@color/unSelectedText" />
</selector>

b. res/drawable/selector_button_background.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/selectedBackground" android:state_pressed="true" />
    <item android:drawable="@color/unSelectedBackground" />
</selector>

Step2. selector 적용

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="50dp"
        android:text="Button1"
        android:textColor="@color/selector_button_text"
        android:textAllCaps="true"
        android:background="@drawable/selector_button_background" />
 
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="50dp"
        android:text="Button2"
        android:textColor="@color/selector_button_text"
        android:textAllCaps="true"
        android:background="@drawable/selector_button_background" />
 
</RelativeLayout>

주의해야 할점

첫번째 방법인 ColorStateList를 정의 후 backgroundTint에 적용하는 방법을 사용할 때 아래와 같은 코드를 통해서 적용한다.

private val colorStateList = ColorStateList(    
    arrayOf(    
        intArrayOf(android.R.attr.state_selected),    
        intArrayOf(-android.R.attr.state_selected)    
    ) /* states */,    
    intArrayOf(    
        Color.parseColor("#000269"),    
        Color.parseColor("#d7d7d7")
    ) /* colors */    
)
 
// ...
targetView.backgroundTintList = colorStateList

그러나 여기서 주의해야 할 점은 android.R.attr.state_selected 와 같이 android의 attribute를 사용하는데 attribute에 직접 접근은 lollipop부터 제공하고 있다. 그렇기 때문에 kitkat을 포함한 이하 버전에서는 해당 코드가 동작하지 않는다. 

그렇기 때문에 

selector,

View.VISIBLE, View.GONE

등을 통해 문제를 해결해야 한다.

스크린샷

#ColorStateList #selector #android selector