สร้างเมนูแบบเลื่อนเข้าด้วยคอมโพเนนต์ลิ้นชักการนำทาง

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

พิจารณากรณีการใช้งาน 3 กรณีต่อไปนี้ในการใช้ลิ้นชักการนำทาง

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

ใน Material Design ลิ้นชักการนำทางมี 2 ประเภท ได้แก่

  • มาตรฐาน: แชร์พื้นที่ภายในหน้าจอกับเนื้อหาอื่นๆ
  • โมดัล: ปรากฏเหนือเนื้อหาอื่นๆ ภายในหน้าจอ

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

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

ทรัพยากร Dependency

ใช้ลิ้นชักการนำทาง

คุณสามารถใช้คอมโพสิชัน ModalNavigationDrawer เพื่อติดตั้งใช้งานลิ้นชักการนำทางได้ ดังนี้

ข้อมูลสำคัญ

  • ใช้ช่อง drawerContent เพื่อระบุ ModalDrawerSheet และระบุเนื้อหาของลิ้นชัก

  • ModalNavigationDrawer ยอมรับพารามิเตอร์ลิ้นชักเพิ่มเติมจํานวนหนึ่ง ตัวอย่างเช่น คุณสามารถสลับการตั้งค่าว่าลิ้นชักจะตอบสนองต่อการลากหรือไม่ด้วยพารามิเตอร์ gesturesEnabled ดังตัวอย่างต่อไปนี้

ควบคุมลักษณะการทำงานของลิ้นชักการนำทาง

หากต้องการควบคุมวิธีเปิดและปิดลิ้นชัก ให้ใช้ DrawerState ดังนี้

ข้อมูลสำคัญ

  • ส่ง DrawerState ไปยัง ModalNavigationDrawer โดยใช้พารามิเตอร์ drawerState
  • DrawerState ให้สิทธิ์เข้าถึงฟังก์ชัน open และ close รวมถึงพร็อพเพอร์ตี้ที่เกี่ยวข้องกับสถานะลิ้นชักปัจจุบัน ฟังก์ชันที่ระงับเหล่านี้ต้องใช้ CoroutineScope ซึ่งคุณสร้างอินสแตนซ์ได้โดยใช้ rememberCoroutineScope นอกจากนี้ คุณยังเรียกใช้ฟังก์ชันการระงับเพื่อตอบสนองต่อเหตุการณ์ UI ได้ด้วย

ผลลัพธ์

รูปที่ 1 ลิ้นชักการนำทางแบบมาตรฐาน (ซ้าย) และลิ้นชักการนำทางแบบโมดัล (ขวา)

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

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

ดูวิธีที่ฟังก์ชันคอมโพสิเบิลช่วยให้คุณสร้างคอมโพเนนต์ UI ที่สวยสะดุดตาตามระบบการออกแบบ Material Design ได้อย่างง่ายดาย
คอลเล็กชันคู่มือฉบับย่อ

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

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