Schutz der Systemleiste

Sobald Ihre App auf SDK 35 oder höher ausgerichtet ist, wird die randlose Anzeige erzwungen. Die Systemstatusleiste und die Navigationsleisten für die Gestensteuerung sind transparent, die Navigationsleiste mit drei Schaltflächen ist jedoch durchscheinend. Rufen Sie enableEdgeToEdge auf, um die Abwärtskompatibilität zu gewährleisten.

Die Standardeinstellungen des Systems sind jedoch möglicherweise nicht für alle Anwendungsfälle geeignet. In der Anleitung zum Design von Android-Systemleisten und der Anleitung zum Edge-to-Edge-Design finden Sie eine Übersicht darüber, wann transparente oder durchscheinende Systemleisten infrage kommen.

Transparente Systemleisten erstellen

Sie können eine transparente Navigationsleiste für die Gestensteuerung erstellen, indem Sie auf Android 15 oder höher ausgerichtet sind oder enableEdgeToEdge() mit Standardargumenten für frühere Versionen aufrufen. Bei der Navigationsleiste mit drei Schaltflächen muss Window.setNavigationBarContrastEnforced auf false gesetzt werden, da sonst ein durchscheinender Scrim angewendet wird.

Transparente Systemleisten erstellen

Wenn Sie eine durchscheinende Statusleiste erstellen möchten, erstellen Sie eine benutzerdefinierte zusammensetzbare Funktion, die sich mit dem Hauptinhalt überschneidet und einen Farbverlauf im Bereich der Insets zeichnet.

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

Abbildung 1. Eine durchscheinende Statusleiste.

Fügen Sie für adaptive Apps ein benutzerdefiniertes Composable ein, das den Farben der einzelnen Bereiche entspricht, wie im Edge-to-Edge-Design zu sehen ist. Wenn Sie eine durchscheinende Navigationsleiste erstellen möchten, setzen Sie Window.setNavigationBarContrastEnforced auf „true“.

Zurück
Einzüge in Ansichten und im Tool „Compose“ verwenden
Weiter
Ausschnitte