เกี่ยวกับส่วนที่เว้นไว้ในหน้าต่าง

แพลตฟอร์ม Android มีหน้าที่วาด UI ของระบบ เช่น แถบสถานะและแถบนำทาง UI ของระบบนี้จะแสดงขึ้นไม่ว่าผู้ใช้จะใช้แอปใดก็ตาม

WindowInsets ให้ข้อมูลเกี่ยวกับ UI ของระบบเพื่อให้แอปวาดในพื้นที่ที่ถูกต้องและ UI ของคุณไม่ถูก UI ของระบบบดบัง

การวาดจากขอบจรดขอบเพื่อวาดด้านหลังแถบระบบ
รูปที่ 1 การแสดงแบบไร้ขอบเพื่อวาดด้านหลังแถบระบบ

ใน Android 14 (ระดับ API 34) และต่ำกว่า UI ของแอปจะไม่แสดงใต้แถบระบบและหน้าจอรอยบากโดยค่าเริ่มต้น

ใน Android 15 (ระดับ API 35) ขึ้นไป แอปจะแสดงใต้แถบระบบและหน้าจอรอยบากเมื่อกำหนดเป้าหมายเป็น SDK 35 ซึ่งจะทำให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ราบรื่นยิ่งขึ้น และช่วยให้แอปใช้พื้นที่หน้าต่างที่มีอยู่ได้อย่างเต็มที่

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

ข้อมูลพื้นฐานเกี่ยวกับส่วนที่เว้นไว้

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

ขนาดของ UI ของระบบและข้อมูลเกี่ยวกับตำแหน่งที่วางจะระบุโดยใช้ ระยะขอบ

UI ของระบบแต่ละส่วนจะมีระยะขอบประเภทที่สอดคล้องกันซึ่งอธิบายขนาดและตำแหน่งที่วาง ตัวอย่างเช่น ระยะขอบแถบสถานะจะระบุขนาดและตำแหน่งของแถบสถานะ ในขณะที่ระยะขอบแถบนำทางจะระบุขนาดและตำแหน่งของแถบนำทาง ระยะขอบแต่ละประเภทประกอบด้วยขนาด 4 พิกเซล ได้แก่ ด้านบน ด้านซ้าย ด้านขวา และด้านล่าง ขนาดเหล่านี้จะระบุระยะที่ UI ของระบบขยายออกจากด้านที่เกี่ยวข้องของหน้าต่างแอป ดังนั้น UI ของแอปจึงต้องมีระยะขอบตามจำนวนดังกล่าวเพื่อหลีกเลี่ยงการทับซ้อนกับ UI ของระบบประเภทนั้น

ระยะขอบประเภทต่างๆ ใน Android ที่มีให้ใช้งานผ่าน WindowInsets มีดังนี้

WindowInsets.statusBars

ระยะขอบที่อธิบายแถบสถานะ ซึ่งเป็นแถบ UI ของระบบด้านบนที่มีไอคอนการแจ้งเตือนและสัญญาณอื่นๆ

WindowInsets.statusBarsIgnoringVisibility

ระยะขอบแถบสถานะเมื่อแถบสถานะแสดงอยู่ หากแถบสถานะซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบสถานะหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง

WindowInsets.navigationBars

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

WindowInsets.navigationBarsIgnoringVisibility

ระยะขอบแถบนำทางเมื่อแถบนำทางแสดงอยู่ หากแถบนำทางซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบนำทางหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง

WindowInsets.captionBar

ส่วนที่เว้นไว้ที่อธิบายการตกแต่งหน้าต่าง UI ของระบบหากอยู่ในหน้าต่างแบบอิสระ เช่น แถบชื่อด้านบน

WindowInsets.captionBarIgnoringVisibility

ระยะขอบแถบคำบรรยายเมื่อแถบคำบรรยายแสดงอยู่ หากแถบคำบรรยายซ่อนอยู่ ระยะขอบแถบคำบรรยายหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง

WindowInsets.systemBars

ระยะขอบของแถบระบบทั้งหมด ซึ่งรวมถึงแถบสถานะ แถบนำทาง และแถบคำบรรยาย

WindowInsets.systemBarsIgnoringVisibility

ระยะขอบแถบระบบเมื่อแถบระบบแสดงอยู่ หากแถบระบบซ่อนอยู่ (เนื่องจากเข้าสู่โหมดเต็มหน้าจอแบบสมจริง) ระยะขอบแถบระบบหลักจะเป็นค่าว่าง แต่ระยะขอบเหล่านี้จะไม่เป็นค่าว่าง

WindowInsets.ime

ส่วนที่เว้นไว้ที่อธิบายพื้นที่ด้านล่างที่แป้นพิมพ์เสมือนใช้

WindowInsets.imeAnimationSource

ระยะขอบที่อธิบายพื้นที่ที่คีย์บอร์ดซอฟต์แวร์ใช้ ก่อน ภาพเคลื่อนไหวของคีย์บอร์ดปัจจุบัน

WindowInsets.imeAnimationTarget

ระยะขอบที่อธิบายพื้นที่ที่คีย์บอร์ดซอฟต์แวร์จะใช้ หลัง ภาพเคลื่อนไหวของคีย์บอร์ดปัจจุบัน

WindowInsets.tappableElement

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

WindowInsets.tappableElementIgnoringVisibility

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

WindowInsets.systemGestures

ระยะขอบที่แสดงระยะขอบที่ระบบจะสกัดกั้นท่าทางสัมผัสเพื่อการนำทาง แอปสามารถระบุการจัดการท่าทางสัมผัสเหล่านี้ด้วยตนเองได้ในจำนวนจำกัดโดยใช้ Modifier.systemGestureExclusion

WindowInsets.mandatorySystemGestures

ท่าทางสัมผัสของระบบชุดย่อยที่ระบบจะจัดการเสมอ และไม่สามารถเลือกไม่ใช้โดยใช้ Modifier.systemGestureExclusion

WindowInsets.displayCutout

ระยะขอบที่แสดงระยะห่างที่จำเป็นเพื่อหลีกเลี่ยงการทับซ้อนกับหน้าจอรอยบาก (รอยบากหรือรูเข็ม)

WindowInsets.waterfall

ระยะขอบที่แสดงพื้นที่โค้งของหน้าจอแบบน้ำตก หน้าจอแบบน้ำตกมีพื้นที่โค้งตามขอบของหน้าจอที่หน้าจอเริ่มโค้งไปตามด้านข้างของอุปกรณ์

ระยะขอบประเภทเหล่านี้สรุปได้เป็นระยะขอบ "ปลอดภัย" 3 ประเภทที่ช่วยให้เนื้อหาไม่ถูกบดบัง

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

  • ใช้ WindowInsets.safeDrawing เพื่อปกป้องเนื้อหาที่ไม่ควรแสดง ใต้ UI ของระบบ นี่คือการใช้งานระยะขอบที่พบบ่อยที่สุด นั่นคือ เพื่อป้องกันไม่ให้เนื้อหาที่ UI ของระบบบดบัง (บางส่วนหรือทั้งหมด) แสดงขึ้น
  • ใช้ WindowInsets.safeGestures เพื่อปกป้องเนื้อหาที่มีท่าทางสัมผัส ซึ่งจะช่วยหลีกเลี่ยงไม่ให้ท่าทางสัมผัสของระบบขัดแย้งกับท่าทางสัมผัสของแอป (เช่น ท่าทางสัมผัสสำหรับ Bottom Sheet, Carousel หรือในเกม)
  • ใช้ WindowInsets.safeContent เป็นการรวมกันของ WindowInsets.safeDrawing และ WindowInsets.safeGestures เพื่อให้มั่นใจว่า เนื้อหาไม่มีการทับซ้อนกันทางภาพและไม่มีการทับซ้อนกันของท่าทางสัมผัส