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

แพลตฟอร์ม 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 ของระบบและข้อมูลเกี่ยวกับตำแหน่งที่วางจะระบุโดยใช้ inset

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

ส่วนแทรกที่แสดงพื้นที่โค้งของจอแสดงผลแบบน้ำตก จอแสดงผลแบบ Waterfall มีพื้นที่โค้งตามขอบของหน้าจอซึ่งหน้าจอเริ่มโค้งไปตามด้านข้างของอุปกรณ์

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

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

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