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

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

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

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

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

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

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

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 แถบสถานะโปร่งแสง

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