App-Leisten

App-Leisten sind Container, die Nutzern Zugriff auf wichtige Funktionen und Navigationselemente bieten. Es gibt zwei Arten von App-Leisten: obere und untere App-Leisten. Aussehen und Zweck der einzelnen Elemente:

Typ	Darstellung	Zweck
Obere App-Leiste	Oben auf dem Bildschirm.	Bietet Zugriff auf wichtige Aufgaben und Informationen. Enthält in der Regel einen Titel, wichtige Aufgaben und bestimmte Navigationselemente.
Untere App-Leiste	Am unteren Bildschirmrand.	Enthält in der Regel die wichtigsten Navigationselemente. Kann auch Zugriff auf andere wichtige Aktionen bieten, z. B. über einen enthaltenen unverankerten Aktionsbutton.

Abbildung 1. Eine obere App-Leiste (links) und eine untere App-Leiste (rechts).

Wenn Sie eine obere und eine untere App-Leiste implementieren möchten, verwenden Sie die Composables TopAppBar bzw. BottomAppBar. Mit ihnen können Sie einheitliche Oberflächen erstellen, die Navigations- und Aktionselemente enthalten und den Prinzipien von Material Design entsprechen.

Wichtig: App-Leisten werden im Allgemeinen an die Scaffold-Komposition übergeben, die bestimmte Parameter für den Empfang hat. Weitere Informationen dazu, wie Sie mit Scaffold Ihre App bequem strukturieren können, finden Sie auf der Seite zu Scaffold.

Obere App-Leisten

In der folgenden Tabelle sind die vier Arten von oberen App-Leisten aufgeführt:

Typ	Beispiel
Klein: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern.
Zentriert: Für Bildschirme mit einer einzigen, primären Aktion.
Mittel: Für Bildschirme, die eine mäßige Anzahl von Navigations- und Aktionselementen erfordern.
Groß: Für Bildschirme, die viel Navigation und viele Aktionen erfordern.

API-Oberfläche

Die verschiedenen Composables, mit denen Sie die vier verschiedenen oberen App-Leisten implementieren können, sind sich sehr ähnlich. Sie haben mehrere wichtige Parameter gemeinsam:

• title: Der Text, der in der App-Leiste angezeigt wird.
• navigationIcon: Das primäre Symbol für die Navigation. Wird links in der App-Leiste angezeigt.
• actions: Symbole, die dem Nutzer Zugriff auf wichtige Aktionen bieten. Sie werden rechts in der App-Leiste angezeigt.
• scrollBehavior: Legt fest, wie die obere App-Leiste auf das Scrollen des inneren Inhalts des Scaffolds reagiert.
• colors: Bestimmt, wie die App-Leiste angezeigt wird.

Scrollverhalten

Sie können festlegen, wie die App-Leiste reagiert, wenn der Nutzer den inneren Inhalt des angegebenen Scaffolds scrollt. Erstellen Sie dazu eine Instanz von TopAppBarScrollBehavior und übergeben Sie sie als scrollBehavior-Parameter an die obere App-Leiste.

Es gibt drei Arten von TopAppBarScrollBehavior. Diese sind:

• enterAlwaysScrollBehavior: Wenn der Nutzer den inneren Inhalt des Scaffold nach oben zieht, wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer beginnt, den inneren Inhalt nach unten zu ziehen.
• exitUntilCollapsedScrollBehavior: Ähnlich wie enterAlwaysScrollBehavior, die App-Leiste wird jedoch nur maximiert, wenn der Nutzer den Inhalt ganz nach unten zieht.
• pinnedScrollBehavior: Die App-Leiste bleibt an Ort und Stelle und reagiert nicht auf das Scrollen.

In den folgenden Beispielen werden mehrere dieser Optionen implementiert.

Beispiele

In den folgenden Abschnitten finden Sie Implementierungen für die vier verschiedenen Arten von oberen App-Leisten, einschließlich verschiedener Beispiele dafür, wie Sie das Scrollverhalten steuern können.

Klein

Verwenden Sie die zusammensetzbare Funktion TopAppBar, um eine kleine obere App-Leiste zu erstellen. Im folgenden Beispiel wird eine einfache obere App-Leiste implementiert, die nur einen Titel enthält.

Im folgenden Beispiel wird TopAppBar kein Wert für scrollBehavior übergeben. Daher reagiert es nicht auf das Scrollen des inneren Inhalts.

@Composable
fun SmallTopAppBarExample() {
    Scaffold(
        topBar = {
            TopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text("Small Top App Bar")
                }
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

Abbildung 2: Eine kleine obere App-Leiste.

Zentriert ausgerichtet

Die zentrierte obere App-Leiste ist im Wesentlichen mit der kleinen App-Leiste identisch, der Titel ist jedoch innerhalb der Komponente zentriert. Verwenden Sie zur Implementierung das dedizierte Compose-Element CenterAlignedTopAppBar.

In diesem Beispiel wird enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird. Daher wird die Leiste minimiert, wenn der Nutzer den inneren Inhalt des Scaffold scrollt.

@Composable
fun CenterAlignedTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Centered Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior,
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

Abbildung 3: Eine zentrierte obere App-Leiste.

Mittel

In der mittelgroßen oberen App-Leiste wird der Titel unter allen zusätzlichen Symbolen platziert. Verwenden Sie zum Erstellen eines solchen Elements die zusammensetzbare Funktion MediumTopAppBar.

Wie im vorherigen Snippet wird in diesem Beispiel enterAlwaysScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird.

@Composable
fun MediumTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.enterAlwaysScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            MediumTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Medium Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Diese Implementierung sieht so aus, wobei das Scrollverhalten von enterAlwaysScrollBehavior() demonstriert wird:

Abbildung 4. Eine mittelgroße obere App-Leiste, die minimiert wird, wenn der Nutzer nach oben scrollt, und maximiert wird, wenn der Nutzer nach unten scrollt.

Groß

Eine große obere App-Leiste ähnelt der mittleren, allerdings ist der Abstand zwischen dem Titel und den Symbolen größer und sie nimmt insgesamt mehr Platz auf dem Bildschirm ein. Verwenden Sie zum Erstellen einer solchen Funktion die zusammensetzbare Funktion LargeTopAppBar.

Im Gegensatz zu den vorherigen Snippets wird in diesem Beispiel exitUntilCollapsedScrollBehavior() verwendet, um den Wert abzurufen, der für scrollBehavior übergeben wird. Die Leiste wird minimiert, wenn der Nutzer den inneren Inhalt des Gerüsts scrollt, und maximiert, wenn der Nutzer zum Ende des inneren Inhalts scrollt.

@Composable
fun LargeTopAppBarExample() {
    val scrollBehavior = TopAppBarDefaults.exitUntilCollapsedScrollBehavior(rememberTopAppBarState())

    Scaffold(
        modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
        topBar = {
            LargeTopAppBar(
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = MaterialTheme.colorScheme.primaryContainer,
                    titleContentColor = MaterialTheme.colorScheme.primary,
                ),
                title = {
                    Text(
                        "Large Top App Bar",
                        maxLines = 1,
                        overflow = TextOverflow.Ellipsis
                    )
                },
                navigationIcon = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            imageVector = Icons.Filled.Menu,
                            contentDescription = "Localized description"
                        )
                    }
                },
                scrollBehavior = scrollBehavior
            )
        },
    ) { innerPadding ->
        ScrollContent(innerPadding)
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

Abbildung 5. Beispiel für die Implementierung einer großen oberen App-Leiste.

Untere App-Leiste

Verwenden Sie zum Erstellen einer unteren App-Leiste das BottomAppBar-Composable. Die Verwendung dieses Composables ähnelt den Composables für die obere App-Leiste, die in den vorherigen Abschnitten dieser Seite beschrieben wurden. Sie übergeben Composables für die folgenden Schlüsselparameter:

• actions: Eine Reihe von Symbolen, die auf der linken Seite der Leiste angezeigt werden. Dabei handelt es sich in der Regel um wichtige Aktionen für den jeweiligen Bildschirm oder um Navigationselemente.
• floatingActionButton: Der unverankerte Aktionsbutton, der auf der rechten Seite der Leiste angezeigt wird.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                actions = {
                    IconButton(onClick = { /* do something */ }) {
                        Icon(Icons.Filled.Check, contentDescription = "Localized description")
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Edit,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Mic,
                            contentDescription = "Localized description",
                        )
                    }
                    IconButton(onClick = { /* do something */ }) {
                        Icon(
                            Icons.Filled.Image,
                            contentDescription = "Localized description",
                        )
                    }
                },
                floatingActionButton = {
                    FloatingActionButton(
                        onClick = { /* do something */ },
                        containerColor = BottomAppBarDefaults.bottomAppBarFabColor,
                        elevation = FloatingActionButtonDefaults.bottomAppBarFabElevation()
                    ) {
                        Icon(Icons.Filled.Add, "Localized description")
                    }
                }
            )
        },
    ) { innerPadding ->
        Text(
            modifier = Modifier.padding(innerPadding),
            text = "Example of a scaffold with a bottom app bar."
        )
    }
}
AppBar.kt

Diese Implementierung sieht so aus:

Abbildung 6: Beispielimplementierung einer unteren App-Leiste.

Hinweis: Sie können BottomAppBar auch verwenden, ohne einen Wert für actions und floatingActionButton zu übergeben. In diesem Fall können Sie eine benutzerdefinierte untere App-Leiste erstellen, indem Sie BottomAppBar wie andere Container mit Inhalten füllen.

Zusätzliche Ressourcen

• Material3-Dokumentation – Obere App-Leiste
• Material3-Dokumentation – Untere App-Leiste
• Scaffold