Informacje o ochronie paska systemowego

Gdy aplikacja będzie kierowana na pakiet SDK 35 lub nowszy, będzie wymuszane 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. Wywołaj enableEdgeToEdge, aby zapewnić zgodność wsteczną.

Ustawienia domyślne systemu mogą jednak nie działać we wszystkich przypadkach użycia. Zapoznaj się ze wskazówkami dotyczącymi projektowania pasków systemowych Androida i wskazówkami dotyczącymi projektowania aplikacji bez ramki, aby dowiedzieć się, kiedy warto rozważyć użycie przezroczystych lub półprzezroczystych pasków systemowych.

Tworzenie przezroczystych pasków systemowych

Utwórz przezroczysty pasek nawigacji przy użyciu gestów, kierując aplikację na Androida 15 lub nowszego albo wywołując metodę enableEdgeToEdge() z argumentami domyślnymi w przypadku wcześniejszych wersji. W przypadku paska nawigacji z 3 przyciskami ustaw Window.setNavigationBarContrastEnforced na false, w przeciwnym razie zostanie zastosowana półprzezroczysta nakładka.

Tworzenie półprzezroczystych pasków systemowych

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 objętym wstawkami.

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 w projekcie od krawędzi do krawędzi. Aby utworzyć półprzezroczysty pasek nawigacyjny, ustaw Window.setNavigationBarContrastEnforced na wartość „true”.