Wie kann man eine Navigationsschublade für eine Android-App codieren?
German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)



Das Materialdesign-Team von Google definiert die Funktionalität einer Navigationsschublade in Android wie folgt:
Die Navigationsleiste wird von links eingeblendet und enthält die Navigationsziele für Ihre App.
Ein Beispiel für eine beliebte Android-App, die die Navigationsleiste implementiert, ist die Posteingangs-App von Google, die mithilfe einer Navigationsleiste zu verschiedenen Abschnitten der Anwendung navigiert. Sie können dies selbst überprüfen, indem Sie die Posteingangs-App aus dem Google Play Store herunterladen, sofern Sie sie noch nicht auf Ihrem Gerät haben. Der Screenshot unten zeigt den Posteingang mit geöffneter Navigationsschublade.



Der Benutzer kann die Navigationsleiste anzeigen, wenn er mit dem Finger vom linken Rand der Aktivität wischt. Sie können es auch über die Heimaktivität (die oberste Ebene der App) finden, indem Sie auf das App-Symbol (auch als "Hamburger" -Menü bezeichnet) in der Aktionsleiste tippen.
Beachten Sie, dass es empfohlen wird, eine Navigationsschublade zu verwenden, wenn Ihre App viele verschiedene Ziele (z. B. mehr als sechs) enthält.
In diesem Beitrag erfahren Sie, wie Sie Navigationselemente in einer Navigationsleiste in Android anzeigen. Wir werden erläutern, wie Sie die DrawerLayout
- und NavigationView
-API verwenden, um diese Aufgabe auszuführen. Als Bonus erfahren Sie auch, wie Sie die Android Studio-Vorlagenfunktion verwenden, um Ihr Projekt schnell mit einer Navigationsleiste zu booten.
Ein Beispielprojekt (in Kotlin) für dieses Tutorial finden Sie in unserem GitHub-Repo, sodass Sie es problemlos verfolgen können.
Voraussetzungen
Um diesem Tutorial folgen zu können, benötigen Sie:
- Android Studio 3.0 oder höher
- Kotlin Plugin 1.1.51 oder höher
1. Erstellen eines Android Studio-Projekts
Starten Sie Android Studio und erstellen Sie ein neues Projekt (Sie können es NavigationDrawerDemo
nennen) mit einer leeren Aktivität namens MainActivity
. Stellen Sie sicher, dass Sie auch das Kontrollkästchen Kotlin-Unterstützung einschließen aktivieren.



2. Hinzufügen des DrawerLayout und der Navigationsansicht
Um DrawerLayout
und NavigationView
in Ihrem Projekt verwenden zu können, müssen Sie die Designunterstützung und auch das Android-Unterstützungsartefakt importieren. Fügen Sie diese also zur build.gradle-Datei Ihres Moduls hinzu, um sie zu importieren.
dependencies { implementation 'com.android.support:design:27.0.2' implementation 'com.android.support:support-v4:27.0.2' }
Fügen Sie außerdem sowohl das DrawerLayout
-Widget als auch das NavigationView
-Widget in Ihre Datei res/layout/activlty_main.xml ein.
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:openDrawer="start"> <include layout="@layout/app_bar_main" android:layout_width="match_parent" android:layout_height="match_parent" /> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/nav_header_main" app:menu="@menu/activity_main_drawer" /> </android.support.v4.widget.DrawerLayout>
Hier haben wir ein DrawerLayout
-Widget mit der ID drawer_layout
erstellt. Die Eigenschaft tools:openDrawer
wird verwendet, um die Navigationsleiste anzuzeigen, wenn das XML-Layout in der Android Studio-Entwurfsansicht geöffnet ist.
In der offiziellen Dokumentation heißt es zu DrawerLayout
:
DrawerLayout
fungiert als Container der obersten Ebene für Fensterinhalte, mit dem interaktive "Schubladen" -Ansichten aus einem oder beiden vertikalen Fensterkanten herausgezogen werden können.
Nach dem Hinzufügen des DrawerLayout
-Widgets haben wir ein untergeordnetes Layout eingefügt, das auf @layout/app_bar_main
verweist.
Hier ist meine Ressourcendatei app_bar_main.xml. Diese Datei verfügt lediglich über ein CoordinatorLayout
, ein AppBarLayout
und ein Toolbar
-Widget.
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_main" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:layout_scrollFlags="scroll|enterAlways" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
Schließlich haben wir ein NavigationView
-Widget erstellt. In der offiziellen Dokumentation heißt es zu NavigationView
:
NavigationView
repräsentiert ein Standardnavigationsmenü für die Anwendung. Der Menüinhalt kann mit einer Menüressourcendatei gefüllt werden.
Im NavigationView XML
-Widget können Sie sehen, dass wir ein android:layout_gravity
-Attribut mit dem Wert start
hinzugefügt haben. Dies wird verwendet, um die Schublade zu positionieren. Sie möchten, dass die Schublade von links oder rechts herauskommt (Anfang oder Ende bei Plattformversionen, die die Layoutrichtung unterstützen). In unserem Fall kommt die Schublade von links heraus.
Wir haben auch ein app:headerLayout
-Attribut eingefügt, das auf @layout/nav_header_main
verweist. Dadurch wird eine View
als Kopfzeile des Navigationsmenüs hinzugefügt.
Hier ist meine Layout-Ressourcendatei nav_header_main.xml:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/nav_header" android:layout_width="match_parent" android:layout_height="160dp" android:background="@color/colorAccent" android:clickable="true" android:focusable="true" android:foreground="?attr/selectableItemBackgroundBorderless" android:gravity="bottom" android:orientation="vertical" android:padding="16dp" android:theme="@style/ThemeOverlay.AppCompat.Dark"> <ImageView android:id="@+id/nav_header_imageView" android:layout_width="64dp" android:layout_height="64dp" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/nav_header_textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="16dp" android:text="Chike Mgbemena" android:textAppearance="@style/TextAppearance.AppCompat.Body1" /> </LinearLayout>
Diese Layoutdatei verfügt lediglich über ein LinearLayout
, eine ImageView
und eine TextView
.



Um die Menüelemente für die Navigationsleiste einzuschließen, können Sie das Attribut app:menu
mit einem Wert verwenden, der auf eine Menüressourcendatei verweist.
<android.support.design.widget.NavigationView app:menu="@menu/activity_main_drawer" />
Hier ist die Menüressourcendatei res/menu/activity_main_drawer.xml:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group> <item android:id="@+id/nav_item_one" android:icon="@drawable/ic_drafts_black_24dp" android:title="Item 1" /> <item android:id="@+id/nav_item_two" android:icon="@drawable/ic_drafts_black_24dp" android:title="Item 2" /> <item android:id="@+id/nav_item_three" android:icon="@drawable/ic_drafts_black_24dp" android:title="Item 3" /> </group> <group android:id="@+id/group_menu"> <item android:id="@+id/nav_item_four" android:title="Item 4" /> <item android:id="@+id/nav_item_five" android:title="Item 5" /> </group> <item android:title="Title 1"> <menu> <item android:id="@+id/nav_item_six" android:icon="@drawable/ic_drafts_black_24dp" android:title="Item 6" /> <item android:id="@+id/nav_item_seven" android:icon="@drawable/ic_drafts_black_24dp" android:title="Item 7" /> </menu> </item> </menu>
Hier haben wir ein Menu
mit dem <menu>
definiert, das als Container für Menüelemente dient. Ein <item>
erstellt ein MenuItem
, das ein einzelnes Element in einem Menü darstellt.
Wir haben dann unsere erste Menügruppe mit der <group>
definiert. Eine <group>
dient als unsichtbarer Container für <item>
-Elemente - in unserem Fall für Menüelemente. Jedes der <item>
-Elemente hat eine ID, ein Symbol und einen Titel. Beachten Sie, dass am Ende jeder <group>
für uns eine horizontale Linie gezeichnet wird, wenn diese in der Navigationsleiste angezeigt wird.
Ein <item>
kann auch ein verschachteltes <menu>
-Element enthalten, um ein Untermenü zu erstellen - genau das haben wir in unserem letzten <item>
getan. Beachten Sie, dass dieses letzte <item>
eine title-Eigenschaft hat.
Beachten Sie, dass beim Anzeigen der Navigationslistenelemente aus einer Menüressource stattdessen eine ListView
verwendet werden kann. Durch die Konfiguration der Navigationsschublade mit einer Menüressource erhalten wir jedoch kostenlos das Materialdesign für die Navigationsschublade! Wenn Sie eine ListView
verwenden, müssen Sie die Liste pflegen und formatieren, um die empfohlenen Materialdesignspezifikationen für die Navigationsschublade zu erfüllen.
3. Initialisierung von Komponenten
Als Nächstes initialisieren wir Instanzen unseres DrawerLayout
und ActionBarDrawerToggle
. Die Initialisierung erfolgt in onCreate()
in MainActivity.kt.
import android.content.res.Configuration import android.os.Bundle import android.support.v4.widget.DrawerLayout import android.support.v7.app.ActionBarDrawerToggle import android.support.v7.app.AppCompatActivity import android.support.v7.widget.Toolbar import android.view.MenuItem class MainActivity : AppCompatActivity() { private lateinit var drawer: DrawerLayout private lateinit var toggle: ActionBarDrawerToggle override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val toolbar: Toolbar = findViewById(R.id.toolbar_main) setSupportActionBar(toolbar) drawer = findViewById(R.id.drawer_layout) toggle = ActionBarDrawerToggle(this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close) drawer.addDrawerListener(toggle) supportActionBar?.setDisplayHomeAsUpEnabled(true) supportActionBar?.setHomeButtonEnabled(true) } // ... }
Mit ActionBarDrawerToggle
wird das App-Symbol links neben der Aktionsleiste oder Symbolleiste eingerichtet, um die Navigationsleiste zu öffnen und zu schließen. Um eine Instanz von ActionBarDrawerToggle
erstellen zu können, müssen die folgenden Parameter angegeben werden:
- ein übergeordneter Kontext - beispielsweise verwenden Sie
this
in einerActivity
, während Sie in einemFragment
getActivity()
aufrufen. - Eine Instanz des
DrawerLayout
-Widgets zur Verknüpfung mit derActionBar
der Aktivität - Das Symbol, das über dem App-Symbol platziert werden soll, um anzuzeigen, dass ein Umschalter vorhanden ist
- die Zeichenfolgenressourcen für die Öffnungs- bzw. Schließvorgänge (für Barrierefreiheit)
Wir haben die Methode addDrawerListener()
für ein DrawerLayout
aufgerufen, um ein ActionBarDrawerToggle
mit einem DrawerLayout
zu verbinden.
Beachten Sie, dass wir das App-Symbol auch über setHomeButtonEnabled()
aktivieren und es für die Navigation über setDisplayHomeAsUpEnabled()
aktivieren.
Anschließend leiten wir die Aktivitätsrückrufmethoden onPostCreate()
, onConfigurationChanged()
und onOptionsItemSelected()
an den Umschalter weiter:
class MainActivity : AppCompatActivity() { // ... override fun onPostCreate(savedInstanceState: Bundle?) { super.onPostCreate(savedInstanceState) toggle.syncState() } override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) toggle.onConfigurationChanged(newConfig) } override fun onOptionsItemSelected(item: MenuItem?): Boolean { if (toggle.onOptionsItemSelected(item)) { return true } return super.onOptionsItemSelected(item) } }
Folgendes macht der syncState()
gemäß der offiziellen Dokumentation:
Synchronisiert den Status des Schubladenindikators / -angebots mit dem verknüpften DrawerLayout ... Dies sollte von deronPostCreate
-Methode IhrerActivity
aufgerufen werden, um nach der Wiederherstellung des Instanzstatus des DrawerLayout und zu jedem anderen Zeitpunkt, zu dem der Status möglicherweise so abgewichen ist, eine Synchronisierung durchzuführen dass der ActionBarDrawerToggle nicht benachrichtigt wurde. (Wenn Sie beispielsweise die Weiterleitung geeigneter Schubladenereignisse für einen bestimmten Zeitraum einstellen.)
4. Testen der App
An diesem Punkt können wir die App ausführen!



Wie Sie sehen können, wird beim Starten der App das Symbol für die Navigationsschublade „Hamburger“ in der Aktionsleiste angezeigt. Tippen Sie auf dieses App-Symbol, um die Schublade zu öffnen. Wenn Sie auf die Elemente der Navigationsleiste klicken, wird dies ebenfalls nichts bewirken. Wir werden diesen Teil im nächsten Abschnitt behandeln.
5. Behandlung von Klickereignissen
Lassen Sie uns nun sehen, wie Klickereignisse für jedes Element in der Navigationsleiste behandelt werden. Beachten Sie, dass Sie durch Klicken auf ein Element zu einer neuen Aktivität oder einem neuen Fragment gelangen sollen - deshalb wird es als Navigationsschublade bezeichnet!
Zunächst muss Ihre Aktivität den NavigationView.OnNavigationItemSelectedListener
implementieren.
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener { // ... }
Durch die Implementierung dieses Vertrags oder dieser Schnittstelle müssen wir jetzt die einzige Methode überschreiben: onNavigationItemSelected()
.
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener { // ... override fun onNavigationItemSelected(item: MenuItem): Boolean { when (item.itemId) { R.id.nav_item_one -> Toast.makeText(this, "Clicked item one", Toast.LENGTH_SHORT).show() R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).show() R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).show() R.id.nav_item_four -> Toast.makeText(this, "Clicked item four", Toast.LENGTH_SHORT).show() } return true } }
Diese Methode wird aufgerufen, wenn ein Element im Navigationsmenü ausgewählt wird. Wir haben den when
-Ausdruck verwendet, um verschiedene Aktionen basierend auf dem angeklickten Menüelement auszuführen. Die Menüelement-IDs dienen als Konstanten für den when
-Ausdruck.
Als nächstes müssen wir unsere NavigationView
initialisieren und diesen Listener in onCreate()
unserer Aktivität setzen.
class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener { // ... override fun onCreate(savedInstanceState: Bundle?) { // ... val navigationView: NavigationView = findViewById(R.id.nav_view) navigationView.setNavigationItemSelectedListener(this) // ... } // ...
Führen Sie das Projekt erneut aus!



Wenn Sie auf einige Elemente klicken, wird eine Toastnachricht angezeigt - genau das, was wir erwartet haben. Denken Sie jedoch daran, dass das Klicken auf ein Element den Benutzer zu einer neuen Aktivität oder einem neuen Fragment führen sollte (wir haben dies hier der Kürze halber ignoriert).
Sie werden feststellen, dass beim Klicken auf einen Artikel die Schublade weiterhin vorhanden ist. Es wäre besser, wenn es automatisch geschlossen würde, wenn auf ein Element geklickt wurde. Mal sehen, wie das geht.
override fun onNavigationItemSelected(item: MenuItem): Boolean { when (item.itemId) { R.id.nav_item_one -> Toast.makeText(this, "Clicked item one", Toast.LENGTH_SHORT).show() R.id.nav_item_two -> Toast.makeText(this, "Clicked item two", Toast.LENGTH_SHORT).show() R.id.nav_item_three -> Toast.makeText(this, "Clicked item three", Toast.LENGTH_SHORT).show() R.id.nav_item_four -> Toast.makeText(this, "Clicked item four", Toast.LENGTH_SHORT).show() } drawer.closeDrawer(GravityCompat.START) return true }
Um die Schublade zu schließen, nachdem auf einen Link geklickt wurde, rufen Sie einfach closeDrawer()
für eine Instanz von DrawerLayout
auf und übergeben Sie GravityCompat.START
an die Methode.
Führen Sie das Projekt noch einmal aus und sehen Sie das Ergebnis!
6. Umgang mit der zurückgedrückten Zurück-Taste
Wenn die Schublade geöffnet ist, ist es eine bessere Benutzererfahrung, die Heimaktivität nicht zu schließen, wenn die Zurück-Taste gedrückt wird. Auf diese Weise funktionieren beliebte Apps wie die Posteingangs-App von Google.
Wenn also die Schublade geöffnet und die Zurück-Taste gedrückt wird, schließen Sie die Schublade nur anstelle der aktuellen Heimaktivität. Wenn der Benutzer dann erneut die Zurück-Taste drückt, sollte die Heimaktivität geschlossen werden.
So können wir dies erreichen:
override fun onBackPressed() { if (drawer.isDrawerOpen(GravityCompat.START)) { drawer.closeDrawer(GravityCompat.START) } else { super.onBackPressed() } }
Führen Sie das Projekt erneut aus und testen Sie es!
7. Bonus: Verwenden von Android Studio-Vorlagen
Nachdem Sie sich mit den APIs vertraut gemacht haben, die zum Erstellen einer Navigationsschublade erforderlich sind, zeige ich Ihnen eine Verknüpfung, die es beim nächsten Mal schneller macht. Sie können einfach eine Vorlage verwenden, anstatt eine Navigationsschublade zu codieren. Aktivität von Grund auf neu.
Android Studio bietet Codevorlagen, die den Best Practices für Android-Design und -Entwicklung entsprechen. Mit diesen vorhandenen Codevorlagen (verfügbar in Java und Kotlin) können Sie Ihr Projekt schnell starten. Eine solche Vorlage kann zum Erstellen einer Navigationsschubladenaktivität verwendet werden.
Ich zeige Ihnen, wie Sie diese praktische Funktion in Android Studio verwenden.
Starten Sie für ein neues Projekt Android Studio.



Geben Sie den Anwendungsnamen ein und klicken Sie auf die Schaltfläche Weiter.
Sie können die Standardeinstellungen wie im Dialogfeld Android-Zielgeräte belassen. Klicken Sie erneut auf die Schaltfläche Weiter.



Scrollen Sie im Dialogfeld Aktivität zu Mobil hinzufügen nach unten und wählen Sie Navigationsschublade-Aktivität aus. Klicken Sie danach auf die Schaltfläche Weiter.



Im letzten Dialogfeld können Sie den Aktivitätsnamen, den Layoutnamen oder den Titel umbenennen, wenn Sie möchten. Klicken Sie abschließend auf die Schaltfläche Fertig stellen, um alle Konfigurationen zu akzeptieren.
Android Studio hat uns jetzt geholfen, ein Projekt mit einer Navigationsschubladenaktivität zu erstellen. Wirklich cool!
Es wird dringend empfohlen, den generierten Code zu untersuchen.
Sie können Vorlagen auch für ein bereits vorhandenes Android Studio-Projekt verwenden. Gehen Sie einfach zu Datei > Neu > Aktivität > Navigationsschublade-Aktivität.



Die in Android Studio enthaltenen Vorlagen eignen sich gut für einfache Layouts und zum Erstellen grundlegender Apps. Wenn Sie Ihre App jedoch noch weiter starten möchten, sollten Sie einige der im Envato Market verfügbaren App-Vorlagen in Betracht ziehen.
Sie sind eine enorme Zeitersparnis für erfahrene Entwickler und helfen ihnen, den Aufwand für die Erstellung einer App von Grund auf zu überwinden und ihre Talente stattdessen auf die einzigartigen und benutzerdefinierten Teile der Erstellung einer neuen App zu konzentrieren.
Schlussfolgerung
In diesem Tutorial haben Sie gelernt, wie Sie eine Navigationsschublade in Android mithilfe der DrawerLayout
- und NavigationView
-API von Grund auf neu erstellen. Wir haben auch untersucht, wie Sie mit den Android Studio-Vorlagen einfach und schnell eine Navigationsleiste erstellen können.
Ich empfehle dringend, die offiziellen Richtlinien für das Materialdesign von Navigationsschubladen zu lesen, um mehr darüber zu erfahren, wie Sie Navigationsschubladen in Android richtig entwerfen und verwenden.
Um mehr über das Codieren für Android zu erfahren, lesen Sie einige unserer anderen Kurse und Tutorials hier auf Envato Tuts+!
- Android SDKErstellen einer Musik-App mit einer Android-App-VorlageChike Mgbemena
- Android SDKVereinfachen der Entwicklung von Android-Apps mit AnkoAshraff Hathibelagal
- Android SDKErstellen einer Oberfläche mit Registerkarten für Materialdesign in einer Android-AppChike Mgbemena
- App-Vorlagen15 besten Android App Vorlagen von 2017Nona Blackman
- Android SDKProgrammieren einer Bildergalerie-Android-App mit GlideChike Mgbemena