ตัวอย่างโค้ด android การทำ Selector ของ TextView

เรามาดูตัวอย่างโค้ดการทำ Selector ใน TextView กันครับ ซึ่งถ้าเราอยากให้ TextView นั้นคลิกได้ แล้วก็มี State แต่ละอย่างต่างกัน เช่น เมื่อเป็นตัวอักษรธรรมดาก็ให้เป็นสีขาว พอกดปุ๊ปก็ให้เปลี่ยนสีตัวอักษรเป็นสีน้ำเงิน หรืออยากให้พื้นหลังของ TextView จากปกติเป็นสีขาว เมื่อกด TextView แล้วให้มันเป็นสีน้ำเงินอะไรประมาณนี้ ซึ่งในที่นี้เราจะใช้ Selector เข้ามาช่วย เรามาดูตัวอย่างวิธีทำกันครับ

เริ่มด้วยให้เราสร้าง Selector ขึ้นมาก่อน ในที่นี้จะสร้าง Selector สำหรับเปลี่ยนสีตัวอักษรเวลากด โดยผมตั้งชื่อให้มันว่า selector_text_awesome_color.xml โดยเอาไฟล์ไปไว้ใน res/color แล้วตามด้วยตัวอย่างโค้ด android ด้านล่าง

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorAccent" android:state_pressed="true" />
    <item android:color="@color/colorTextHead" />
</selector>

เมื่อได้แล้ว ผมจะสร้าง Selector ขึ้นมาอีกอันหนึ่งเอาไว้สำหรับเปลี่ยนสี Background ของ TextView ตอนเวลากด โดยเอาไฟล์ไปไว้ใน res/drawable มีตัวอย่างโค้ด android ตามด้านล่าง

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/colorPrimaryDark" android:state_pressed="true" />
    <item android:drawable="@color/colorPrimary" />
</selector>

เมื่อได้แล้ว เราก็จะมาสร้าง TextView แล้วก็ทำการเซต textColor กับ background ซึ่งมีตัวอย่างโค้ดตามด้านล่าง

<com.doesystem.educate.englishwords.views.TextViewAwesome android:id="@+id/text_awesome_close"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="@string/awesome_close"
                android:textAlignment="center"
                style="@style/TitleMyWords"
                android:textColor="@color/selector_text_awesome_color"
                android:clickable="true"
                android:background="@drawable/selector_text_awesome_bg_color"
                android:onClick="onBtnClick"/>

ในตัวอย่างนี้ผมใช้ TextViewAwesome ซึ่งก็มีการ extends มาจาก TextView นั่นแหละครับ ตรงนี้ให้คิดว่ามันเป็น TextView ธรรมดาละกัน ส่วนสำคัญที่ต้องดู คือในส่วนของ android:textColor="@color/selector_text_awesome_color" ซึ่งเป็นการบอกว่าสีของตัวอักษรให้ใช้ selector_text_awesome_color ตัวนี้นะ และส่วนของ android:background="@drawable/selector_text_awesome_bg_color" เป็นการบอกว่าให้เราใช้ background เป็น selector_text_awesome_bg_color ตัวนี้

และอย่าลืมที่สำคัญอีกอย่างหนึ่งนั่นคือให้เราไปเปิดคุณสมบัติของ TextView ให้สามารถคลิกได้โดยการเซตค่า android:clickable="true" เพียงแค่นี้เราก็ได้ TextView ที่คลิกได้แล้วยังเปลี่ยนสีตัวอักษรหรือพื้นหลังได้ตามต้องการแล้ว