Informacje o ochronie paska systemowego

Gdy aplikacja zacznie korzystać z pakietu SDK w wersji 35 lub nowszej, wymuszane będzie wyświetlanie bez ramki. Pasek stanu systemu i paski nawigacji przy użyciu gestów są przezroczyste, ale pasek nawigacji z 3 przyciskami jest półprzezroczysty. Aby zapewnić zgodność wsteczną, wywołaj funkcję enableEdgeToEdge.

Domyślne ustawienia systemu mogą jednak nie działać we wszystkich przypadkach użycia. Aby dowiedzieć się, kiedy warto rozważyć użycie przezroczystych lub półprzezroczystych pasków systemu, zapoznaj się ze wskazówkami dotyczącymi projektowania pasków systemu Android i projektowania bez ramki oraz projektowania bez ramki.

Tworzenie przezroczystych pasków systemu

Aby utworzyć przezroczysty pasek nawigacji przy użyciu gestów, ustaw jako docelową wersję Androida 15 lub nowszą albo wywołaj funkcję enableEdgeToEdge() z argumentami domyślnymi w przypadku starszych wersji. W przypadku paska nawigacji z 3 przyciskami ustaw wartość Window.setNavigationBarContrastEnforced na false. W przeciwnym razie zostanie zastosowana półprzezroczysta zasłona.

Tworzenie półprzezroczystych pasków systemu

Aby utworzyć półprzezroczysty pasek stanu, utwórz niestandardowy element kompozycyjny, który nakłada się na główną treść i rysuje gradient w obszarze pokrytym odcięciami.

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
                    )
                )
            )
    )
}
SystemBarProtectionSnippets.kt

Rysunek 1. Półprzezroczysty pasek stanu.

W przypadku aplikacji adaptacyjnych wstaw niestandardowy element kompozycyjny, który pasuje do kolorów każdego panelu, jak widać w projekcie bez ramki. Aby utworzyć półprzezroczysty pasek nawigacji, ustaw wartość Window.setNavigationBarContrastEnforced na true.