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

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

รูปที่ 1 ตัวอย่างภาพตัดในโหมดภาพบุคคล

รูปที่ 2 ตัวอย่างการตัดในโหมดแนวนอน

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 เพื่อจัดการส่วนแทรกของคัตเอาต์ใน Composable วิธีนี้ช่วยให้คุณคำนึงถึงระยะห่างจากขอบของหน้าจอรอยบากในกรณีที่จำเป็น หรือละเว้นได้ในกรณีที่ไม่จำเป็น

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