25 กรกฎาคม 2555

[Android Design] Custom Button


        
บทความเรื่องนี้เจ้าของบล็อกได้ทำใหม่ให้เนื้อหาละเอียดขึ้นแล้ว [Android Design] เปลี่ยนภาพ Button ได้ดั่งใจด้วย Selector [Custom Button]

**********************************************************


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

        ซึ่งในบทความรอบนี้ขอเกริ่นเบื้องต้นกับการทำปุ่ม Button ด้วยตัวเอง ถ้าจะให้ใช้ภาพของปุ่มที่มาพร้อมกับแอพฯตลอดไปก็คงจะไม่เวิร์กนัก ดังนั้นการนำภาพจากภายนอกเข้ามาก็เป็นหนทางที่ดีเหมือนกัน
        สำหรับการออกแบบปุ่มด้วยตัวเองนั้น ก็ต้องเตรียมภาพไว้สองภาพ ภาพหนึ่งสำหรับปุ่มที่ยังไม่ถูกกด และอีกภาพสำหรับปุ่มตอนถูกกด ซึ่งเจ้าของบล็อกขอยกตัวอย่างภาพละกัน (ปุ่มเป็นโลโก้เว็ปดังซะด้วยสิ)
ปุ่มตอนยังไม่ถูกกด


ปุ่มตอนถูกกด


        อย่าลืมว่าภาพที่มีพื้นหลังโปร่งใสจะต้องเป็น PNG ทุกครั้งและห้ามตั้งชื่อตัวพิมพ์ใหญ่ ไม่งั้นอิมพอร์ตลงโปรแกรมแล้วจะขึ้นเออเรอร์ ทีนี้ก็เอาอิมพอร์ตเข้ามาเลย โดยปกติแล้วการออกแบบหน้าตาแอพฯจะต้องคำนึงถึงภาพสำหรับหน้าจอแต่ละขนาดที่เคยเกริ่นไว้ในบทความ [Android Code] Supporting Multiple Screens แต่ในบทความนี้สมมติว่ามีภาพชุดเดียวละกัน (ขี้เกียจทำหลายชุด) ก็เลยเอาไปเก็บไว้ใน res/drawable ซะเลย (สร้างโฟลเดอร์ drawable ขึ้นมาเอง) แล้วทำการสร้างไฟล์ XML ขึ้นมาในโฟลเดอร์นั้นเลย ซึ่งจะเป็น Selector สำหรับกำหนดภาพที่จะแสดงสำหรับปุ่มอีกทีนึงโดยเจ้าของบล็อกจะสร้างชื่อว่า button_selector.xml 





         เมื่อสร้าง XML แล้ว ก็ให้เปิดขึ้นมาแล้วพิมพ์คำสั่งดังนี้



button_selector.xml
<?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 กันเลย โดยเจ้าของบล็อกจะใช้คำสั่งดังนี้




main.xml
<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/button1"  
        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 ที่สร้างไว้นั้นเอง ทีนี้เวลากดปุ่มภาพก็จะเปลี่ยนเป็นภาพตอนปุ่มถูกกดให้เองเลย ทีนี้มาลองรันแอพพลิเคชันกันดูเลยดีกว่า

ตอนที่ยังไม่กดปุ่ม                                  ตอนที่กดปุ่ม   



        สำหรับใครที่อยากได้ไฟล์โปรเจคเอาไปดูเป็นตัวอย่างสามารถดาวน์โหลดได้จาก Custom Button [Google Drive]


        เสร็จแล้ว มีแค่นี้แหละ!



เหล่าพันธมิตรแอนดรอยด์

Devahoy Layer Net NuuNeoI The Cheese Factory Somkiat CC Mart Routine Artit-K Arnondora Kamonway Try to be android developer Oatrice Benz Nest Studios Kotchaphan@Medium Jirawatee@Medium Travispea@Medium