[Android, Kotlin] Selector

0. Selector

• View 에 대한 상태값(State)에 따라 디자인적 요소(Attribute)를 가미하여 꾸며 줄 수있는데(Customizing) 그것을 가능하게
  하는 것이 Selector 로 xml 형식으로 작성 가능하다.
  Selector 로 작성된 속성들은 한번 만들어 두면 가져다 쓰면 되므로 활용도가 높고 동시에 여러 View 에 적용가능하여
  효과적이다.

• State 속성 종류는 다음과 같다.

  • state_pressed
  • state_accelerated
  • state_activated
  • state_active
  • state_checkable
  • state_checked
  • state_drag_can_accept
  • state_drag_hovered
  • state_enabled
  • state_first
  • state_focused
  • state_hovered
  • state_last
  • state_middle
  • state_selected
  • state_single
  • state_window_focused

 
 

1. 기능 구현

• 버튼1 : state_pressed (ture/false)를 활용하여 상태변화에 따라 Color 를 변경해 보자.
• 버튼2 : state_pressed (ture/false)를 활용하여 상태변화에 따라 Image 를 변경해 보자.

 
 

2. Android Studio에서 기본 프로젝트(with empty activity) 생성하자!

생성시 'Empty Activity'로 기본 생성

 
 

3. ViewBinding 사용을 위한 build.gradle 설정

이번 예제에서는 View Binding 이 필요가 없으므로 기본을 그대로 사용하도록 하자.

 
 

4. 준비물 (상태 변화에 따라 적용될 이미지 2개를 준비하자.)

• res > drawable : image (copy&paste)
  

  

 
 

5. Selector 파일 만들기

• selector 파일 만들기 : res -> drawable 우클릭 -> New -> Drawabke Resource File
  

  

• ex) File Name : selector_button
  

  

 
 

6. selector_button.xml

• 연결될 View 의 상태값을 설정

  • item android:state_pressed="true" : 버튼이 눌렸을때
  • item android:state_pressed="false" : (기본) 버튼이 눌리지 않았을때

• shape : shape 태그 안에 여러 속성값들을 설정하여 원하는 모양으로 만들기

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape>
            <solid android:color="#FBFB00"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
    <item android:state_pressed="false">
        <shape>
            <solid android:color="#EDF3B6"/>
            <corners android:radius="10dp"/>
        </shape>
    </item>
</selector>

 
 

7. selector_button_img.xml

• item android:state_pressed="true" android:drawable="@drawable/android_icon"

  버튼이 눌렸을때 이미지 -> "android_icon"

• item android:state_pressed="false" android:drawable="@drawable/android_icon_gray"

  (기본) 버튼이 눌리지 않았을때 이미지 -> "android_icon_gray"

<?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/android_icon">
    </item>
    <item android:state_pressed="false" android:drawable="@drawable/android_icon_gray">
    </item>
</selector>

 
 

8. activity_main.xml

• selector xml 적용 전

• selector xml 적용 후

  • android:background="@drawable/selector_button"
  • android:background="@drawable/selector_button_img"

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button2"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:text="겨울시인"
        android:textColor="#FF4081"
        android:textStyle="bold"
        android:background="@drawable/selector_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="272dp"
        android:text=""
        android:background="@drawable/selector_button_img"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 
 

9. 실행결과

 
 

10. Reference

유튜버 홍드로이드님의 안드로이드 앱 만들기 #27 Selector