App-Leisten

App-Leisten sind Container, die Nutzern Zugriff auf wichtige Funktionen und Navigationselemente ermöglichen. 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.

Ermöglicht den Zugriff auf wichtige Aufgaben und Informationen. Enthält in der Regel einen Titel, wichtige Aktionselemente und bestimmte Navigationselemente.

Untere App-Leiste

Am unteren Bildschirmrand.

Enthält in der Regel wichtige Navigationselemente. Kann auch Zugriff auf andere wichtige Aktionen ermöglichen, z. B. über eine enthaltene unverankerte Aktionsschaltfläche.
Beispiel für eine obere und untere App-Leiste
Abbildung 1. Eine obere App-Leiste (links) und eine untere App-Leiste (rechts).

Verwenden Sie die TopAppBar und BottomAppBar zusammensetzbaren Funktionen, um eine obere bzw. untere App-Leiste zu implementieren. So können Sie einheitliche Oberflächen erstellen, die Navigations- und Aktionssteuerelemente enthalten und mit den Material Design-Prinzipien übereinstimmen.

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 viele Navigationselemente oder Aktionen erfordern.

 Kleine obere App-Leiste

Zentriert: Für Bildschirme mit einer einzigen primären Aktion.

 Zentrierte obere App-Leiste

Mittel: Für Bildschirme, die eine moderate Anzahl von Navigationselementen und Aktionen erfordern.

 Mittlere obere App-Leiste

Groß: Für Bildschirme, die viele Navigationselemente und Aktionen erfordern.

 Große obere App-Leiste

API-Oberfläche

Die verschiedenen zusammensetzbaren Funktionen, mit denen Sie die vier verschiedenen oberen App-Leisten implementieren können, sind sehr ähnlich. Sie haben mehrere gemeinsame Parameter:

  • 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 Nutzern Zugriff auf wichtige Aktionen ermöglichen. Sie werden rechts in der App-Leiste angezeigt.
  • scrollBehavior: Bestimmt, wie die obere App-Leiste auf das Scrollen der inneren Inhalte des Gerüsts reagiert.
  • colors: Bestimmt, wie die App-Leiste angezeigt wird.

Scrollverhalten

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

Es gibt drei Arten von TopAppBarScrollBehavior: Sie sind wie folgt:

  • enterAlwaysScrollBehavior: Wenn der Nutzer die inneren Inhalte des Gerüsts nach oben zieht, wird die obere App-Leiste minimiert. Die App-Leiste wird maximiert, wenn der Nutzer die inneren Inhalte nach unten zieht.
  • exitUntilCollapsedScrollBehavior: Ähnlich wie enterAlwaysScrollBehavior, aber die App-Leiste wird nur maximiert, wenn der Nutzer die Inhalte ganz nach unten zieht.
  • pinnedScrollBehavior: Die App-Leiste bleibt an Ort und Stelle und reagiert nicht auf das 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

Verwenden Sie die TopAppBar zusammensetzbare Funktion, 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 für TopAppBar kein Wert für scrollBehavior übergeben. Daher reagiert sie 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:

Beispiel für eine kleine obere App-Leiste
Abbildung 2 Eine kleine obere App-Leiste.

Zentriert

Die zentrierte obere App-Leiste ist im Wesentlichen dieselbe wie die kleine App-Leiste, aber der Titel ist in der Komponente zentriert. Verwenden Sie die spezielle CenterAlignedTopAppBar zusammensetzbare Funktion, um sie zu implementieren.

In diesem Beispiel wird enterAlwaysScrollBehavior() verwendet, um den Wert für scrollBehavior abzurufen. Daher wird die Leiste minimiert, wenn der Nutzer die inneren Inhalte 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:

Beispiel für eine zentriert ausgerichtete obere App-Leiste
Abbildung 3 Eine zentrierte obere App-Leiste.

Medium

Bei der mittleren oberen App-Leiste wird der Titel unter allen zusätzlichen Symbolen platziert. Verwenden Sie die MediumTopAppBar zusammensetzbare Funktion, um eine zu erstellen.

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

@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. Außerdem wird gezeigt, wie das Scrollverhalten von enterAlwaysScrollBehavior() aussieht:

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

Groß

Eine große obere App-Leiste ähnelt der mittleren, aber der Abstand zwischen dem Titel und den Symbolen ist größer und sie nimmt insgesamt mehr Platz auf dem Bildschirm ein. Verwenden Sie die LargeTopAppBar zusammensetzbare Funktion, um eine zu erstellen.

Im Gegensatz zu den vorherigen Code-Snippets wird in diesem Beispiel exitUntilCollapsedScrollBehavior() verwendet, um den Wert für scrollBehavior zu übergeben. Daher wird die Leiste minimiert, wenn der Nutzer die inneren Inhalte des Gerüsts scrollt, aber dann maximiert, wenn er zum Ende der inneren Inhalte 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:

Ein Bildschirm in einer App mit einer unteren App-Leiste, die auf der linken Seite Aktionssymbole und auf der rechten Seite eine unverankerte Aktionsschaltfläche (UAS) enthält.
Abbildung 5 Eine Beispielimplementierung einer großen oberen App-Leiste.

Untere App-Leiste

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

  • actions: Eine Reihe von Symbolen, die auf der linken Seite der Leiste angezeigt werden. Dabei handelt es sich in der Regel entweder um wichtige Aktionen für den jeweiligen Bildschirm oder um Navigationselemente.
  • floatingActionButton: Die unverankerte Aktionsschaltfläche, die 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:

Ein Bildschirm in einer App mit einer unteren App-Leiste, die auf der linken Seite Aktionssymbole und auf der rechten Seite eine unverankerte Aktionsschaltfläche (UAS) enthält.
Abbildung 6 Eine Beispielimplementierung einer unteren App-Leiste.

Zusätzliche Ressourcen