เกี่ยวกับการปกป้องแถบระบบ

เมื่อแอปกำหนดเป้าหมายเป็น SDK 35 ขึ้นไป ระบบจะบังคับใช้การแสดงผลแบบไร้ขอบ แถบสถานะของระบบและแถบการนำทางด้วยท่าทางสัมผัสจะโปร่งใส แต่ แถบการนำทางแบบ 3 ปุ่มจะโปร่งแสง เรียกใช้ enableEdgeToEdge เพื่อให้เข้ากันได้แบบย้อนหลัง

อย่างไรก็ตาม ค่าเริ่มต้นของระบบอาจใช้ไม่ได้กับ Use Case บางอย่าง โปรดดูคำแนะนำในการออกแบบแถบระบบของ Android และคำแนะนำในการออกแบบแบบขอบจรดขอบเพื่อดูภาพรวมของเวลาที่ควรพิจารณาใช้แถบระบบแบบโปร่งใสหรือ โปร่งแสง

สร้างแถบระบบแบบโปร่งใส

สร้างแถบนำทางด้วยท่าทางสัมผัสแบบโปร่งใสโดยกำหนดเป้าหมายเป็น Android 15 ขึ้นไป หรือ โดยเรียกใช้ enableEdgeToEdge() ด้วยอาร์กิวเมนต์เริ่มต้นสำหรับเวอร์ชันก่อนหน้า สำหรับ แถบนำทางแบบ 3 ปุ่ม ให้ตั้งค่า Window.setNavigationBarContrastEnforced เป็น false มิฉะนั้นระบบจะใช้เลเยอร์กึ่งโปร่งใส

สร้างแถบระบบแบบโปร่งแสง

หากต้องการสร้างแถบสถานะแบบโปร่งแสง ให้สร้าง Composable ที่กำหนดเองซึ่งซ้อนทับเนื้อหาหลักและวาดการไล่ระดับสีในพื้นที่ที่ครอบคลุมโดย Insets

class SystemBarProtectionSnippets : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // enableEdgeToEdge sets window.isNavigationBarContrastEnforced = true
        // which is used to add a translucent scrim to three-button navigation
        enableEdgeToEdge()

        setContent {
            MyTheme {
                // Main content
                MyContent()

                // After drawing main content, draw status bar protection
                StatusBarProtection()
            }
        }
    }
}

@Composable
private fun StatusBarProtection(
    color: Color = MaterialTheme.colorScheme.surfaceContainer,
) {
    Spacer(
        modifier = Modifier
            .fillMaxWidth()
            .height(
                with(LocalDensity.current) {
                    (WindowInsets.statusBars.getTop(this) * 1.2f).toDp()
                }
            )
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        color.copy(alpha = 1f),
                        color.copy(alpha = 0.8f),
                        Color.Transparent
                    )
                )
            )
    )
}

รูปที่ 1 แถบสถานะโปร่งแสง

สำหรับแอปที่ปรับเปลี่ยนตามอุปกรณ์ ให้แทรก Composable ที่กำหนดเองซึ่งตรงกับสีของแต่ละ บานหน้าต่าง ดังที่เห็นในการออกแบบแบบขอบจรดขอบ หากต้องการสร้างแถบนำทางแบบโปร่งแสง ให้ตั้งค่า Window.setNavigationBarContrastEnforced เป็น true