แพลตฟอร์ม 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 ของระบบแต่ละส่วนจะมีระยะขอบประเภทที่สอดคล้องกันซึ่งอธิบายขนาดและตำแหน่งที่วาง ตัวอย่างเช่น ระยะขอบแถบสถานะจะระบุขนาดและตำแหน่งของแถบสถานะ ในขณะที่ระยะขอบแถบนำทางจะระบุขนาดและตำแหน่งของแถบนำทาง ระยะขอบแต่ละประเภทประกอบด้วยขนาด 4 พิกเซล ได้แก่ ด้านบน ด้านซ้าย ด้านขวา และด้านล่าง ขนาดเหล่านี้จะระบุระยะที่ UI ของระบบขยายออกจากด้านที่เกี่ยวข้องของหน้าต่างแอป ดังนั้น UI ของแอปจึงต้องมีระยะขอบตามจำนวนดังกล่าวเพื่อหลีกเลี่ยงการทับซ้อนกับ UI ของระบบประเภทนั้น
ระยะขอบประเภทต่างๆ ใน Android ที่มีให้ใช้งานผ่าน WindowInsets มีดังนี้
ระยะขอบที่อธิบายแถบสถานะ ซึ่งเป็นแถบ UI ของระบบด้านบนที่มีไอคอนการแจ้งเตือนและสัญญาณอื่นๆ |
|
ระยะขอบแถบสถานะเมื่อแถบสถานะแสดงอยู่ หากแถบสถานะซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบสถานะหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง |
|
ระยะขอบที่อธิบายแถบนำทาง ซึ่งเป็นแถบ UI ของระบบที่ด้านซ้าย ด้านขวา หรือด้านล่างของอุปกรณ์ ซึ่งอธิบายแถบงานหรือไอคอนการนำทาง แถบเหล่านี้อาจเปลี่ยนแปลงได้ในรันไทม์โดยอิงตามวิธีการนำทางที่ผู้ใช้ต้องการและการโต้ตอบกับแถบงาน |
|
ระยะขอบแถบนำทางเมื่อแถบนำทางแสดงอยู่ หากแถบนำทางซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบนำทางหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง |
|
ส่วนที่เว้นไว้ที่อธิบายการตกแต่งหน้าต่าง UI ของระบบหากอยู่ในหน้าต่างแบบอิสระ เช่น แถบชื่อด้านบน |
|
ระยะขอบแถบคำบรรยายเมื่อแถบคำบรรยายแสดงอยู่ หากแถบคำบรรยายซ่อนอยู่ ระยะขอบแถบคำบรรยายหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง |
|
ระยะขอบของแถบระบบทั้งหมด ซึ่งรวมถึงแถบสถานะ แถบนำทาง และแถบคำบรรยาย |
|
ระยะขอบแถบระบบเมื่อแถบระบบแสดงอยู่ หากแถบระบบซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบระบบหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง |
|
ส่วนที่เว้นไว้ที่อธิบายพื้นที่ด้านล่างที่แป้นพิมพ์เสมือนใช้ |
|
ระยะขอบที่อธิบายพื้นที่ที่คีย์บอร์ดซอฟต์แวร์ใช้ ก่อน ภาพเคลื่อนไหวของคีย์บอร์ดปัจจุบัน |
|
ระยะขอบที่อธิบายพื้นที่ที่คีย์บอร์ดซอฟต์แวร์จะใช้ หลัง ภาพเคลื่อนไหวของคีย์บอร์ดปัจจุบัน |
|
ระยะขอบประเภทหนึ่งที่อธิบายข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับ UI การนำทาง โดยระบุพื้นที่ที่ระบบจะจัดการ "การแตะ" ไม่ใช่แอป สำหรับแถบนำทางแบบโปร่งใสที่มีการไปยังส่วนต่างๆ ด้วยท่าทางสัมผัส องค์ประกอบบางอย่างของแอปสามารถแตะผ่าน UI การนำทางของระบบได้ |
|
ระยะขอบขององค์ประกอบที่แตะได้เมื่อองค์ประกอบดังกล่าวแสดงอยู่ หากองค์ประกอบที่แตะได้ซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบขององค์ประกอบที่แตะได้หลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง |
|
ระยะขอบที่แสดงระยะขอบที่ระบบจะสกัดกั้นท่าทางสัมผัสเพื่อการนำทาง แอปสามารถระบุการจัดการท่าทางสัมผัสเหล่านี้ด้วยตนเองได้ในจำนวนจำกัดโดยใช้ |
|
ท่าทางสัมผัสของระบบชุดย่อยที่ระบบจะจัดการเสมอ และไม่สามารถเลือกไม่ใช้โดยใช้ |
|
ระยะขอบที่แสดงระยะห่างที่จำเป็นเพื่อหลีกเลี่ยงการทับซ้อนกับหน้าจอรอยบาก (รอยบากหรือรูเข็ม) |
|
ระยะขอบที่แสดงพื้นที่โค้งของหน้าจอแบบน้ำตก หน้าจอแบบน้ำตกมีพื้นที่โค้งตามขอบของหน้าจอที่หน้าจอเริ่มโค้งไปตามด้านข้างของอุปกรณ์ |
ระยะขอบประเภทเหล่านี้สรุปได้เป็นระยะขอบ "ปลอดภัย" 3 ประเภทที่ช่วยให้เนื้อหาไม่ถูกบดบัง
ระยะขอบ "ปลอดภัย" ประเภทเหล่านี้จะปกป้องเนื้อหาในรูปแบบต่างๆ โดยอิงตามระยะขอบของแพลตฟอร์มพื้นฐาน
- ใช้
WindowInsets.safeDrawingเพื่อปกป้องเนื้อหาที่ไม่ควรแสดง ใต้ UI ของระบบ นี่คือการใช้งานระยะขอบที่พบบ่อยที่สุด นั่นคือ เพื่อป้องกันไม่ให้เนื้อหาที่ UI ของระบบบดบัง (บางส่วนหรือทั้งหมด) แสดงขึ้น - ใช้
WindowInsets.safeGesturesเพื่อปกป้องเนื้อหาที่มีท่าทางสัมผัส ซึ่งจะช่วยหลีกเลี่ยงไม่ให้ท่าทางสัมผัสของระบบขัดแย้งกับท่าทางสัมผัสของแอป (เช่น ท่าทางสัมผัสสำหรับ Bottom Sheet, Carousel หรือในเกม) - ใช้
WindowInsets.safeContentเป็นการรวมกันของWindowInsets.safeDrawingและWindowInsets.safeGesturesเพื่อให้มั่นใจว่า เนื้อหาไม่มีการทับซ้อนกันทางภาพและไม่มีการทับซ้อนกันของท่าทางสัมผัส
แนะนำสำหรับคุณ
- หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
- คอมโพเนนต์และเลย์เอาต์ของ Material
- ย้ายข้อมูล
CoordinatorLayoutไปยัง Compose - ข้อควรพิจารณาอื่นๆ