Ochrona paska systemu

Gdy aplikacja będzie kierowana na pakiet SDK 35 lub nowszy, wyświetlanie bez ramki będzie wymuszane. 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ą, zadzwoń pod numer enableEdgeToEdge.

Domyślne ustawienia systemu mogą jednak nie działać w przypadku niektórych przypadków użycia. Aby dowiedzieć się, kiedy warto użyć przezroczystych lub półprzezroczystych pasków systemu, zapoznaj się ze wskazówkami dotyczącymi projektowania pasków systemu Android i wskazówkami dotyczącymi projektowania od krawędzi do krawędzi.

Tworzenie przezroczystych pasków systemu

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

Tworzenie przezroczystych pasków systemu

Aby utworzyć przezroczysty pasek stanu, utwórz niestandardowy komponent, który nakłada się na główną zawartość i rysuje gradient w obszarze objętym przez wstawki.

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. Przejrzysty pasek stanu.

W przypadku aplikacji dostosowujących się do ekranu wstaw niestandardowy komponent, który dopasowuje kolory do każdego panelu, jak w projektowaniu od krawędzi do krawędzi. Aby utworzyć przezroczystą belkę nawigacyjną, ustaw wartość Window.setNavigationBarContrastEnforced na „PRAWDA”.