ImageView에서 selector 사용하기

Android에서 버튼을 만들다보면 동적으로 풍부한 사용자 경험을 주고 싶을 때가 많습니다. 전통적으로 웹에서 a:hover 같은 녀석이 그렇습니다. 안드로이드에서도 ImageView를 이용해 이미지 버튼을 표현하고 이를 눌렀을 때나 선택되었을 때 등 다양한 상태에 대해서 각기 다른 drawable을 사용할 경우에 selector 태그를 사용하기 마련인데, 쉽게 생각했다가 삽질을 많이 해서 정리해 보았습니다.

<ImageView android:id="@+id/image_male"
    android:src="@drawable/selector_ic_male"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

위와 같은 간단한 ImageView에 해당하는 selector는 아래와 같이 지정합니다. (clickable="true" 를 지정하지 않아도 클릭이 가능합니다.)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/ic_male_focused"/>
    <item android:state_focused="true" android:drawable="@drawable/ic_male_focused"/>
    <item android:state_selected="true" android:drawable="@drawable/ic_male_selected"/>
    <item android:drawable="@drawable/ic_male"/>
</selector>

제일 중요한 점이, 가장 하단에 기본 상태가 있어야 정상동작합니다.

세번째 상태인 선택되었을 경우에는 다음과 같이 onClick 이벤트에서 선택된 상태로 설정해주어야 합니다.

@OnClick(R.id.image_male)
public void clicked(ImageView view) {
    view.setSelected(true);
}