แสดงข้อความป๊อปอัปหรือคําขอข้อมูลจากผู้ใช้

คอมโพเนนต์ Dialog จะแสดงข้อความป๊อปอัปหรือขอข้อมูลจากผู้ใช้ในเลเยอร์เหนือเนื้อหาหลักของแอป ซึ่งจะสร้างประสบการณ์ UI ที่ขัดจังหวะเพื่อดึงดูดความสนใจของผู้ใช้

กรณีการใช้งานของกล่องโต้ตอบมีดังนี้

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

หัวข้อนี้จะแสดงการใช้งานต่อไปนี้

ความเข้ากันได้ของเวอร์ชัน

การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป

ทรัพยากร Dependency

สร้างกล่องโต้ตอบการแจ้งเตือน

คอมโพสิเบิล AlertDialog มี API ที่สะดวกสำหรับการสร้างกล่องโต้ตอบธีม Material Design ตัวอย่างต่อไปนี้ใช้ปุ่ม 2 ปุ่มในกล่องโต้ตอบการแจ้งเตือน โดยปุ่มหนึ่งจะปิดกล่องโต้ตอบ และอีกปุ่มหนึ่งจะยืนยันคําขอ

การใช้งานนี้แสดงถึง Composable หลักที่ส่งอาร์กิวเมนต์ไปยัง Composable ย่อยด้วยวิธีนี้

ผลลัพธ์

กล่องโต้ตอบการแจ้งเตือนที่เปิดอยู่ซึ่งมีทั้งปุ่มปิดและยืนยัน
รูปที่ 1 กล่องโต้ตอบการแจ้งเตือนที่มีปุ่ม

ข้อมูลสำคัญ

AlertDialog มีพารามิเตอร์เฉพาะสำหรับการจัดการองค์ประกอบบางอย่างของกล่องโต้ตอบ ซึ่งรวมถึงรายการต่อไปนี้

  • title: ข้อความที่ปรากฏที่ด้านบนของกล่องโต้ตอบ
  • text: ข้อความที่ปรากฏตรงกลางกล่องโต้ตอบ
  • icon: กราฟิกที่ปรากฏที่ด้านบนของกล่องโต้ตอบ
  • onDismissRequest: ฟังก์ชันที่เรียกใช้เมื่อผู้ใช้ปิดกล่องโต้ตอบ เช่น โดยการแตะนอกกล่องโต้ตอบ
  • dismissButton: Composable ที่ทำหน้าที่เป็นปุ่มปิด
  • confirmButton: คอมโพสิชันที่ทำหน้าที่เป็นปุ่มยืนยัน

  • เมื่อผู้ใช้คลิกปุ่มใดปุ่มหนึ่ง กล่องโต้ตอบจะปิดลง เมื่อผู้ใช้คลิก "ยืนยัน" ระบบจะเรียกใช้ฟังก์ชันที่จัดการการยืนยันด้วย ในตัวอย่างนี้ ฟังก์ชันเหล่านั้นคือ onDismissRequest() และ onConfirmRequest()

    ในกรณีที่กล่องโต้ตอบต้องใช้ชุดปุ่มที่ซับซ้อนมากขึ้น คุณอาจได้ประโยชน์จากการใช้ Dialog composable และป้อนข้อมูลในลักษณะที่อิสระมากขึ้น

สร้างกล่องโต้ตอบ

Dialog เป็นคอมโพสิชันพื้นฐานที่ไม่มีการจัดสไตล์หรือช่องที่กำหนดไว้ล่วงหน้าสำหรับเนื้อหา ซึ่งเป็นคอนเทนเนอร์ที่ใช้งานง่ายซึ่งคุณควรป้อนข้อมูลด้วยคอนเทนเนอร์ เช่น Card พารามิเตอร์หลักๆ ของกล่องโต้ตอบมีดังนี้

  • onDismissRequest: ฟังก์ชัน Lambda ที่เรียกใช้เมื่อผู้ใช้ปิดกล่องโต้ตอบ
  • properties: อินสแตนซ์ของ DialogProperties ที่มีขอบเขตเพิ่มเติมสำหรับการปรับแต่ง
ด้วย

สร้างกล่องโต้ตอบพื้นฐาน

ตัวอย่างต่อไปนี้เป็นการใช้งานเบื้องต้นของคอมโพสิเบิล Dialog โปรดทราบว่าไฟล์ใช้ Card เป็นคอนเทนเนอร์รอง หากไม่มี Card องค์ประกอบ Text จะปรากฏเดี่ยวๆ เหนือเนื้อหาหลักของแอป

ผลลัพธ์

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

กล่องโต้ตอบที่ไม่มีสิ่งใดนอกจากป้ายกำกับ
รูปที่ 2 กล่องโต้ตอบน้อยที่สุด

สร้างกล่องโต้ตอบขั้นสูง

ต่อไปนี้เป็นการใช้งาน Dialog composable ที่ขั้นสูงขึ้น ในตัวอย่างนี้ คอมโพเนนต์จะใช้อินเทอร์เฟซที่คล้ายกับตัวอย่าง AlertDialog ก่อนหน้าด้วยตนเอง

ผลลัพธ์

กล่องโต้ตอบที่มีรูปภาพภูเขาเฟเธอร์ท็อปในรัฐวิกตอเรีย ใต้รูปภาพจะมีปุ่มปิดและปุ่มยืนยัน
รูปที่ 3 กล่องโต้ตอบที่มีรูปภาพ

คอลเล็กชันที่มีคู่มือนี้

คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการ ซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ
ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ
ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ