การปกป้องแถบระบบ

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

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

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

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

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

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

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,
    heightProvider: () -> Float = calculateGradientHeight(),
) {

    Canvas(Modifier.fillMaxSize()) {
        val calculatedHeight = heightProvider()
        val gradient = Brush.verticalGradient(
            colors = listOf(
                color.copy(alpha = 1f),
                color.copy(alpha = .8f),
                Color.Transparent
            ),
            startY = 0f,
            endY = calculatedHeight
        )
        drawRect(
            brush = gradient,
            size = Size(size.width, calculatedHeight),
        )
    }
}

@Composable
fun calculateGradientHeight(): () -> Float {
    val statusBars = WindowInsets.statusBars
    val density = LocalDensity.current
    return { statusBars.getTop(density).times(1.2f) }
}
SystemBarProtectionSnippets.kt

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

สําหรับแอปที่ปรับขนาดได้ ให้แทรกคอมโพสิชันที่กําหนดเองซึ่งตรงกับสีของแผงแต่ละแผง ดังที่เห็นในการออกแบบแบบเต็มหน้าจอ หากต้องการสร้างแถบนําทางแบบโปร่งแสง ให้ตั้งค่า Window.setNavigationBarContrastEnforced เป็น "จริง"