View 롤오버 처리(텍스트 색상, 배경 색상)

GUI를 구성할 때 롤오버 기능을 넣으면 보다 다이나믹한 느낌을 줄 수 있다.

주로 객체를 터치할 때 반응하도록 하는데, 객체의 배경색을 바꾸거나 객체 내의 텍스트의 색상을 바꾸게 된다.

일반적으로 XML을 통해 Layout을 구성할 때 텍스트 색상은 android:textColor 속성을 이용해서 설정하고, 배경색은 android:background 속성을 이용해서 설정한다.

롤 오버 기능을 이용하려면 위의 두 속성에 selector를 작성해서 연결해 주면 된다.

<Layout.xml>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/sbConnection"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/selector_background"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="C"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/selector_button" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="onnection"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/selector_button"
            android:textSize="10sp" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/sbService"
        android:layout_width="60dp"
        android:layout_height="30dp"
        android:background="@color/selector_background"
        android:clickable="true"
        android:gravity="center"
        android:orientation="horizontal" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="S"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textColor="@color/selector_button" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ervice"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="@color/selector_button"
            android:textSize="10sp" />
    </LinearLayout>

</LinearLayout>

위의 소스를 보면, 라인 21, 28, 46, 54 에서 TextView의 textColor 속성을 값으로 "@color/selector_button"이란 값을, 라인 11, 54 에서 LinearLayout의 background 속성의 값으로 "@color/selector_background"란 값을 설정했다.

이 들은 별도로 기술한 XML 파일명으로 실제  res 폴더 및에 color 이란 폴더를 만들고 그 안에 selector_button.xml 과 selector_background.xml 파일로 기술했으며 그 내용응 다음과 같다.

<selector_button.xml>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="#ffff0000"/> <!-- pressed -->
    <item android:state_focused="true" android:color="#ff0000ff"/> <!-- focused -->
    <item android:color="#ff000000"/> <!-- default -->

</selector>

위의 코드 내용은 TextView가 눌리거나 퍼커스될 때의 텍스트 색상을 설정한 내용이다.

<selector_background.xml>

<?xml version="1.0" encoding="utf-8"?>
<!-- 본 주석 방식으로 기술해도 동작함
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <color android:color="@drawable/semitransparent_white" />
    </item>
</selector>
 -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:drawable="@drawable/semitransparent_white"/>
</selector>

배경색을 롤오버 하기 위한 코드의 내용은 텍스트를 롤오버 하는 코드의 내용과 조금 다르다, View의 글자색을 롤오버 하기 위해서는 android:color 속성을 이용해서 변경할 색상을 정의하지만, 배경색을 롤오버 하기 위해서는 android:drawable 속성을 이용한다. drawable에서는 컬러값을 직접 사용할 수 없기 때문에 semitransparent_white라는 drawable 리소스를 기술해서 사용한다. 이를 위해 res폴더 및의 values 폴더에 별도의 color.xml 파일을 생성해서 이 파일에 drawable 리소스를 기술하였다.

<color.xml>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="semitransparent_white">#77ffffff</drawable>
</resources>