App-Leisten

App-Leisten sind Container, die dem Nutzer Zugriff auf wichtige Funktionen und Navigationselemente bieten. Es gibt zwei Arten von App-Leisten: obere und untere App-Leisten. Ihr jeweiliges Aussehen und ihr Zweck sind wie folgt:

Typ	Darstellung	Zweck
Obere App-Leiste	Am oberen Bildschirmrand.	Zugriff auf wichtige Aufgaben und Informationen In der Regel werden ein Titel, wichtige Aufgaben und bestimmte Navigationselemente gehostet.
Untere App-Leiste	Am unteren Bildschirmrand.	Enthält in der Regel die wichtigsten Navigationselemente. Sie bietet eventuell auch Zugriff auf andere wichtige Aktionen, z. B. über eine enthaltene unverankerte Aktionsschaltfläche.

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

Um eine obere und eine untere App-Leiste zu implementieren, verwenden Sie die zusammensetzbaren Funktionen TopAppBar und BottomAppBar. Sie ermöglichen es Ihnen, einheitliche Oberflächen zu erstellen, die Navigations- und Aktionssteuerungen umfassen und auf Material Design-Prinzipien ausgerichtet sind.

Wichtig :App-Leisten werden in der Regel an die zusammensetzbare Funktion Scaffold übergeben, die bestimmte Parameter hat, um sie zu empfangen. Weitere Informationen dazu, wie Scaffold eine bequeme Möglichkeit zum Strukturieren deiner App bietet, findest du auf der Scaffold-Seite.

Top-App-Leisten

In der folgenden Tabelle werden die vier Arten von oberen App-Leisten beschrieben:

Typ	Beispiel
Klein: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern.
Zentriert: Für Bildschirme mit einer einzelnen, primären Aktion.
Mittel: Diese Option eignet sich für Bildschirme, die relativ viel Navigation und Aktionen erfordern.
Groß: Für Bildschirme, die viel Navigation und Aktionen erfordern.

API-Oberfläche

Die verschiedenen zusammensetzbaren Funktionen, mit denen Sie die vier verschiedenen oberen App-Leisten implementieren können, sind ziemlich ä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. Sie erscheint links in der App-Leiste.
• actions: Symbole, die dem Nutzer Zugriff auf wichtige Aktionen ermöglichen. Sie erscheinen rechts in der App-Leiste.
• scrollBehavior: Bestimmt, wie die obere App-Leiste auf das Scrollen durch den inneren Inhalt des Scaffold reagiert.
• colors: Bestimmt, wie die App-Leiste angezeigt wird.

Scrollverhalten

Sie können festlegen, wie die App-Leiste reagiert, wenn der Nutzer durch den inneren Inhalt des Gerüsts scrollt. Dazu erstellen Sie eine Instanz von TopAppBarScrollBehavior und übergeben sie in der oberen App-Leiste für den Parameter scrollBehavior.

Es gibt drei Arten von TopAppBarScrollBehavior. Diese sind:

• enterAlwaysScrollBehavior: Wenn der Nutzer den inneren Inhalt des Gerüsts aufruft, wird die obere App-Leiste minimiert. Die App-Leiste wird erweitert, wenn der Nutzer den inneren Inhalt herunterzieht.
• exitUntilCollapsedScrollBehavior: Ähnlich wie enterAlwaysScrollBehavior, aber die App-Leiste wird zusätzlich erweitert, wenn der Nutzer das Ende des inneren Inhalts des Gerüsts erreicht.
• pinnedScrollBehavior: Die App-Leiste bleibt unverändert und reagiert nicht auf das Scrollen.

In den folgenden Beispielen werden einige dieser Optionen implementiert.

Beispiele

In den folgenden Abschnitten findest du Implementierungen für die vier verschiedenen Arten von oberen App-Leisten und verschiedene Beispiele für die Steuerung des Scrollverhaltens.

Klein

Um eine kleine obere App-Leiste zu erstellen, verwenden Sie die zusammensetzbare Funktion TopAppBar. Dies ist die einfachste mögliche obere App-Leiste. In diesem Beispiel enthält sie nur einen Titel.

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

@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 App-Leiste oben.

Zentriert

Die zentrierte obere App-Leiste entspricht im Wesentlichen der kleinen App-Leiste, auch wenn der Titel innerhalb der Komponente zentriert ist. Verwenden Sie zur Implementierung die dedizierte zusammensetzbare Funktion 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 durch den inneren Inhalt des Gerüsts 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.

Medium

In der mittelgroßen App-Leiste wird der Titel unter allen zusätzlichen Symbolen platziert. Verwenden Sie dazu die zusammensetzbare Funktion MediumTopAppBar.

Wie beim vorherigen Snippet wird auch hier 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

Hier siehst du, wie das Scrollverhalten von enterAlwaysScrollBehavior() aussieht:

Abbildung 4. Eine zentrierte, obere App-Leiste.

Groß

Eine große obere App-Leiste ähnelt dem Medium, allerdings ist der Abstand zwischen Titel und Symbolen größer und nimmt insgesamt mehr Platz auf dem Bildschirm ein. Verwenden Sie dazu 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. Daher wird die Leiste minimiert, wenn der Nutzer durch den inneren Inhalt des Gerüts scrollt, und dann erweitert, wenn er bis 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

Verwende die zusammensetzbare Funktion BottomAppBar, um eine untere App-Leiste zu erstellen. Die Verwendung dieser zusammensetzbaren Funktion ähnelt den oberen zusammensetzbaren Funktionen der App-Leiste, die in den vorherigen Abschnitten auf dieser Seite beschrieben wurden. Sie übergeben zusammensetzbare Funktionen für die folgenden Schlüsselparameter:

• actions: Eine Reihe von Symbolen, die links in der Leiste angezeigt werden. Dies sind normalerweise entweder Schlüsselaktionen für den jeweiligen Bildschirm oder Navigationselemente.
• floatingActionButton: Die unverankerte Aktionsschaltfläche, die rechts in 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. Beispiel für die Implementierung 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 bei anderen Containern mit Inhalten füllen.

Zusätzliche Ressourcen

• Material3-Dokumente – Obere App-Leiste
• Material3-Dokumente – App-Leiste unten
• Gerüst