Wie kann man eine Navigationsschublade für eine Android-App codieren?

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Final product image — What You'll Be Creating

Das Materialdesign-Team von Google definiert die Funktionalität einer Navigationsschublade in Android wie folgt:

Die Navigationsleiste wird von links eingeblendet und enthält die Navigationsziele für Ihre App.

Ein Beispiel fü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 können dies selbst überprüfen, indem Sie die Posteingangs-App aus dem Google Play Store herunterladen, sofern Sie sie noch nicht auf Ihrem Gerät haben. Der Screenshot unten zeigt den Posteingang mit geöffneter Navigationsschublade.

Der Benutzer kann die Navigationsleiste anzeigen, wenn er mit dem Finger vom linken Rand der Aktivität wischt. Sie können es auch über die Heimaktivität (die oberste Ebene der App) finden, indem Sie auf das App-Symbol (auch als "Hamburger" -Menü 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) enthält.

In diesem Beitrag erfahren Sie, wie Sie Navigationselemente in einer Navigationsleiste in Android anzeigen. Wir werden erläutern, wie Sie die DrawerLayout- und NavigationView-API verwenden, um diese Aufgabe auszufü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) für dieses Tutorial finden Sie in unserem GitHub-Repo, sodass Sie es problemlos verfolgen können.

Voraussetzungen

Um diesem Tutorial folgen zu können, benötigen Sie:

Android Studio 3.0 oder höher
Kotlin Plugin 1.1.51 oder höher

1. Erstellen eines Android Studio-Projekts

Starten Sie Android Studio und erstellen Sie ein neues Projekt (Sie können es NavigationDrawerDemo nennen) mit einer leeren Aktivität namens MainActivity. Stellen Sie sicher, dass Sie auch das Kontrollkästchen Kotlin-Unterstützung einschließen aktivieren.

2. Hinzufügen des DrawerLayout und der Navigationsansicht

Um DrawerLayout und NavigationView in Ihrem Projekt verwenden zu können, müssen Sie die Designunterstützung und auch das Android-Unterstützungsartefakt importieren. Fü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'
}

Fü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 geöffnet ist.

In der offiziellen Dokumentation heißt es zu DrawerLayout:

DrawerLayout fungiert als Container der obersten Ebene für Fensterinhalte, mit dem interaktive "Schubladen" -Ansichten aus einem oder beiden vertikalen Fensterkanten herausgezogen werden können.

Nach dem Hinzufügen des DrawerLayout-Widgets haben wir ein untergeordnetes Layout eingefügt, das auf @layout/app_bar_main verweist.

Hier ist meine Ressourcendatei app_bar_main.xml. Diese Datei verfügt lediglich ü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 repräsentiert ein Standardnavigationsmenü für die Anwendung. Der Menüinhalt kann mit einer Menüressourcendatei gefüllt werden.

Im NavigationView XML-Widget können Sie sehen, dass wir ein android:layout_gravity-Attribut mit dem Wert start hinzugefügt haben. Dies wird verwendet, um die Schublade zu positionieren. Sie möchten, dass die Schublade von links oder rechts herauskommt (Anfang oder Ende bei Plattformversionen, die die Layoutrichtung unterstützen). In unserem Fall kommt die Schublade von links heraus.

Wir haben auch ein app:headerLayout-Attribut eingefügt, das auf @layout/nav_header_main verweist. Dadurch wird eine View als Kopfzeile des Navigationsmenüs hinzugefü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 verfügt lediglich über ein LinearLayout, eine ImageView und eine TextView.

Um die Menüelemente für die Navigationsleiste einzuschließen, können Sie das Attribut app:menu mit einem Wert verwenden, der auf eine Menüressourcendatei verweist.

<android.support.design.widget.NavigationView
        app:menu="@menu/activity_main_drawer" />

Hier ist die Menü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 für Menüelemente dient. Ein <item> erstellt ein MenuItem, das ein einzelnes Element in einem Menü darstellt.

Wir haben dann unsere erste Menügruppe mit der <group> definiert. Eine <group> dient als unsichtbarer Container für <item>-Elemente - in unserem Fall für Menüelemente. Jedes der <item>-Elemente hat eine ID, ein Symbol und einen Titel. Beachten Sie, dass am Ende jeder <group> fü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 Untermenü 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 Menüressource stattdessen eine ListView verwendet werden kann. Durch die Konfiguration der Navigationsschublade mit einer Menüressource erhalten wir jedoch kostenlos das Materialdesign für die Navigationsschublade! Wenn Sie eine ListView verwenden, müssen Sie die Liste pflegen und formatieren, um die empfohlenen Materialdesignspezifikationen für die Navigationsschublade zu erfüllen.

3. Initialisierung von Komponenten

Als Nä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 öffnen und zu schließen. Um eine Instanz von ActionBarDrawerToggle erstellen zu können, müssen die folgenden Parameter angegeben werden:

ein übergeordneter Kontext - beispielsweise verwenden Sie this in einer Activity, während Sie in einem Fragment getActivity() aufrufen.
Eine Instanz des DrawerLayout-Widgets zur Verknüpfung mit der ActionBar der Aktivität
Das Symbol, das über dem App-Symbol platziert werden soll, um anzuzeigen, dass ein Umschalter vorhanden ist
die Zeichenfolgenressourcen für die Öffnungs- bzw. Schließvorgänge (für Barrierefreiheit)

Wir haben die Methode addDrawerListener() für ein DrawerLayout aufgerufen, um ein ActionBarDrawerToggle mit einem DrawerLayout zu verbinden.

Beachten Sie, dass wir das App-Symbol auch über setHomeButtonEnabled() aktivieren und es für die Navigation über setDisplayHomeAsUpEnabled() aktivieren.

Anschließend leiten wir die Aktivitätsrü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() gemäß der offiziellen Dokumentation:

Synchronisiert den Status des Schubladenindikators / -angebots mit dem verknüpften DrawerLayout ... Dies sollte von der onPostCreate-Methode Ihrer Activity aufgerufen werden, um nach der Wiederherstellung des Instanzstatus des DrawerLayout und zu jedem anderen Zeitpunkt, zu dem der Status möglicherweise so abgewichen ist, eine Synchronisierung durchzuführen dass der ActionBarDrawerToggle nicht benachrichtigt wurde. (Wenn Sie beispielsweise die Weiterleitung geeigneter Schubladenereignisse für einen bestimmten Zeitraum einstellen.)

4. Testen der App

An diesem Punkt können wir die App ausführen!

Wie Sie sehen können, wird beim Starten der App das Symbol für die Navigationsschublade „Hamburger“ in der Aktionsleiste angezeigt. Tippen Sie auf dieses App-Symbol, um die Schublade zu öffnen. Wenn Sie auf die Elemente der Navigationsleiste klicken, wird dies ebenfalls nichts bewirken. Wir werden diesen Teil im nächsten Abschnitt behandeln.

5. Behandlung von Klickereignissen

Lassen Sie uns nun sehen, wie Klickereignisse für jedes Element in der Navigationsleiste behandelt werden. Beachten Sie, dass Sie durch Klicken auf ein Element zu einer neuen Aktivität oder einem neuen Fragment gelangen sollen - deshalb wird es als Navigationsschublade bezeichnet!

Zunächst muss Ihre Aktivität den NavigationView.OnNavigationItemSelectedListener implementieren.

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    // ... 
}

Durch die Implementierung dieses Vertrags oder dieser Schnittstelle müssen wir jetzt die einzige Methode ü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 Navigationsmenü ausgewählt wird. Wir haben den when-Ausdruck verwendet, um verschiedene Aktionen basierend auf dem angeklickten Menüelement auszuführen. Die Menüelement-IDs dienen als Konstanten für den when-Ausdruck.

Als nächstes müssen wir unsere NavigationView initialisieren und diesen Listener in onCreate() unserer Aktivität setzen.

class MainActivity : AppCompatActivity(), NavigationView.OnNavigationItemSelectedListener {
    // ...
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        val navigationView: NavigationView = findViewById(R.id.nav_view)
        navigationView.setNavigationItemSelectedListener(this)
        // ... 
    }
// ...

Führen Sie das Projekt erneut aus!

App demo with navigation item clicks configuration

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 Aktivität oder einem neuen Fragment führen sollte (wir haben dies hier der Kürze halber ignoriert).

Sie werden feststellen, dass beim Klicken auf einen Artikel die Schublade weiterhin vorhanden ist. Es wäre besser, wenn es automatisch geschlossen wü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() für eine Instanz von DrawerLayout auf und übergeben Sie GravityCompat.START an die Methode.

Führen Sie das Projekt noch einmal aus und sehen Sie das Ergebnis!

6. Umgang mit der zurückgedrückten Zurück-Taste

Wenn die Schublade geöffnet ist, ist es eine bessere Benutzererfahrung, die Heimaktivität nicht zu schließen, wenn die Zurück-Taste gedrückt wird. Auf diese Weise funktionieren beliebte Apps wie die Posteingangs-App von Google.

Wenn also die Schublade geöffnet und die Zurück-Taste gedrückt wird, schließen Sie die Schublade nur anstelle der aktuellen Heimaktivität. Wenn der Benutzer dann erneut die Zurück-Taste drückt, sollte die Heimaktivität geschlossen werden.

So können wir dies erreichen:

override fun onBackPressed() {
    if (drawer.isDrawerOpen(GravityCompat.START)) {
        drawer.closeDrawer(GravityCompat.START)
    } else {
        super.onBackPressed()
    }
}

Fü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 Verknüpfung, die es beim nächsten Mal schneller macht. Sie können einfach eine Vorlage verwenden, anstatt eine Navigationsschublade zu codieren. Aktivität von Grund auf neu.

Android Studio bietet Codevorlagen, die den Best Practices für Android-Design und -Entwicklung entsprechen. Mit diesen vorhandenen Codevorlagen (verfügbar in Java und Kotlin) können Sie Ihr Projekt schnell starten. Eine solche Vorlage kann zum Erstellen einer Navigationsschubladenaktivität verwendet werden.

Ich zeige Ihnen, wie Sie diese praktische Funktion in Android Studio verwenden.

Starten Sie für ein neues Projekt Android Studio.

Geben Sie den Anwendungsnamen ein und klicken Sie auf die Schaltfläche Weiter.

Sie können die Standardeinstellungen wie im Dialogfeld Android-Zielgeräte belassen. Klicken Sie erneut auf die Schaltfläche Weiter.

Scrollen Sie im Dialogfeld Aktivität zu Mobil hinzufügen nach unten und wählen Sie Navigationsschublade-Aktivität aus. Klicken Sie danach auf die Schaltfläche Weiter.

Im letzten Dialogfeld können Sie den Aktivitätsnamen, den Layoutnamen oder den Titel umbenennen, wenn Sie möchten. Klicken Sie abschließend auf die Schaltfläche Fertig stellen, um alle Konfigurationen zu akzeptieren.

Android Studio hat uns jetzt geholfen, ein Projekt mit einer Navigationsschubladenaktivität zu erstellen. Wirklich cool!

Es wird dringend empfohlen, den generierten Code zu untersuchen.

Sie können Vorlagen auch für ein bereits vorhandenes Android Studio-Projekt verwenden. Gehen Sie einfach zu Datei > Neu > Aktivität > Navigationsschublade-Aktivität.

Navigation from file menu too Navigation Drawer Activity

Die in Android Studio enthaltenen Vorlagen eignen sich gut für einfache Layouts und zum Erstellen grundlegender Apps. Wenn Sie Ihre App jedoch noch weiter starten möchten, sollten Sie einige der im Envato Market verfügbaren App-Vorlagen in Betracht ziehen.

Sie sind eine enorme Zeitersparnis für erfahrene Entwickler und helfen ihnen, den Aufwand für die Erstellung einer App von Grund auf zu ü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 können.

Ich empfehle dringend, die offiziellen Richtlinien für das Materialdesign von Navigationsschubladen zu lesen, um mehr darüber zu erfahren, wie Sie Navigationsschubladen in Android richtig entwerfen und verwenden.

Um mehr über das Codieren für Android zu erfahren, lesen Sie einige unserer anderen Kurse und Tutorials hier auf Envato Tuts+!