Custom Dialog แบบง่าย ตามใจฉัน (Android Design)

วันนี้ก็ยังอยู่กับเรื่องการ Custom โน่นนี่นั่นใน Android ครับ เมื่อครั้งที่แล้วผมพูดถึงการ Custom View Group ไปแล้ววันนี้เลยอยากมาแชร์การ Custom View อีกแบบนึง แต่เป็น Dialog นั่นเอง

มาเริ่มกันเลยดีกว่าครับ ก่อนอื่นเราสร้าง Layout หน้า MainActivity โดยมีปุ่มโง่ๆหนึ่งปุ่มเอาไว้เปิด Dialog ขึ้นมาก่อน

จากนั้นเราก็สร้าง Layout สำหรับ Dialog แบบนี้ออกมา

จะได้ Dialog หน้าตาประมาณนี้ครับ

จากนั้นทำการสร้าง class CustomDialog ขึ้นมาให้เรา extend เจ้า DialogFragment ไว้ด้วยครับ

ขั้นตอนต่อมาให้ทำการ Inflate layout เจ้าตัว view_dialog_custom ที่ onCreateView เหมือนตอนที่เราสร้าง Fragment ปกติเด๊ะๆ

จากนั้นลองไปเรียกใช้ Dialog ของเราที่ MainActivity กัน โดยคำสั่งที่เรียกก็จะเป็นประมานนี้ครับ

แล้วลองกด Run เบาๆซักหนึ่งที

อ้าวทำไมมันหน้าตาประหลาดแบบนี้….ไม่โอเลยวุ้ย

วิธีแก้ที่ผมใช้ก็คือให้เราสร้าง function init ขึ้นมาเพื่อกำหนดค่าให้กับเจ้าตัว Dialog ของเราโดยใส่คำสั่งนี้เข้าไป แล้วนำ function นี้ไปใส่ที่ onViewCreated

จากนั้น กด Run แรงๆไปเลยรอบนี้

อ่ะสวยงามมมมใช้ได้ ต่อเรามาเพิ่มการ click ให้กับ Dialog ของเราดีกว่า โดยเพิ่ม callback สไตล์ kotlin แบบนี้

แล้วไปเพิ่มการเรียกใช้ที่หน้า MainActivity แบบนี้

คราวนี้ Dialog ของเราก็ดักจับการ click ได้แล้วครับ…..จบปิ๊งงงง

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