App-Leisten

App-Leisten sind Container, über die Nutzer auf wichtige Funktionen und Navigationselemente zugreifen können. Es gibt zwei Arten von App-Leisten: obere App-Leisten und untere App-Leisten. Ihr jeweiliges Aussehen und ihr Zweck sind wie folgt:

Eingeben	Darstellung	Zweck
Obere App-Leiste	Am oberen Bildschirmrand.	Bietet 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. Kann auch Zugriff auf andere wichtige Aktionen bieten, z. B. über eine enthaltene schwebende Aktionsschaltfläche.

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 TopAppBar und BottomAppBar zusammensetzbare Funktionen. So können Sie einheitliche Benutzeroberflächen erstellen, die Navigations- und Aktionssteuerungen umfassen und den Material Design-Prinzipien entsprechen.

Wichtig :App-Leisten werden in der Regel an die zusammensetzbare Funktion Scaffold übergeben, die Parameter, um sie zu empfangen. Weitere Informationen dazu, wie Sie mit Scaffold Ihre App ganz einfach strukturieren können, finden Sie auf der Scaffold-Seite.

Top-App-Leisten

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

Eingeben	Beispiel
Klein: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern.
Mittig ausgerichtet: Für Bildschirme mit einer einzelnen primären Aktion.
Mittel: Für Bildschirme, die eine moderate Navigation und Aktionen erfordern.
Groß: Für Bildschirme mit viel Navigation und Aktionen.

API-Oberfläche

Die verschiedenen Composeables, 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. Erscheint auf der links neben der App-Leiste.
• actions: Symbole, die dem Nutzer Zugriff auf wichtige Aktionen ermöglichen. Sie werden rechts neben der App-Leiste angezeigt.
• scrollBehavior: Bestimmt, wie die obere App-Leiste auf das Scrollen des 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 im Inhalt des jeweiligen Scaffolds scrollt. Erstellen Sie dazu eine Instanz von TopAppBarScrollBehavior und übergeben Sie ihn in der oberen App-Leiste für das scrollBehavior-Parameter.

Es gibt drei Arten von TopAppBarScrollBehavior. Diese sind:

• enterAlwaysScrollBehavior: Wenn der Nutzer den inneren Inhalt des Scaffolds maximiert, wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer den inneren Inhalt herauszieht.
• exitUntilCollapsedScrollBehavior: Ähnlich wie bei enterAlwaysScrollBehavior, wobei sich die App-Leiste zusätzlich maximiert, wenn der Nutzer das Ende des inneren Inhalts des Scaffolds erreicht.
• pinnedScrollBehavior: Die App-Leiste bleibt an Ort und Stelle und reagiert nicht auf Scrollen.

In den folgenden Beispielen werden einige 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

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

Im folgenden Beispiel wird TopAppBar kein Wert für scrollBehavior und reagiert daher nicht auf das Scrollen der inneren Inhalte.

@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 mittig ausgerichtete obere App-Leiste entspricht im Wesentlichen der kleinen App-Leiste, wobei der Titel jedoch in der Mitte der Komponente zentriert ist. Verwenden Sie zur Implementierung die Methode dedizierten zusammensetzbaren CenterAlignedTopAppBar-Element.

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 die inneren Inhalt des Scaffolds.

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

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

        topBar = {
            CenterAlignedTopAppBar(
                colors = TopAppBarDefaults.centerAlignedTopAppBarColors(
                    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

Bei der mittleren oberen App-Leiste wird der Titel unter zusätzlichen Symbolen platziert. Zum Erstellen verwenden Sie die zusammensetzbare Funktion MediumTopAppBar.

Wie beim vorherigen Snippet wird auch hier enterAlwaysScrollBehavior() verwendet, den Wert abrufen, 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:

Abbildung 4: Eine oben zentrierte App-Leiste.

Groß

Eine große obere App-Leiste ähnelt der mittleren, hat aber einen größeren Abstand zwischen dem Titel und den Symbolen und nimmt insgesamt mehr Platz auf dem Bildschirm ein. Verwenden Sie dazu das LargeTopAppBar-Element.

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 die der inneren Inhalt des Scaffolds, aber dann maximiert, wenn der Nutzer bis zum Ende den inneren Inhalt.

@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 das BottomAppBar-Element, um eine untere App-Leiste zu erstellen. Die Verwendung dieses Composeables ähnelt den Composeables für die obere App-Leiste, die in den vorherigen Abschnitten dieser Seite beschrieben wurden. Sie übergeben zusammensetzbare Funktionen für den folgenden Schlüssel Parameter:

• actions: Eine Reihe von Symbolen, die links in der Leiste angezeigt werden. Diese sind meist entweder Schlüsselaktionen für den jeweiligen Bildschirm oder Navigationselemente.
• floatingActionButton: Die unverankerte Aktionsschaltfläche, die auf dem auf der rechten Seite der Leiste.

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

Hinweis: Sie können BottomAppBar auch verwenden, ohne einen Wert für actions und floatingActionButton In diesem Fall können Sie eine benutzerdefinierte App-Leiste unten erstellen, wie bei anderen Containern, in denen BottomAppBar mit Inhalten gefüllt wird.

Weitere Informationen

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