So codieren Sie eine untere Navigationsleiste für eine Android-App

() translation by (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 der unteren Navigationsleisten in Android wie folgt:

Die unteren Navigationsleisten erleichtern das Erkunden und Wechseln zwischen den Ansichten der obersten Ebene mit einem einzigen Fingertipp.

Durch Tippen auf ein unteres Navigationssymbol gelangen Sie direkt zur zugehörigen Ansicht oder aktualisieren die aktuell aktive Ansicht.

Gemäß den offiziellen Materialdesign-Richtlinien für die untere Navigationsleiste sollte diese verwendet werden, wenn Ihre App über Folgendes verfügt:

drei bis fünf Top-Level-Destinationen
Ziele, die einen direkten Zugang erfordern

Ein Beispiel für eine beliebte App, die die untere Navigationsleiste implementiert, ist die Google+ Android App von Google, die damit zu verschiedenen Zielen der App navigiert. Sie können dies selbst sehen, indem Sie die Google+ App aus dem Google Play Store herunterladen (falls Sie sie noch nicht auf Ihrem Gerät haben). Der folgende Screenshot stammt aus der Google+ App und zeigt eine untere Navigationsleiste an.

In diesem Beitrag erfahren Sie, wie Sie Menüelemente in einer unteren Navigationsleiste in Android anzeigen. Wir verwenden die BottomNavigationView-API, um die Aufgabe auszuführen. Als zusätzlichen Bonus erfahren Sie auch, wie Sie die Android Studio-Vorlagenfunktion verwenden, um Ihr Projekt mit einer unteren Navigationsleiste schnell zu booten.

Ein Beispielprojekt (in Kotlin) für dieses Tutorial finden Sie in unserem GitHub-Repository, damit Sie es leicht 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 Sie ein Android Studio-Projekt

Starten Sie Android Studio und erstellen Sie ein neues Projekt (Sie können es BottomNavigationDemo 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 der BottomNavigationView

Um BottomNavigationView in Ihrem Projekt zu verwenden, müssen Sie die Designunterstützung und auch das Android-Unterstützungsartefakt importieren. Fügen Sie diese der Datei build.gradle Ihres Moduls hinzu, um sie zu importieren.

1	dependencies {
2	implementation 'com.android.support:design:27.0.2'
3	}

Besuchen Sie auch Ihre Datei res/layout/activlty_main.xml, um das BottomNavigationView-Widget einzuschließen. Diese Layoutdatei enthält auch ein ConstraintLayout und ein FrameLayout. Beachten Sie, dass das FrameLayout als Container oder Platzhalter für die verschiedenen Fragmente dient, die darauf platziert werden, wenn auf ein Menüelement in der unteren Navigationsleiste geklickt wird. (Dazu kommen wir gleich.)

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.chikeandroid.bottomnavigationdemo.MainActivity">

    <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            android:background="?android:attr/windowBackground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorPrimary"
            app:itemIconTint="@color/white"
            app:itemTextColor="@color/white"
            app:menu="@menu/navigation"/>

</android.support.constraint.ConstraintLayout>

Hier haben wir ein BottomNavigationView-Widget mit der ID navigationView erstellt. In der offiziellen Dokumentation heißt es:

BottomNavigationView stellt eine standardmäßige untere Navigationsleiste für die Anwendung dar. Es ist eine Implementierung der unteren Navigation des Materialdesigns.

Die unteren Navigationsleisten erleichtern es Benutzern, mit einem einzigen Fingertipp zwischen den Ansichten der obersten Ebene zu navigieren und zwischen ihnen zu wechseln. Es sollte verwendet werden, wenn die Anwendung drei bis fünf Ziele auf oberster Ebene hat.

Die wichtigen Attribute, die Sie beachten sollten, die unserer BottomNavigationView hinzugefügt wurden, sind:

app:itemBackground: Dieses Attribut setzt den Hintergrund unserer Menüpunkte auf die angegebene Ressource. In unserem Fall haben wir ihm nur eine Hintergrundfarbe gegeben.
app:itemIconTint: legt den Farbton fest, der auf die Icons unserer Menüpunkte angewendet wird.
app:itemTextColor: legt die Farben fest, die für die verschiedenen Zustände (normal, ausgewählt, fokussiert usw.) des Menüeintragstexts verwendet werden sollen.

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

1	<android.support.design.widget.BottomNavigationView
2	app:menu="@menu/navigation"/>

Hier ist die Menüressourcendatei res/menu/navigation.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
            android:id="@+id/navigation_songs"
            android:icon="@drawable/ic_music_note"
            android:title="Songs"/>

    <item
            android:id="@+id/navigation_albums"
            android:icon="@drawable/ic_album"
            android:title="Albums"/>

    <item
            android:id="@+id/navigation_artists"
            android:icon="@drawable/ic_person"
            android:title="Artists"/>

</menu>

Hier haben wir ein Menu mit dem <menu> definiert, das als Container für Menüpunkte dient. Ein <item> erstellt ein MenuItem, das ein einzelnes Element in einem Menü darstellt. Wie Sie sehen, hat jedes <item> eine ID, ein Symbol und einen Titel.

3. Initialisierung von Komponenten

Als Nächstes initialisieren wir eine Instanz von BottomNavigationView. Die Initialisierung erfolgt in onCreate() in MainActivity.kt.

import android.os.Bundle
import android.support.design.widget.BottomNavigationView
import android.support.v7.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    lateinit var toolbar: ActionBar

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        toolbar = supportActionBar!!
        val bottomNavigation: BottomNavigationView = findViewById(R.id.navigationView)
    }
}

4. Testen der App

Jetzt können wir die App ausführen!

First demo app showing bottom navigation

Wie Sie sehen können, wird unsere untere Navigationsleiste am unteren Rand des App-Bildschirms angezeigt. Wenn Sie dort auf eines der Navigationselemente klicken, passiert nichts – wir werden diesen Teil im nächsten Abschnitt behandeln.

5. Konfigurieren von Klickereignissen

Sehen wir uns nun an, wie Sie Klickereignisse für jedes der Elemente in der unteren Navigationsleiste konfigurieren. Denken Sie daran, dass das Klicken auf ein Element darin den Benutzer zu einem neuen Ziel in der App führen sollte.

// ...
    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_songs -> {
                
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_albums -> {
             
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_artists -> {
                
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }
    
    override fun onCreate(savedInstanceState: Bundle?) {
        // ... 
        bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
// ...     

Hier haben wir die Methode setOnNavigationItemSelectedListener aufgerufen. Hier ist, was es laut der offiziellen Dokumentation tut:

Legen Sie einen Listener fest, der benachrichtigt wird, wenn ein unteres Navigationselement ausgewählt wird.

Wir haben den when-Ausdruck verwendet, um basierend auf dem angeklickten Menüelement verschiedene Aktionen auszuführen – die Menüelement-IDs dienen als Konstanten für den when-Ausdruck. Am Ende jeder when-Verzweigung geben wir true zurück.

Anschließend übergeben wir unseren mOnNavigationItemSelectedListener-Listener als Argument an setOnNavigationItemSelectedListener().

Beachten Sie, dass es eine weitere ähnliche Methode namens setOnNavigationItemReselectedListener gibt, die benachrichtigt wird, wenn das aktuell ausgewählte untere Navigationselement erneut ausgewählt wird.

Als Nächstes erstellen wir die verschiedenen Seiten (oder Fragmente) für jedes der Menüelemente in der Navigationsleiste, sodass beim Klicken oder Tippen auf ein Menüelement ein anderes Android-Fragment oder eine andere Seite angezeigt wird.

6. Erstellen der Fragmente (Seiten)

Wir beginnen mit der SongsFragment.kt-Klasse, und Sie sollten für die verbleibenden zwei Fragmentklassen – AlbumsFragment.kt und ArtistsFragment.kt – ähnlich vorgehen.

Hier ist mein SongsFragment.kt:

import android.os.Bundle
import android.support.v4.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup

class SongsFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? =
            inflater.inflate(R.layout.fragment_songs, container, false)

    companion object {
        fun newInstance(): SongsFragment = SongsFragment()
    }
}

Hier ist auch mein R.layout.fragment_songs:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:orientation="vertical">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Songs"
            android:gravity="center_vertical|center_horizontal"/>

</LinearLayout>

7. Starten der Fragmente

Wenn auf einen der Menüpunkte geklickt wird, öffnen wir das entsprechende Fragment und ändern auch den Titel der Aktionsleiste.

private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
    when (item.itemId) {
        R.id.navigation_songs -> {
            toolbar.title = "Songs"
            val songsFragment = SongsFragment.newInstance()
            openFragment(songsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_albums -> {
            toolbar.title = "Albums"
            val albumsFragment = AlbumsFragment.newInstance()
            openFragment(albumsFragment)
            return@OnNavigationItemSelectedListener true
        }
        R.id.navigation_artists -> {
            toolbar.title = "Artists"
            val artistsFragment = ArtistsFragment.newInstance()
            openFragment(artistsFragment)
            return@OnNavigationItemSelectedListener true
        }
    }
    false
}

private fun openFragment(fragment: Fragment) {
    val transaction = supportFragmentManager.beginTransaction()
    transaction.replace(R.id.container, fragment)
    transaction.addToBackStack(null)
    transaction.commit()
}

Hier verwenden wir eine Methode namens openFragment(), die einfach die FragmentTransaction verwendet, um unser Fragment zur Benutzeroberfläche hinzuzufügen.

Führen Sie nun das Projekt erneut aus, um zu sehen, wie alles funktioniert!

Jedes Mal, wenn Sie auf ein Menüelement klicken, wird der Benutzer zu einem neuen Fragment weitergeleitet.

Beachten Sie, dass bei mehr als vier Menüpunkten in der unteren Navigationsleiste – d. h. in BottomNavigationView – dann aktiviert das Android-System automatisch den Shift-Modus. Wenn in diesem Modus auf eines der Menüelemente geklickt wird, werden die anderen Elemente rechts oder links des angeklickten Elements verschoben.

8. Bonus: Verwenden von Android Studio-Vorlagen

Nachdem Sie nun die erforderlichen APIs kennengelernt haben, um eine untere Navigationsleiste in Android von Grund auf neu zu erstellen, zeige ich Ihnen eine Verknüpfung, die es beim nächsten Mal schneller macht. Sie können einfach eine Vorlage verwenden, anstatt eine Navigationsleiste von Grund auf neu zu programmieren.

Android Studio bietet Codevorlagen, die den Best Practices für Android-Design und -Entwicklung entsprechen. Diese vorhandenen Codevorlagen (verfügbar in Java und Kotlin) können Ihnen helfen, Ihr Projekt schnell zu starten. Eine solche Vorlage kann verwendet werden, um eine untere Navigationsleiste zu erstellen.

Um diese praktische Funktion für ein neues Projekt zu verwenden, starten Sie zuerst Android Studio.

Geben Sie den Anwendungsnamen ein und klicken Sie auf die Schaltfläche Weiter. Sie können die Standardeinstellungen im Dialogfeld Android-Zielgeräte unverändert belassen.

Klicken Sie erneut auf die Schaltfläche Weiter.

Wählen Sie im Dialogfeld Aktivität zu Mobile hinzufügen die Option Bottom-Navigation-Aktivität. Klicken Sie danach erneut auf die Schaltfläche Weiter.

Im letzten Dialog können Sie die Aktivität umbenennen oder ihren Layoutnamen oder Titel ändern, 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 unteren Navigationsaktivität zu erstellen. Wirklich cool!

Es wird dringend empfohlen, den generierten Code zu erkunden.

Um diese Vorlage in einem vorhandenen Android Studio-Projekt zu verwenden, gehen Sie einfach zu Datei > Neu > Aktivität > Aktivität für die untere Navigation.

Navigation from file menu to Bottom Navigation Activity

Beachten Sie, dass die in Android Studio enthaltenen Vorlagen gut für einfache Layouts und die Erstellung einfacher Apps geeignet sind. Wenn Sie jedoch Ihre App wirklich in Schwung bringen möchten, sollten Sie einige der App-Vorlagen in Betracht ziehen, die von Envato Market erhältlich sind.

Sie sind eine enorme Zeitersparnis für erfahrene Entwickler, da sie ihnen helfen, den Aufwand für die Erstellung einer App von Grund auf zu überwinden und ihre Talente stattdessen auf die einzigartigen und angepassten Teile der Erstellung einer neuen App zu konzentrieren.

Abschluss

In diesem Tutorial haben Sie gelernt, wie Sie eine untere Navigationsleiste in Android mit der BottomNavigationView-API von Grund auf neu erstellen. Wir haben auch untersucht, wie Sie die Android Studio-Vorlagen einfach und schnell verwenden können, um eine Aktivität für die untere Navigation zu erstellen.

Ich empfehle dringend, die offiziellen Richtlinien zum Materialdesign für die untere Navigationsleiste zu lesen, um mehr darüber zu erfahren, wie Sie die untere Navigationsleiste in Android richtig gestalten und verwenden.

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

1	// ...
2	private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
3	when (item.itemId) {
4	R.id.navigation_songs -> {
5
6	return@OnNavigationItemSelectedListener true
7	}
8	R.id.navigation_albums -> {
9
10	return@OnNavigationItemSelectedListener true
11	}
12	R.id.navigation_artists -> {
13
14	return@OnNavigationItemSelectedListener true
15	}
16	}
17	false
18	}
19
20	override fun onCreate(savedInstanceState: Bundle?) {
21	// ...
22	bottomNavigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
23	}
24	// ...