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