xml로 버튼 커스텀 하기(selector)

 저번 글에서 shape에 대해서 다뤄봤는데 이번엔 selector에 대해서 다뤄보겠습니다. shape를 먼저 쓴 이유는 아무래도 selector를 위해 shape를 알아두면 좋은 부분도 있고, shape를 더 자주 사용했기 때문입니다.

---

 안드로이드에서 selector를 사용할 일은 꽤나 많습니다. ToggleButton에서도 selector를 통해 on off에 대해서 원하는 이미지가 등장할 수 있게 배치할 수 있습니다.

 또는 버튼이 눌린 상태에 있는 동안 다른 이미지(예를 들어 버튼이 눌러지고 있는 느낌의 이미지)를 띄워줄 수도 있고, EditTextView의 포커싱을 둘 때 디자인을 변경시킬 수도 있습니다. 그와 관련된 속성을 확인한 후, 사용법에 대해서 설명하겠습니다.

 

• android:state_checked : checked 변수의 상태에 따라서 설정
• android:state_enabled : 현재 view의 사용 가능 상태에 따라 설정(버튼 비활성화 기능으로 자주 확인)
• android:state_pressed : 현재 view가 눌러진 상태에 따라서 설정
• android:state_focused : 현재 view가 focusing을 가지고 있는지 여부에 따른 설정(EditText가 대표적!)
• android:state_selected : 현재 view가 선택된 상태에 따라 설정(checked와 거의 유사하지만 checked는 식별자라면 seleceted는 상태를 의미)
• android:state_checkable : 현재 view가 체크가 가능한 상태인지(checked 변수가 사용가능하다면 true로 볼 수 있다!)
• android:state_window_focused : view가 화면에 등장한 상태인지 확인(현재 view가 현재 단말기 화면에 육안으로 확인 가능한 경우)
• android:state_activated : 버튼이 활성화 상태에 따라서 설정
• android:state_hovered :  커서가 현재 view에 존재하는지에 따라서 설정(휴대폰 화면을 드래그하면서 이동하다 현재 view를 지나치는 경우)

 이 외에도 몇 가지 상태가 더 있습니다. 이는 developer.android.com/reference/android/graphics/drawable/StateListDrawable 안드로이드 공식 문서에서 추가적인 상태와 설명을 확인할 수 있습니다.

 

 실제로 이 상태들을 이용해서 selector를 만들어내는 것은 어렵지 않습니다.

(bg_main_selector.xml)

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape>
            <solid android:color="#FFFFFF"/>
            <corners android:radius="200dp" />
            <stroke 
                android:color="@color/mainColor" 
                android:width="1dp" />
        </shape>
    </item>
    <item>
        <shape>
            <solid android:color="#FFFFFF"/>
            <corners android:radius="200dp" />
            <stroke 
                android:color="#d0d0d0" 
                android:width="1dp" />
        </shape>
    </item>
</selector>

 

 위와 같은 selector 내부에 item을 만들고, 그 아이템의 상태를 정의하게 되면 상태에 맞는 item을 selector가 제공하게 됩니다. 이런식으로 작성하게 되면 shape를 이용해 작성한 디자인을 사용할 수 있게 됩니다.

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
        android:state_checked="true" 
        android:drawable="@drawable/ImageChecked">
    </item>
    <item 
        android:drawable="@drawable/ImageUnChecked">
    </item>
</selector>

 

 위와 같은 형태로 이미지를 사용할 수도 있습니다. item 내부에 들어가는 것들은 기존 layout에서 background와 같은 것들로 설정하던 것들은 대부분 사용 가능하다고 보시면 됩니다.

 

<ToggleButton
    android:id="@+id/tenMinuteButton"
    android:layout_width="match_parent"
    android:checked="true"
    android:tag="10"
    android:background="@drawable/bg_main_selector" //이런식으로 적용
    android:textColor="@color/mainColor"
    android:textOff="off"
    android:textOn="on" />

 

 background에 drawable에 작성한 selector를 적용하면 checked 상태에 따라 배경이 달라지는 것을 확인할 수 있습니다. 동일한 형태로 state와 button 상태만 적절히 조합해 변경할 수 있으면 모든 상태에 대해 적용하는 것은 어렵지 않을 것입니다.

 

 item 내부의 shape는 이전 글에서 설명했던 그 shape이며, 저 부분에 shape 대신 다른 것들을 이용할 수도 있습니다.

 

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/mainColor" />
    <item android:color="@color/white" />
</selector>

 

 또한 이런식으로 만들어 놓은 아이템을 textColor와 같은 변수에 적용할 수도 있습니다.

 

<ToggleButton
    android:id="@+id/tenMinuteButton"
    android:layout_width="match_parent"
    android:checked="true"
    android:tag="10"
    android:background="@drawable/bg_main_selector"
    android:textColor="@drawable/tc_main_color" //이런식으로 적용
    android:textOff="off"
    android:textOn="on" />

 

 위의 selector를 tc_main_color로 적용해두었다면, 버튼에서는 저런 식으로 적용할 수 있습니다. 저렇게 적용하게 되면 텍스트의 색상이 state에 따라 변경되는 것을 확인하실 수 있습니다.

---

 안드로이드에서 어떤 것이든, xml에 적용하는 부분은 항상 난이도가 높은 것은 아니지만 어떤 것이 있는지에 대해서 찾는 것이 어렵다고 생각합니다. 이 정도 기본 지식만 알고 있다면 응용 자체는 난이도가 낮은 편에 속하기 때문에 항상 기록해두는 습관이 중요하다고 생각합니다.