안드로이드 버튼 이미지 이벤트에 따라 다르게 넣기

안드로이드의 버튼에 이미지를 넣는 방법은 아주 간단하다. selector라는 것을 사용하여 배경으로 지정해주면 된다. 그런데 ImageButton이라는 것도 있다. 그럼 Button과 ImageButton의 다른 점은 무엇이란 말인가?

Button VS ImageButton

API만 보아도 둘의 차이점을 알 수 있다. ImageButton은 ImageView를 상속 받아 만들어졌고, Button은 TextView를 상속받아 만들어졌음을 알 수 있다. 말 그대로 ImageButton은 이미지인 것이고, Button은 텍스트뷰인 것이다. 이미지뷰에 TEXT를 넣을 수 없듯이, 이미지버튼에도 텍스트가 들어가지 않는다. 대신 버튼엔 텍스트를 넣을 수 있고, 배경을 설정할 수 있는 것이다. 텍스트가 굳이 필요 없다면 이미지버튼으로 사용하면 되고, 배경+텍스트가 필요한 UI라면 버튼을 이용하면 된다.

 Selecor 이용하기

위와 같은 이미지 3개를 준비했다. btn_d.png는 버튼 disable시 사용될 이미지, btn_n은 기본 보여지는 이미지, btn_p는 누르거나, 포커스 되었을 대 보여질 이미지이다.

위 경로에다 넣어주면 된다. drawble-해상도 폴더에 각각 넣어주면 되며, enable/disable을 사용하지 않을 것이라면, 기본/누름 상태 두개만 있어도 무방하다. selector.xml의 경우 이름은 마음대로 지정하면 되고, drawable폴더에 넣어주면 된다. 아래 코드를 참고하자.

<?xml version="1.0" encoding="UTF-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/btn_p" android:state_pressed="true" /> <item android:drawable="@drawable/btn_p" android:state_focused="true" /> <item android:drawable="@drawable/btn_p" android:state_selected="true" /> <item android:drawable="@drawable/btn_d" android:state_enabled="false" /> <item android:drawable="@drawable/btn_n" /> </selector>

코드를 보면 알겠지만 별거 없다. 이벤트에 해당하는 이미지를 지정해주기만 하면 된다. 기본적으로 pressed, focused, selected를 지정해주면 되고, 나의 경우는 enabled=false 즉 disable상태일때의 이미지를 추가로 지정해주었다. 

적용하기

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_selector" android:enabled="false" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_selector" />

위 코드를 이용해서 적용하면 된다. 그냥 기본적인 버튼에 background만 해당 selector를 적용해주었다. 그럼 적용된 모습은 어떨까?

적용된 모습이다. 위 회색버튼은 disabled상태라서 그에 해당하는 이미지가 보여진 것이고, 아래버튼은 normal상태이다. 위에건 disable상태라서 안눌릴테고, 아래 버튼을 누르거나 focus 해주면 빨간 버튼으로 바뀌게 된다. 위 이미지처럼 이미지 자체에 글자가 있어서 굳이 text를 설정할 피룡가 없을 땐 ImageButton을 사용해도 된다.