เปลี่ยนภาพ Button ได้ดั่งใจด้วย Selector [Custom Button]

   สำหรับการพัฒนาแอปพลิเคชันตัวหนึ่งขึ้นมานั้น แน่นอนว่าถึงตัวโปรแกรมจะเจ๋งมากแค่ไหน แต่ถ้าหน้าตาแอพฯไม่สวย ก็โดนถูกมองข้าม 

adia
ซึ่งในบทความรอบนี้ขอเกริ่นเบื้องต้นกับการทำปุ่ม Button ด้วยตัวเอง ถ้าจะให้ใช้ภาพของปุ่มที่มาพร้อมกับแอพฯตลอดไปก็คงจะไม่เวิร์กนัก ดังนั้นการนำภาพจากภายนอกเข้ามาก็เป็นหนทางที่ดีเหมือนกัน สำหรับการออกแบบปุ่มด้วยตัวเองนั้น ก็ต้องเตรียมภาพไว้สองภาพ ภาพหนึ่งสำหรับปุ่มที่ยังไม่ถูกกด และอีกภาพสำหรับปุ่มตอนถูกกด ซึ่งเจ้าขตัวอย่างภาพละกัน (ปุ่มเป็นรูปฐานข้อมูล ทำเองเป็น  PNG)
                     ปุ่มตอนยังไม่ถูกกด                                 ปุ่มตอนถูกกด
button_normalbutton_pressed
      อย่าลืมว่าภาพที่มีพื้นหลังโปร่งใสจะต้องเป็น PNG ทุกครั้งและห้ามตั้งชื่อตัวพิมพ์ใหญ่ ไม่งั้นอิมพอร์ตลงโปรแกรมแล้วจะขึ้นฟ้อง เออเรอร์ ทีนี้ก็เอาอิมพอร์ตเข้ามาเลย โดยปกติแล้วการออกแบบหน้าตาแอพฯจะต้องคำนึงถึงภาพสำหรับหน้าจอ   แต่ในบทความนี้สมมติว่ามีภาพชุดเดียวละกัน  ก็เลยเอาไปเก็บไว้ใน res/drawable ซะเลย (สร้างโฟลเดอร์ drawable ขึ้นมาเอง) แล้วทำการสร้างไฟล์ XML ขึ้นมาในโฟลเดอร์นั้นเลย ซึ่งจะเป็น Selector สำหรับกำหนดภาพที่จะแสดงสำหรับปุ่มอีกทีนึงโดยเจ้าของบล็อกจะสร้างชื่อว่า button_selector.xml
หลังจากสร้าง folder drawer  ด้วยการคลิ๊กขวา new folder  ตั้งชื่อ  drawer  ย้ำ ต้องเป็นตัวอักษรเล็กนะครับ แล้วเราทำการสร้าง Selector เป็น xml
1button
ตั้งชื่อไฟลล์ว่า   button_selector   กด ok แล้ว .xml จะมาเอง
2button
พิมพ์แบบนี้เลย ใน  button_selector.xml ที่สร้างขึ้นมา
3button
อันนี  code สำหรับคนไม่อยากพิมพ์
<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android" >  
    <item android:state_pressed="true"  
        android:drawable="@drawable/button_pressed" />  
    <item android:state_focused="true"  
        android:drawable="@drawable/button_pressed" />  
    <item android:drawable="@drawable/button_normal" />  
</selector>

android:state_pressed=”true” ก็คือเมื่อปุ่มถูกกดนั่นเอง โดยจะให้แสดงภาพปุ่มตอนที่ถูกกดนั่นเองและ android:state_focused=”true” จะคือตอนที่ปุ่มถูกเลือก แต่ยังไม่กด ซึ่งในแอนดรอยด์ทั่วไปจะไม่เห็นผลโฟกัสหรอก เพราะเวลาที่เอาติ้วแตะบนปุ่ม มันก็จะอยู่ในสถานะถูกกดไปแล้ว ก็เลยใช้เป็นภาพเดียวกับตอนปุ่มถูกกดไปเลยและถ้านอกเหนือจากนั้นจะให้แสดงเป็นภาพปุ่มตอนยังไม่ถูกกด เมื่อสร้าง Selector เสร็จแล้วก็ให้มาต่อกันที่ Layout กันเลย โดยผมจะใช้คำสั่งดังนี้   LayoutXML   อันนี  code สำหรับคนไม่อยากพิมพ์

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="#6288d2" >  

    <Button  
        android:id="@+id/worddatabutton"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerHorizontal="true"  
        android:layout_centerVertical="true"  
        android:background="@drawable/button_selector" />  

</RelativeLayout>  

  โดยจะกำหนดให้ Button มีภาพพื้นหลังเป็น Selector ที่สร้างไว้นั้นเอง ทีนี้เวลากดปุ่มภาพก็จะเปลี่ยนเป็นภาพตอนปุ่มถูกกดให้เองเลย ทีนี้มาลองรันแอพพลิเคชันกันดูเลยดีกว่า ตอนที่ยังไม่กดปุ่ม                                                                           ตอนที่กดปุ่ม           Untitled-1                                                                                                  สำหรับใครที่อยากได้ไฟล์โปรเจคเอาไปดูเป็นตัวอย่างสามารถดาวน์โหลดได้จาก  ดาวน์โหลด

ไฟล์ CustomChangeButton ลองเล่นดูนะครับ

nattanon

ณัฐนนท์ ลำสมุทร

Leave a Reply

Your email address will not be published. Required fields are marked *