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

ส่วนใครยังไม่ได้อ่าน Part 1 ก็กดลิงก์ด้านล่างนี้ได้เลย

Custom Button Click by Android Studio (Kotlin) Part 1

มาเริ่มต้นกันได้เลย ~ ~ ~

เงื่อนไขที่ผมได้กล่าวมาข้างต้นนั้น สิ่งที่เราต้องทำเป็นอันดับแรกก็คือการเช็คโจทย์ที่ได้รับหรือเงื่อนไขที่เราต้องการจะทำ ในตอนนี้ก็คือเราต้องการรูปสำหรับตอนที่กดปุ่มและปล่อยปุ่ม

ดังนั้นเราต้องมี ตัวแปร 2 ตัว มารับค่ารูปภาพ ในที่นี่ผมจะสร้างตัวแปรตามนี้

Image for post
Image for post

ซึ่งตัวแปรทั้งสองตัวของเรากำหนดค่าเริ่มต้นให้เป็น Integer เพราะเราอยากรับค่าที่อยู่ของรูปภาพ ซึ่งการที่จะได้มาเราต้องเรียกใช้ Resource ซึ่งค่า Resource เป็นค่า Integer

ต่อมาเราจะสร้างฟังก์ชันรับค่ากันต่อเลย แน่นอน เราต้องรับค่ามา 2 ค่าเช่นเดิม

ดังนั้นเราจะสร้างฟังก์ชันขึ้นมารับค่า ในที่นี่เราจะใช้ชื่อว่า setBackgroundCustom ก็จะออกมาประมาณนี้

Image for post
Image for post

ต่อไปเราจะนำค่าที่รับเข้ามากำหนดกับตัวแปรที่เราได้เตรียมไว้…


ในบทความนี้ สำหรับคนที่มีปัญหาในการที่จะ Custom Button ต้องสร้าง XML อยู่ตลอด จะจบลง เพียงสร้าง class มาจัดการแทน

ต้องขอเล่าปัญหาที่เจ้าของบทความเจอ คือการกำหนด background ใน button แล้วขณะที่เรากดลงไปนั้น เราจะไม่รู้สึกว่าเราได้กด button ลงไปแล้วจริงๆ เจ้าของบทความจึงได้ หาวิธีการที่จะทำให้รู้ว่าเรากด button ลงไปแล้ว ซึ่งคนส่วนใหญ่หรือมือใหม่ทั้งหลายนิยมใช้กัน คือการสร้าง XML ขึ้นมา จะได้โค้ดประมาณด้านล่างนี้

Image for post
Image for post

ในส่วน item อันแรกนั้น เรามาดูที่ state_pressed = “true” คือ สถานะตอนที่เรากดปุ่มลงไป แล้วอยากให้แสดงรูปอะไร

ส่วน item ด้านล่าง คือการกำหนดรูป default ของเรานั้นเอง

หลังจากแก้ปัญหาดังกล่าวเสร็จแล้ว เจ้าของบทความก็ได้พบเจออีกหนึ่งปัญหาคือ การที่แอปพลิเคชันของเราใช้ปุ่มเป็นรูปเยอะๆ นั้นเราต้องมาคอยสร้าง XML อยู่ตลอดเวลา จึงได้คิดว่าเราควรแก้ปัญหาในขั้นตอนการทำงานที่ซ้ำซ้อนนี้ ก็เลยมาจบที่ว่า เรามา Custom แบบ Class แทนแล้วกัน จะได้ใช้งานได้ง่าย

มาเริ่มต้นกันได้เลย ~ ~ ~

  1. คลิกขวาในจุดโฟลเดอร์ ตามภาพ แล้วเลือก New >Kotlin File/Class
Image for post
Image for post

2. …

Atiwat Promarin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store