การกำหนด Background ปุ่มด้วย selector : เขียนโปรแกรม Android
ในการสร้างปุ่มของ android นั้น ปุ่มแบบธรรมดาหน้าตามันไม่สวยเอาซะเลยและแล้วผมก็เจอวิธีเล็กน้อยที่จะทำให้ปุ่มมีสีสัน และกำหนด state ในการกดปุ่มให้มีสีสัน ด้วยการใช้ android xml ที่มี tag ชื่อว่า selector
โดยเริ่มแรกก็ทำการสร้างโปรเจ็คตัวอย่างก่อนแต่หากใครมีโปรเจ็คทดลองก็ข้ามขั้นตอนนี้ไปได้เลยครับ
โดยผมตั้งชื่อโปรเจ็คว่า Selector จากนั้นเมื่อสร้างเสร็จผมลองทำการสร้างปุ่มขึ้นมา 2 ปุ่มใน activity_main.xml ซึ่งเป็น layout activity เริ่มต้นของโปรเจ็คที่สร้างขึ้นโดยมีโค้ดดังนี้
[sourcecode language=”xml”]
[/sourcecode]
เมื่อเสร็จแล้วผมก็ลองรันดูผลก็คือได้ปุ่มหน้าตาธรรมดาไม่มีอะไรพิเศษ
ที่นี้เราจะมาสู่ขั้นตอนการสร้างและใช้ xml tag ที่ชื่อว่า selector กันโดยให้สร้าง folder ใน res โดยมีชื่อว่า drawable เพื่อให้ xml นี้สามารถใช้ได้กับหน้าจอทุกขนาดเพราะมันเป็น xml กำหนดคุณสมบัติเท่านั้นไม่ได้เป็นรูปภาพที่จะต้องมีหลายไฟล์ที่เก็บตาม folder drawable-xxxx
ต่อจากนั้นก็ทำการคลิกขวาเลือก New –> Android XML File แล้วเลือกชนิดเป็น selector โดยที่ผมตั้งชื่อไฟล์นี้ว่า btn_menu.xml
ซึ่งเจ้า Selector นี้มันก็เหมือนการจับเอารวมการกำหนดคุณสมบัติมาไว้ด้วยกัน จากก็กำหนด state ของ component ที่เราสร้างขึ้นมาว่ามีคุณสมบัติอย่างไร โดยโค้ดมีดังนี้ครับ
[sourcecode language=”xml”]
[/sourcecode]
จากโค้ดจะเห็นว่ามีการกำหนดว่าถ้าเป็น state pressed ให้ทำการกำหนดคุณสมบัติ drawable ไปใช้ไฟล์จาก @drawable/btn_backgroundpress แต่ถ้า state ปกติให้ไปใช้ drawable จากไฟล์ @drawable/btn_background แทน
มาถึง step นี้เราก็ต้องทำการสร้างไฟล์ btn_backgroundpress.xml กับไฟล์ btn_background โดยทั้ง 2 ไฟล์นั้นผมสร้างเป็นแบบ shape เพื่อที่จะใช้รูปร่างในการกำหนดพื้นหลังของปุ่มที่ใช้ selector btn_menu.xml โดยไฟล์แรกที่สร้างคือ btn_backgroundpress.xml
มีโค้ดดังนี้
[sourcecode language=”xml”]
[/sourcecode]
โดย xml shape นี้ผมทำการสร้างเป็นสี่เหลี่ยม (rectangle) มีการใช้ tag gradient เพื่อทำการไล่สีแบบ gradient โดยไล่จากค่าสี #02b19a ไปยังสี #a9eafc โดยทำมุมการไล่สี 45 องศา ส่วน tag padding ก็เว้นระยะตามค่าที่เห็นครับ และสุดท้ายการใช้ tag corners เป็นการกำหนดขอบของรูปร่างนี้ โดยผมใช้ขอบมนกลมคือ radius มีค่าประมาณ 12dp ซึ่งจะได้เห็นจากภาพการรันโปรแกรมต่อท้ายครับ
ต่อมาก็ไฟล์ xml อีกอันที่ชื่อไฟล์ว่า btn_background.xml โดยมีโค้ดคล้ายกับ xml shape อันที่ผ่านมาต่างกันก็แค่ค่าการไล่สีแบบ gradient เท่านั้นเอง
มีโค้ดดังนี้
[sourcecode language=”xml”]
[/sourcecode]
เสร็จแล้วขั้นตอนสุดท้ายคือการกำหนดให้ปุ่ม 2 ปุ่มที่เราสร้างขึ้นใน activity_main.xml นั้นให้ใช้การกำหนดคุณสมบัติจาก selector โดยการกำหนดใน tag drawable ในปุ่มของตัวอย่างแต่สำหรับ component อื่นสามารถกำหนดใน tag อื่นได้เช่น backgroud ก็แล้วแต่ component อันนี้ก็ต้องลอง test ใช้กับ component อื่นดูเช่น ImageButton
โดยในตัวอย่างให้ทำการเพิ่มบรรทัดนี้เข้าไปทั้ง 2 ปุ่มเพื่อจะได้ใช้ selector ที่สร้างขึ้นทั้ง 2 ปุ่มเลยโดยมีโค้ดดังนี้
[sourcecode language=”xml”]
android:background=”@drawable/btn_menu”
[/sourcecode]
เมื่อลองรันก็จะได้ผลลัพธ์ดังรูปครับ
จะเห็นว่าปุ่ม A จะเป็น state ของการกดจะได้สีที่ต่างจากปุ่ม B ที่อยู่ใน state ปกติ ก็จบเสร็จสิ้นบทความการใช้ selector เพื่อมากำหนด drawable ให้ปุ่มใน android