Cutouts ใน Compose

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

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

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

เคสเริ่มต้น

แอปที่กำหนดเป้าหมายเป็น 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

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

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

ทดสอบวิธีที่เนื้อหาแสดงผลด้วยภาพตัด

อย่าลืมทดสอบหน้าจอและประสบการณ์การใช้งานทั้งหมดของแอป ทดสอบในอุปกรณ์ที่มีการตัดออกประเภทต่างๆ หากเป็นไปได้ หากไม่มีอุปกรณ์ที่มีส่วนตัดออก คุณสามารถจำลองการกำหนดค่าส่วนตัดออกทั่วไปในอุปกรณ์หรือโปรแกรมจำลองที่ใช้ Android 9 ขึ้นไปได้โดยทำดังนี้

1. เปิดใช้ตัวเลือกสำหรับนักพัฒนาแอป
2. ในหน้าจอตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ ให้เลื่อนลงไปที่ส่วนการวาด แล้วเลือกจำลองการแสดงผลที่มีรอยบาก
3. เลือกประเภทการตัดออก