Obere App-Leiste anzeigen

Erstellen Sie mit dem TopAppBar-Element eine App-Leiste oben, um Nutzern die Navigation und den Zugriff auf Funktionen in Ihrer App zu erleichtern.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Composeable für die obere App-Leiste erstellen

Erstellen Sie mit dem MediumTopAppBar-Komponent eine obere App-Leiste, die minimiert wird, wenn der Nutzer im Inhaltsbereich nach unten scrollt, und maximiert wird, wenn der Nutzer zum Anfang des Inhalts scrollt:

Wichtige Punkte zum Code

  • Ein äußeres Scaffold mit einem TopBar
  • Ein Titel, der aus einem einzelnen Text-Element besteht.
  • Eine obere Leiste mit einer einzelnen Aktion
  • Eine IconButton-Aktion mit einem onClick-Lambda zur Ausführung der Aktion.
  • Eine IconButton mit einer Icon, die ein Symbolbild und einen Text zur Inhaltsbeschreibung enthält.
  • Das Scrollverhalten für den inneren Inhalt des Scaffolds ist als enterAlwaysScrollBehavior() definiert. Dadurch wird die App-Leiste minimiert, wenn der Nutzer den inneren Inhalt nach oben zieht, und maximiert, wenn er ihn nach unten zieht.
  • Zusätzlich zu MediumTopBar, das den Titel enthält, können Sie auch Folgendes verwenden:
    • TopAppBar: Für Bildschirme, die nicht viel Navigation oder Aktionen erfordern.
    • CenterAlignedTopAppBar: Verwenden Sie diese Option für Bildschirme mit einer einzigen primären Aktion.Der Titel wird in der Mitte der Komponente zentriert.
    • MediumTopAppBar: Für Bildschirme mit mäßiger Navigation und Aktionen.
    • LargeTopAppBar: Verwenden Sie diese Option für Bildschirme, auf denen viel Navigation und viele Aktionen erforderlich sind. Verwendet mehr Abstand als MediumTopAppBar und platziert den Titel unter zusätzlichen Symbolen.

Ergebnisse

Abbildung 1: Eine mittlere App-Leiste oben.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden ausgewählten Sammlungen von Kurzanleitungen, die allgemeinere Ziele der Android-Entwicklung abdecken:

Informationen zum Erstellen komplexer Benutzeroberflächen mit einer standardisierten Plattform Das Scaffolding hält die verschiedenen Teile der Benutzeroberfläche zusammen und verleiht Apps ein einheitliches Erscheinungsbild.
Sammlung von Kurzanleitungen
Hier erfahren Sie, wie Sie mit kombinierbaren Funktionen ganz einfach ansprechende UI-Komponenten auf der Grundlage des Material Design-Designsystems erstellen können.
Sammlung von Kurzanleitungen

Hast du Fragen oder Feedback?

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich auch gern an uns wenden.
Zu den FAQs Feedback geben