Drawable (드로어블) - StateListDrawable

1. StateListDrawable (상태 드로어블)

상태 드로어블은 뷰의 상태에 따라 뷰에 보여줄 그래픽을 다르게 지정할 수 있다.

/res/drawable 폴더 안에 새로운 XML 파일을 만들면 최상위 태그는 <selector>가 된다.

그 안에 <item> 태그를 넣을 수 있으며, drawable 속성에는 이미지나 다른 그래픽을 설정하여 화면에 보이도록 할 수 있다.

state_ 로 시작하는 속성은 상태를 나타낸다. 

state_pressed: 눌린 상태

state_focused: 포커스를 받은 상태

2. 예제1 결과 화면

  

3. 예제1 - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.tistory.qlyh8.pracitice.MainActivity">
 
    <Button
        android:layout_width="128dp"
        android:layout_height="128dp"
        android:background="@drawable/thumbs_up"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
 
</android.support.constraint.ConstraintLayout>
 

4. 예제1 - drawable/thumbs_up.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 
    <!-- 순서 지켜야 한다. -->
    <item android:state_pressed="true"
        android:drawable="@drawable/thumbs_up_selected"/>
 
    <item android:drawable="@drawable/thumbs_up_not_selected"/>
</selector>

5. 예제2 결과 화면 - 입력상자에 대한 이미지 전환 이벤트

6. 예제2 - drawable/state_focus_press.xml

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

7. 예제2 - activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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="com.tistory.qlyh8.pracitice.MainActivity">
 
   <EditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:background="@drawable/state_focus_press"/>
 
</LinearLayout>
 

출처: https://www.edwith.org/boostcourse-android/lecture/20420/