แพลตฟอร์ม Android มีหน้าที่ในการวาด UI ของระบบ เช่น แถบสถานะและแถบนำทาง UI ระบบนี้จะแสดงไม่ว่าผู้ใช้จะใช้แอปใดก็ตาม
WindowInsets ให้ข้อมูลเกี่ยวกับ UI ของระบบเพื่อให้แน่ใจว่าแอปของคุณวาดในพื้นที่ที่ถูกต้องและ UI ของคุณจะไม่ถูกบดบังโดย UI ของระบบ
ใน Android 14 (ระดับ API 34) และต่ำกว่า UI ของแอปจะไม่วาดใต้แถบระบบและรอยบากของจอแสดงผลโดยค่าเริ่มต้น
ใน Android 15 (ระดับ API 35) ขึ้นไป แอปจะวาดใต้แถบระบบและส่วนที่ตัดออกของจอแสดงผลเมื่อแอปกำหนดเป้าหมายเป็น SDK 35 ซึ่งจะส่งผลให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น และช่วยให้แอปใช้ประโยชน์จากพื้นที่หน้าต่างที่มีอยู่ได้อย่างเต็มที่
การแสดงเนื้อหาด้านหลัง UI ของระบบเรียกว่าการแสดงแบบขอบจรดขอบ ในหน้านี้ คุณจะได้เรียนรู้เกี่ยวกับประเภทต่างๆ ของส่วนที่เว้นไว้ วิธีแสดงแบบไร้ขอบ และวิธีใช้ API ของส่วนที่เว้นไว้เพื่อเคลื่อนไหว UI และตรวจสอบว่าเนื้อหาของแอป ไม่ถูกบดบังโดยองค์ประกอบ UI ของระบบ
ข้อมูลพื้นฐานเกี่ยวกับส่วนที่เว้นไว้
เมื่อแอปแสดงผลแบบขอบจรดขอบ คุณต้องตรวจสอบว่าเนื้อหาและการโต้ตอบที่สำคัญไม่ถูก UI ของระบบบดบัง เช่น หากวางปุ่มไว้ด้านหลังแถบนำทาง ผู้ใช้อาจคลิกปุ่มไม่ได้
ขนาดของ UI ระบบและข้อมูลเกี่ยวกับตำแหน่งที่วางจะระบุผ่านระยะขอบ
UI ของระบบแต่ละส่วนจะมีประเภทระยะขอบที่สอดคล้องกันซึ่งอธิบาย ขนาดและตำแหน่งของระยะขอบ ตัวอย่างเช่น Inset ของแถบสถานะจะระบุขนาด และตำแหน่งของแถบสถานะ ในขณะที่ Inset ของแถบนำทางจะระบุขนาด และตำแหน่งของแถบนำทาง ขอบแต่ละประเภทประกอบด้วยขนาดพิกเซล 4 ขนาด ได้แก่ ด้านบน ด้านซ้าย ด้านขวา และด้านล่าง มิติข้อมูลเหล่านี้ระบุระยะทางที่ UI ของระบบขยายจากด้านที่เกี่ยวข้องของหน้าต่างแอป ดังนั้น UI ของแอปจึงต้องมีการแทรกตามจำนวนดังกล่าวเพื่อไม่ให้ทับซ้อนกับ UI ของระบบประเภทนั้น
ประเภทส่วนที่เว้นไว้ของ Android ในตัวเหล่านี้พร้อมใช้งานผ่าน WindowInsets
ระยะขอบที่อธิบายแถบสถานะ แถบเหล่านี้คือแถบ UI ของระบบด้านบนซึ่งมีไอคอนการแจ้งเตือนและตัวบ่งชี้อื่นๆ |
|
การแทรกแถบสถานะเมื่อมองเห็น หากแถบสถานะซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอที่สมจริง) ช่องแทรกแถบสถานะหลักจะว่างเปล่า แต่ช่องแทรกเหล่านี้จะไม่ว่างเปล่า |
|
ระยะขอบที่อธิบายแถบนำทาง แถบเหล่านี้คือแถบ UI ของระบบที่ด้านซ้าย ขวา หรือล่างของอุปกรณ์ ซึ่งอธิบายไอคอนแถบงานหรือการนำทาง ซึ่งอาจเปลี่ยนแปลงได้ในขณะรันไทม์ตามวิธีการนำทางที่ผู้ใช้ต้องการและการโต้ตอบกับแถบงาน |
|
ระยะขอบของแถบนำทางเมื่อมองเห็น หากแถบนำทางซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอที่สมจริง) ขอบแทรกของแถบนำทางหลักจะว่างเปล่า แต่ขอบแทรกเหล่านี้จะไม่ว่างเปล่า |
|
ส่วนที่เว้นไว้ที่อธิบายการตกแต่งหน้าต่าง UI ของระบบหากอยู่ในหน้าต่างอิสระ เช่น แถบชื่อด้านบน |
|
ระยะขอบของแถบคำบรรยายแทนเสียงเมื่อมองเห็น หากแถบคำบรรยายแทนเสียงซ่อนอยู่ ส่วนแทรกแถบคำบรรยายแทนเสียงหลักจะว่างเปล่า แต่ส่วนแทรกเหล่านี้จะไม่ว่างเปล่า |
|
การรวมระยะขอบของแถบระบบ ซึ่งรวมถึงแถบสถานะ แถบนำทาง และแถบคําบรรยายแทนเสียง |
|
การแทรกแถบระบบเมื่อมองเห็น หากปัจจุบันแถบระบบซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอที่สมจริง) ขอบแทรกของแถบระบบหลักจะว่างเปล่า แต่ขอบแทรกเหล่านี้จะไม่ว่างเปล่า |
|
ส่วนที่เว้นไว้ที่อธิบายปริมาณพื้นที่ด้านล่างที่แป้นพิมพ์เสมือนใช้ |
|
ระยะขอบที่อธิบายปริมาณพื้นที่ที่แป้นพิมพ์เสมือนใช้ก่อนภาพเคลื่อนไหวของแป้นพิมพ์ปัจจุบัน |
|
ส่วนที่เว้นไว้ที่อธิบายขนาดพื้นที่ที่แป้นพิมพ์เสมือนจะใช้หลังจากภาพเคลื่อนไหวของแป้นพิมพ์ปัจจุบัน |
|
ประเภทของระยะขอบที่อธิบายข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ UI การนำทาง โดยระบุจำนวนพื้นที่ที่ระบบจะจัดการ "การแตะ" และไม่ใช่แอป สำหรับแถบนำทางแบบโปร่งใสที่มีการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส องค์ประกอบบางอย่างของแอปจะแตะผ่าน UI การนำทางของระบบได้ |
|
การแทรกองค์ประกอบที่แตะได้เมื่อมองเห็น หากองค์ประกอบที่แตะได้ซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ขอบแทรกขององค์ประกอบหลักที่แตะได้จะว่างเปล่า แต่ขอบแทรกเหล่านี้จะไม่ว่างเปล่า |
|
ระยะขอบด้านในที่แสดงจำนวนระยะขอบด้านในที่ระบบจะสกัดกั้นท่าทางสัมผัสเพื่อการนำทาง แอปสามารถระบุการจัดการท่าทางสัมผัสเหล่านี้จำนวนจำกัดด้วยตนเองผ่าน |
|
ชุดย่อยของท่าทางสัมผัสของระบบที่ระบบจะจัดการเสมอ และเลือกไม่ใช้ผ่าน |
|
ส่วนที่เว้นไว้ที่แสดงถึงระยะห่างที่จำเป็นเพื่อหลีกเลี่ยงการทับซ้อนกับหน้าจอรอยบาก (รอยบากหรือรูเข็ม) |
|
ระยะขอบที่แสดงพื้นที่โค้งของจอแสดงผลแบบน้ำตก จอแสดงผลแบบน้ำตกมีพื้นที่โค้งตามขอบของหน้าจอ ซึ่งเป็นจุดที่หน้าจอเริ่มโค้งไปตามด้านข้างของอุปกรณ์ |
โดยสรุปแล้ว ประเภทเหล่านี้แบ่งออกเป็น 3 ประเภท "ปลอดภัย" ที่ช่วยให้มั่นใจได้ว่าเนื้อหาจะไม่ถูกบดบัง
ประเภทอินเซ็ต "ปลอดภัย" เหล่านี้จะปกป้องเนื้อหาในรูปแบบต่างๆ โดยอิงตามอินเซ็ตของแพลตฟอร์มพื้นฐาน ดังนี้
- ใช้
WindowInsets.safeDrawingเพื่อป้องกันเนื้อหาที่ไม่ควรวาดใต้ UI ของระบบ การใช้งานระยะขอบที่พบบ่อยที่สุดคือเพื่อป้องกันไม่ให้วาดเนื้อหาที่ UI ของระบบบดบัง (ไม่ว่าจะบางส่วนหรือทั้งหมด) - ใช้
WindowInsets.safeGesturesเพื่อปกป้องเนื้อหาด้วยท่าทางสัมผัส ซึ่งจะช่วย หลีกเลี่ยงไม่ให้ท่าทางสัมผัสของระบบขัดแย้งกับท่าทางสัมผัสของแอป (เช่น ท่าทางสัมผัสสำหรับชีตด้านล่าง แคโรเซล หรือในเกม) - ใช้
WindowInsets.safeContentร่วมกับWindowInsets.safeDrawingและWindowInsets.safeGesturesเพื่อให้มั่นใจว่า เนื้อหาไม่มีภาพซ้อนทับและไม่มีท่าทางสัมผัสซ้อนทับ
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- คอมโพเนนต์และเลย์เอาต์ของ Material
- ย้ายข้อมูล
CoordinatorLayoutไปยัง Compose - ข้อควรพิจารณาอื่นๆ