Bảo vệ thanh hệ thống

Sau khi ứng dụng của bạn nhắm đến SDK 35 trở lên, chế độ tràn viền sẽ được thực thi. Thanh trạng thái của hệ thống và thanh điều hướng bằng cử chỉ có màu trong suốt, nhưng thanh điều hướng bằng 3 nút có màu trong mờ. Gọi enableEdgeToEdge để tương thích ngược.

Tuy nhiên, các giá trị mặc định của hệ thống có thể không hoạt động với tất cả các trường hợp sử dụng. Hãy tham khảo hướng dẫn thiết kế thanh hệ thống Android và hướng dẫn thiết kế tràn viền để biết thông tin tổng quan về thời điểm nên sử dụng thanh hệ thống trong suốt hoặc mờ.

Tạo thanh hệ thống trong suốt

Tạo thanh điều hướng bằng cử chỉ trong suốt bằng cách nhắm đến Android 15 trở lên hoặc bằng cách gọi enableEdgeToEdge() với các đối số mặc định cho các phiên bản cũ hơn. Đối với thanh điều hướng ba nút, hãy đặt Window.setNavigationBarContrastEnforced thành false, nếu không, một màn chắn trong suốt sẽ được áp dụng.

Tạo thanh hệ thống mờ

Để tạo một thanh trạng thái mờ, hãy tạo một thành phần kết hợp tuỳ chỉnh chồng lên nội dung chính và vẽ hiệu ứng chuyển màu trong khu vực được bao phủ bởi các phần lồng ghép.

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

Hình 1. Thanh trạng thái mờ.

Đối với các ứng dụng thích ứng, hãy chèn một thành phần kết hợp tuỳ chỉnh khớp với màu của từng ngăn, như trong Thiết kế tràn viền. Để tạo một thanh điều hướng mờ, hãy đặt Window.setNavigationBarContrastEnforced thành true.