Informacje o ochronie paska systemowego

Gdy aplikacja będzie korzystać z pakietu SDK 35 lub nowszego, wyświetlanie bez ramki będzie wymuszane. Pasek stanu systemu i paski nawigacji przy użyciu gestów są przezroczyste, ale pasek nawigacji przy użyciu 3 przycisków jest półprzezroczysty. Zadzwoń pod numer enableEdgeToEdge, aby ustawić zgodność wsteczną.

Jednak domyślne ustawienia systemu mogą nie działać w przypadku wszystkich zastosowań. Zapoznaj się ze wskazówkami dotyczącymi projektowania pasków systemowych na Androidzie i wskazówkami dotyczącymi projektowania od krawędzi do krawędzi, 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 nawigacyjny gestami, kierując aplikację na Androida 15 lub nowszego albo wywołując metodę enableEdgeToEdge() z argumentami domyślnymi w przypadku starszych wersji. W przypadku 3-przyciskowego paska nawigacyjnego ustaw wartość Window.setNavigationBarContrastEnforced na false. W przeciwnym razie zostanie zastosowana półprzezroczysta zasłona.

Tworzenie półprzezroczystych pasków systemowych

Aby utworzyć półprzezroczysty pasek stanu, utwórz niestandardowy komponent kompozycyjny, który nakłada się na główną treść i rysuje gradient w obszarze pokrytym 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,
    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

Rysunek 1. Półprzezroczysty pasek stanu.

W przypadku aplikacji adaptacyjnych wstaw niestandardowy komponent, który pasuje do kolorów każdego panelu, jak widać w projekcie od krawędzi do krawędzi. Aby utworzyć półprzezroczysty pasek nawigacyjny, ustaw wartość Window.setNavigationBarContrastEnforced na true.

Wstecz
Używanie wstawionych obrazów w widokach i w edytorze wiadomości
Dalej
Informacje o wycinkach