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