เกี่ยวกับการตัดภาพ

หน้าจอรอยบากคือพื้นที่ในอุปกรณ์บางเครื่องที่ยื่นเข้าไปในพื้นผิวของหน้าจอ ซึ่งช่วยให้ได้รับประสบการณ์การใช้งานแบบ ไร้ขอบ พร้อมกับมีพื้นที่สำหรับเซ็นเซอร์ที่สำคัญด้านหน้าของอุปกรณ์

Android รองรับรอยบากบนหน้าจอในอุปกรณ์ที่ใช้ Android 9 (ระดับ API 28) ขึ้นไป อย่างไรก็ตาม ผู้ผลิตอุปกรณ์ยังรองรับรอยบากบนหน้าจอในอุปกรณ์ที่ใช้ Android 8.1 หรือต่ำกว่าได้ด้วย

หน้านี้อธิบายวิธีใช้การรองรับอุปกรณ์ที่มีรอยบากใน Compose รวมถึงวิธีใช้ พื้นที่รอยบาก ซึ่งก็คือสี่เหลี่ยมผืนผ้าแบบไร้ขอบ บนพื้นผิวของหน้าจอที่มีรอยบาก

กรณีเริ่มต้น

แอปที่กำหนดเป้าหมายเป็น API ระดับ 34 หรือต่ำกว่า หรือกิจกรรมที่ไม่เรียกใช้ enableEdgeToEdge จะไม่วาดลงในบริเวณรอยบากโดยค่าเริ่มต้น เว้นแต่แอปจะวาดลงในแถบระบบที่มีรอยบากบนหน้าจอ

แอปที่กำหนดเป้าหมายเป็น API ระดับ 35 ขึ้นไปในอุปกรณ์ที่ใช้ Android 15 ขึ้นไป หรือกิจกรรมที่เรียกใช้ enableEdgeToEdge จะวาดลงในบริเวณรอยบาก

กล่าวอีกนัยหนึ่งคือ ระบบจะตีความ LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES และ LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER เป็น LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS สำหรับหน้าต่างที่ไม่ลอยในแอปที่กำหนดเป้าหมายเป็น API ระดับ 35 ขึ้นไปในอุปกรณ์ที่ใช้ Android 15 ขึ้นไป

จัดการข้อมูลรอยบากด้วยตนเอง

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

• ใช้ WindowInsets.displayCutout, WindowInsets.safeContent หรือ WindowInsets.safeDrawing

• เข้าถึงออบเจ็กต์ Path ของรอยบากด้วย LocalView.current.rootWindowInsets.displayCutout

สำหรับ Compose เราขอแนะนำให้คุณใช้ displayCutout, safeContent หรือ safeDrawing เพื่อจัดการระยะขอบรอยบากใน Composables แนวทางนี้ช่วยให้คุณคำนึงถึงระยะขอบรอยบากบนหน้าจอเมื่อจำเป็น หรือละเว้นเมื่อไม่จำเป็น

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt