본문 바로가기

안드로이드/부스트코스 안드로이드 기본편

[안드로이드 기본] 셀렉터 속성 정리하기

버튼에 셀렉터를 지정하는 일은 안드로이드 개발하면서 많이 발생하는 일이다.

셀렉터를 지정하는 방법과 셀렉터 속성에 대해서 정리를 해보자!

 

셀렉터는 /res/drawable 디렉터리에 위치한 drawable 리소스로 만들어진다.

button에는 android:drawable의 속성 값으로 들어가게 된다.

 

selector 속성의 종류

  • android:state_pressed : 뷰가 눌렸을 때 (예, 터치나 클릭이 발생했을 때)
  • android:state_focused : 뷰에 포커스가 위치했을 때 (예, EditText를 입력할 수 있을 때)
  • android:state_selected : 뷰를 선택했을 때 (예, 방향키로 이동하다가 선택했을 때)
  • android:state_checkable : 체크 가능한 상태일 때 (예, 체크 박스를 체크할 수 있는 상태일 때)
  • android:state_checked : 체크된 상태일 때 (예, 체크박스가 체크된 상태일 때)
  • android:state_enabled : 사용할 수 있는 상태 일때(예, 터치나 클릭 이벤트 등을 받을 수 있는 상태일 때)

간단하게 selector 기본 예제로 버튼을 눌렀을 때 효과를 적용해보자!

 

먼저 selector 속성을 적용하기 위해서 무엇이 필요할까?

1. 눌리지 않았을 때의 버튼 디자인

2. 눌렸을 때의 버튼 디자인

 

셀렉터를 적용하기 위해서 drawable 디렉터리에 drawable 리소스를 만들어야한다.

 

[shape_unclicked.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_green_dark" />
    <solid android:color="@android:color/white" />
    <corners android:radius="5dp" />
</shape>

 [shpae_clicked.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_green_dark" />
    <solid android:color="@android:color/holo_green_dark" />
    <corners android:radius="5dp" />
</shape>

<shape> element 안의 strok(테두리), solid(면), cornes(모서리) 속성 값을 주어 커스터마이징한다.

unclicked(왼쪽) / clicked(오른쪽)

이 두가지 drawable 리소스를 아래와 같이 selector 코드 안에 넣어주면된다.

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

 

이렇게 만들어진 selector drawable 리소스를 button의 background 속성에 넣어주면된다.

<Button
        android:id="@+id/button1"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/selector_button"
        android:text="버튼"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

 

버튼에 셀렉터 적용하기 전체 코드로 이동하기

 

혹시나 android:state_pressed 외의 다른 기능들도 확인하고 싶다면,

아래의 참고 블로그 링크로 이동하여 공부해봐도 좋을거다.

오치리의 일상 블로그의 selector 관련글로 이동하기