Ein ausblendbares Menü mit der Komponente „Navigationsleiste“ erstellen

Die Komponente Navigationsleiste ist ein ausziehbares Menü, mit dem Nutzer verschiedene Bereiche Ihrer App aufrufen können. Sie wird aktiviert, indem Nutzer von der Seite wischen oder auf ein Menüsymbol tippen.

Hier sind drei Anwendungsfälle für die Implementierung einer Navigationsleiste:

  • Inhaltsorganisation:Ermöglichen Sie Nutzern, zwischen verschiedenen Kategorien zu wechseln, z. B. in Nachrichten- oder Blogging-Apps.
  • Kontoverwaltung:In Apps mit Nutzerkonten müssen Schnelllinks zu Kontoeinstellungen und Profilbereichen vorhanden sein.
  • Funktionssuche:Ordnen Sie mehrere Funktionen und Einstellungen in einem einzigen Menü an, um Nutzern die Suche und den Zugriff in komplexen Apps zu erleichtern.

Im Material Design gibt es zwei Arten von Navigationsleisten:

  • Standard:Der Bereich auf dem Bildschirm wird mit anderen Inhalten geteilt.
  • Modal:Wird über anderen Inhalten auf einem Bildschirm angezeigt.

Versionskompatibilität

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

Abhängigkeiten

Navigationsleiste implementieren

Mit dem ModalNavigationDrawer-Komponent können Sie eine Navigationsleiste implementieren:

Wichtige Fakten

  • Verwenden Sie den drawerContent-Slot, um ein ModalDrawerSheet und den Inhalt des Auszugs anzugeben.

  • Für ModalNavigationDrawer sind eine Reihe zusätzlicher Parameter für die Seitenleiste zulässig. Mit dem Parameter gesturesEnabled können Sie beispielsweise festlegen, ob die Schublade auf Ziehen reagiert oder nicht, wie im folgenden Beispiel:

Verhalten der Navigationsleiste steuern

Mit DrawerState können Sie festlegen, wie die Schublade geöffnet und geschlossen wird:

Wichtige Fakten

  • Übergeben Sie mit dem Parameter drawerState eine DrawerState an ModalNavigationDrawer.
  • DrawerState bietet Zugriff auf die Funktionen open und close sowie auf Eigenschaften, die sich auf den aktuellen Schiebereglerstatus beziehen. Für diese Funktionen ist ein CoroutineScope erforderlich, das Sie mit rememberCoroutineScope instanziieren können. Sie können die Funktionen zum Pausieren auch als Reaktion auf UI-Ereignisse aufrufen.

Ergebnisse

Abbildung 1. Eine Standardnavigationsleiste (links) und eine modale Navigationsleiste (rechts).

Sammlungen, die diesen Leitfaden enthalten

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

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