ตัวอย่างการสร้าง Dialog บน Android
Dialog มันก็คือ Popup ที่เอาไว้แสดง Alert เตือนผู้ใช้ หรือว่า ให้กรอกข้อมูลอะไรก็ว่าไป เป็น Window ขนาดเล็กๆ จริงๆ ไม่ต้องอธิบายอะไรมาก คิดว่าทุกคนคงรู้จัก Dialog อยู่แล้ว ตัวอย่างก็ประมาณนี้
ภาพ จาก Android Developer
เห็นว่าบางที การสร้าง Dialog ต่างๆ ทั้งแบบธรรมดา แบบ AlertDialog แบบ CustomDialog บางทีผมก็มีการลืมๆเหมือนกัน บางทีก็ขี้เกียจเขียน ก็อปของเก่ามาเลยง่ายดี วันนี้ก็เลยนำมาเขียนเป็นบทความไปซะเลย
ตัวอย่าง Dialog
- Dialog ธรรมดา
- Dialog แบบ List
- Dialog แบบเลือก choice เดียว
- Dialog แบบเลือกหลาย choice
- Custom Dialog แบบที่ 1
- Custom Dialog แบบที่ 2
Dialog ธรรมดา
เริ่มต้นด้วย Dialog แบบธรรมดาก่อนครับ เป็น Dialog ที่แสดง Title แล้วก็มีปุ่ม 2 ปุ่มให้เราตัดสินใจ ว่าจะทำอะไร เช่น Dialog ที่บอกเราว่า ต้องการออกจากแอพนี้จริงๆงั้นหรอ? ก็จะมีตัวเลือก ให้กด ว่า ออก กับ อยู่ต่อ โดยส่วนประกอบหลักๆของ Dialog จะเป็นดังนี้
- 1 Title สำหรับแสดงข้อความ Title
- 2 Content ส่วนนี้จะไว้แสดงข้อความต่างๆ รวมถึง Custom Layout
- 3 Button ส่วนนี้จะแสดง Button ของ Dialog
โดยทั่วไป ส่วนประกอบหลักๆของ Dialog ที่กล่าวมา จะใช้พวกนี้แหละ ในการสร้าง Dialog ต่างๆ
เริ่มแรกเลย การสร้างโปรเจ็คใน Android จะไม่ขอพูดถึงละกัน ข้ามมาดูที่โค๊ดเลย โค๊ดผมจะใช้ สองส่วนคือ activity_main.xml
และ MainActivity.java
สำหรับหน้าจอ Layout ผมออกแบบดังนี้ เป็นแค่เบสิค ไม่มีอะไรมาก มีแค่ข้อความ แล้วก็ปุ่ม Button เมื่อกดปุ่มนี้ก็จะโชว์ Dialog
activity_main.xml
ส่วน MainActivity.java
เริ่มแรก คลาสจะหน้าตาเป็นแบบนี้ (ส่วนอื่นๆ เมธอดอื่นๆ ผมไม่สนครับ สนแค่ onCreate()
)
ภายในเมธอด onCreate()
ใช้ Button ที่ประกาศไว้ที่ xml ไฟล์ จากนั้นรับ Event Listener เมื่อคลิ๊ก ก็ให้ไปเปิด Dialog
ทีนี้จะสร้าง Dialog ผมใช้คลาส AlertDialog.Builder
ในการสร้าง Dialog โดยมีโครงสร้างดังนี้
จากข้างบน AlertDialog.Builder รับ argument เป็น context #setMessage
ไว้สำหรับตั้งชื่อข้อความที่ต้องการแสดง ส่วน setPositiveButton
และ setNegativeButton
ไว้สำหรับตั้งค่าปุ่ม โดย argument ตัวแรก คือ ข้อความ ส่วน argument ที่สองคือ callback OnClickListener สำหรับ handler ว่าเวลากดแล้วจะทำอะไร โดยโค๊ดผมคือ เมื่อกด “รับ” ก็จะโชว์ข้อความ Toast ส่วน Dialog ก็มีหน้าตาแบบนี้
Dialog แบบโชว์ List
Dialog แบบโชว์ List ก็คล้ายๆ กับแบบธรรมดา เพียงแค่มี List ข้อมูลแสดงมาด้วย ตัวอย่าง ผมสร้างข้อมูลเก็บเป็น String[] ไฟล์ layout และ MainActivity ใช้จากตัวอย่างก่อนหน้าครับ
เมื่อผู้ใช้กดปุ่ม Button จากทีแรกโชว์แค่ Dialog ธรรมดา ตอนนี้จะมี List มาแสดงด้วย ผมใช้โค๊ดนี้
สิ่งที่เปลี่ยนไปคือ ใช้ setTitle
เพื่อแสดง Title ของ Dialog และใช้ setItems(List, Listener)
เพื่อแสดง List แทนการแสดงข้อความ โดยรับ argument เป็น List และ Listener สำหรับ handler เมื่อผู้ใช้เลือกไอเท็มใน List ก็จะแสดง Toast ว่าเลือกไอเท็มอะไรไป หน้าตา Dialog ก็จะได้แบบนี้
Dialog แบบเลือก choice เดียว
Dialog แบบนี้คล้ายๆกับแบบ List ต่างกันที่มี ปุ่ม RadioButton มาให้ด้วย ว่าเราเลือกไอเท็มไหน ปุ่มก็จะไปปรากฎอยู่ที่ไอเท็มนั้นๆ ตามโค๊ดนี้เลย
จากด้านบน จะเห็นว่าผมได้ทำการลบ setItems
และเปลี่ยนมาใช้ setSingleChoiceItems()
ที่ใช้สำหรับแสดงตัวเลือกแบบ ตัวเลือกเดียวแทน โดย argument ที่มันรับคือ List, ตำแหน่งไอเท็มที่เลือก (ค่าเริ่มต้น) และ Listener ตามลำดับ และใช้ setPositiveButton
เพิ่มเข้ามา เพื่อเอาไว้ยืนยัน ว่าเราทำการเลือกไอเท็มนี้แล้ว
โดยโค๊ดไม่มีอะไรซับซ้อนมาก Listener เมื่อมีการเลือกไอเท็ม ก็แค่หา ตำแหน่งไอเท็มนี้ มีค่าว่าอะไร จากนั้นเก็บลงตัวแปร String ชื่อ mSelected
ซึ่งผมประกาศไว้เป็น member variable ส่วน Listener ของ ปุ่ม PossitiveButton ก็ให้แสดง Toast และปิด Dialog ด้วยคำสั่ง dialog.dismiss()
หน้าตา Dialog ก็จะเป็นแบบนี้
Dialog แบบเลือกหลาย choice
Dialog แบบเลือกหลาย choice ชื่อก็ตรงตัวเลยครับ แสดงรายชื่อแบบ List และมี Choice ให้เลือกได้หลายๆตัวเลือก ดังโค๊ดนี้
จากโค๊ดด้านบน ได้เปลี่ยนจาก setSingleChoice
เป็น setMultiChoiceItems
โดยรับ argument 3 ตัวคือ ข้อมูล List, ค่าเริ่มต้นของไอเท็ม เช็คหรือไม่เช็ค และ Listener เป็น OnMultiChoiceClickListener
ตามลำดับ
ส่วน onClick
ของ OnMultiChoiceClickListener
จะมีเงื่อนไข ว่า ถ้า isCheck แสดงว่า มีการเลือกไอเท็มนี้ ก็จะทำการเพิ่มไปยัง ArrayList ที่สร้างไว้ชื่อ mMultiSelected
จากนั้นที่ setPositiveButton
เมื่อทำการ onClick ก็ให้แสดง ไอเท็มที่เลือกทั้งหมด หน้าตาก็ประมาณนี้
Custom Dialog
มาถึง Dialog อันสุดท้าย คือ Custom Dialog เป็น Dialog ที่เราสามารถจะปรับแต่งได้เอง สามารถสร้าง Layout ได้เอง หลักการของมันคือ ให้ layout xml ที่เราได้ทำขึ้นมา คล้ายๆ เวลาเราเรียก setContentView(layout)
ใน Activity ทั่วไป เราอยาก ให้ Dialog มี Layout แบบไหน ก็สร้างมา แล้ว setView
ให้กับ Dialog ก็จะได้ Dialog หน้าตานั้นๆ จะให้ Dialog มีรูป มีปุ่ม Button มี TextView, EditText ก็ได้ทั้งนั้น
มาดูวิธีการสร้างกันเลยดีกว่า เริ่มแรก ให้ทำการสร้าง Layout ที่จะใช้ ผมตั้งชือ่ว่า dialog_custom.xml
ส่วนตัว AlertDialog.Builder ก็จะได้หน้าตาแบบนี้
สิ่งที่เปลี่ยนไปจาก Dialog อื่นๆคือ เราจะใช้เมธอด setView(View)
สำหรับตั้งค่า Layout ต้องการ โดย View เราก็ทำการลิงค์มาจาก dialog_custom.xml
ที่ได้สร้างไว้ ต่อมาก็ทำการเชื่อม EditText , username กับ password ที่สร้างไว้ โดยใช้ view.findViewById(int id)
เพื่อที่จะสั่งให้หา id ใน dialog_custom.xml ถ้ามีแค่ findViewById มันจะไปหาใน activity_main.xml ซึ่งจะ null pointer exception แน่นอน
ส่วนที่เหลือก็ไม่มีอะไรมาก ตรง onClick ใครจะเอาไปทำอะไรต่อก็ตามสะดวก เช่นเช็ค username password ถูกต้องไหม ถ้าถูกก็เข้าสู่ระบบ ถ้าไม่ถูกก็พิมใหม่ เป็นต้น แต่ตรงส่วนนี้ ผมจะให้โชว์แค่ ข้อความธรรมดา ว่า ล็อคอินได้หรือไม่ได้ เท่านั้น สุดท้าย ก็ได้หน้าตาแบบนี้
Custom Dialog แบบที่ 2
Custom Dialog แบบนี้ การแสดงผล ก็ไม่แตกต่างจากแบบแรก คือนำ Layout ของเราเองมาแสดง แต่ที่แตกต่างกันคือ แบบนี้จะใช้ Dialog
แทนที่จะเป็น AlertDialog.Builder
โดย Layout ผมได้ทำการเพิ่มปุ่ม Button สำหรับ ล็อคอิน และ ยกเลิก ไปด้วย เนื่องจาก Dialog ธรรมดา จะไม่มี setPositiveButton
กับ setNegativeButton
มาให้ ฉะนั้นผมสร้างอีกไฟล์ชื่อ dialog_custom2.xml
จะได้ดังนี้
ส่วนโค๊ด Dialog ก็จะได้ดังนี้
จะเห็นว่าการสร้าง Dialog คล้ายๆกันเลย คือ new Dialog(MainActivity.this)
รับเป็น context เหมือนกัน แล้วก็ใช้ setTitle
สำหรับตั้งชื่อ , setContentView
สำหรับตั้งค่า Layout ที่เราสร้างไว้ สุดท้ายก็เชื่อม EditText และ Button ต่างๆ ด้วย dialog.findViewById()
จากนั้นก็ใช้ Listener ของ Button ทำการเช็ค username password ก็ได้หน้าตาประมาณนี้
Demo
สุดท้าย ผมสร้างเลเอาท์ รวบรวมตัวอย่าง Dialog ทั้งหมด โดยเมื่อคลิกก็จะแสดงตัวอย่าง Dialog นั้นๆ แบบนี้
ส่วนโค๊ดก็ตามข้างล่าง
activity_main.xml
dialog_custom.xml
dialog_custom2.xml
MainActivity.java
นำเอาไปประยุกต์ใช้กันดูครับ สำหรับบทความนี้ก็จบเพียงเท่านี้ หวังว่าจะมีประโยชน์กับหลายๆคนนะครับ หากชื่นชอบบทความนี้ อย่าลืมช่วยกันแชร์ให้เพื่อนๆด้วยครับ ขอบคุณครับ
Reference:
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust