ImageButton 또는 ImageView를 사용할 경우 onclick 이벤트 발생 시 이미지를 다르게 하여 클릭이벤트가 발생하고 있음을 보여주고 싶을 경우가 있다.
예를 들면 다음과 같은 경우이다.
이미지 버튼이 아래와 같은 모양이었는데..
클릭을 하는 순간 아래와 같이 보이고 싶은 경우
XML을 이용하여 편하게 할 수 있는 방법이 있다.
다음과 같은 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/blue_check" /> <!-- pressed -->
<item android:state_focused="true"
android:drawable="@drawable/blue_check" /> <!-- focused -->
<item android:drawable="@drawable/blue_uncheck" /> <!-- default -->
</selector>
여기서 blue_check는 테두리가 있는 blue_check.png라는 파일이고 blue_uncheck는 테두리가 없는 blue_uncheck.png라는 파일이다.
위 파일을 이미지가 있는 디렉토리인 drawble밑에 color_blue.xml 이라고 저장을 하자.
그리고 실제 레이아웃 파일에서는 아래와 같이 구현한다.
<ImageButton android:id="@+id/color_blue"
android:background="@drawable/color_blue"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
/>
버튼을 클릭할때마다 이미지가 자동으로 변환되는 것을 확인할 수 있을 것이다.
