Share
Was Sie erstellen werdenDas Material-Design-Team bei Google definiert die Funktionalität einer Navigationsleiste in Android wie folgt:
Die Navigationsleiste wird von links eingezogen und enthält die Navigationsziele für Ihre App.
Ein Beispiel für eine beliebte Android-App, die die Navigationsleiste implementiert, ist die Inbox-App von Google, die eine Navigationsleiste verwendet, um zu verschiedenen Abschnitten der Anwendung zu navigieren. Sie können es selbst prüfen, indem Sie die Inbox-App aus dem Google Play Store herunterladen, sofern Sie sie noch nicht auf Ihrem Gerät haben. Der folgende Screenshot zeigt den Posteingang mit geöffneter Navigationsleiste.
Der Benutzer kann die Navigationsleiste anzeigen, wenn er mit dem Finger vom linken Rand der Aktivität streicht. Sie können ihn auch aus der Home-Aktivität (der obersten Ebene der App) finden, indem Sie in der Aktionsleiste auf das App-Symbol (auch "Hamburger" -Menü) tippen.
Wenn Sie viele verschiedene Ziele (z. B. mehr als sechs) in Ihrer App haben, wird empfohlen, eine Navigationsleiste zu verwenden.
In diesem Beitrag erfahren Sie, wie Sie Navigationselemente in einer Navigationsleiste in Android anzeigen. Wir werden darüber sprechen, wie man das benutzt Schubladenlayout und Navigationsansicht API zur Durchführung dieser Aufgabe. Für einen 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 Lernprogramm finden Sie in unserem GitHub-Repo, sodass Sie es einfach mitverfolgen können.
Um diesem Tutorial folgen zu können, benötigen Sie:
Starten Sie Android Studio und erstellen Sie ein neues Projekt (Sie können es benennen.) NavigationDrawerDemo) mit einer leeren Aktivität aufgerufen Hauptaktivität. Überprüfen Sie auch das Kotlin-Unterstützung einschließen Kontrollkästchen.
Mit der Verwendung beginnen Schubladenlayout und Navigationsansicht In Ihrem Projekt müssen Sie die Designunterstützung und das Android-Support-Artefakt importieren. Fügen Sie diese also zu Ihren Modulen hinzu build.gradle Datei, um sie zu importieren.
Abhängigkeiten Implementierung 'com.android.support:design:27.0.2' Implementierung 'com.android.support:support-v4:27.0.2'
Schließen Sie auch beide ein Schubladenlayout Widget und auch die Navigationsansicht Widget in Ihrem res / layout / activlty_main.xml Datei.
Hier haben wir eine erstellt Schubladenlayout Widget mit der ID drawer_layout. Das Werkzeuge: openDrawer Diese Eigenschaft wird verwendet, um die Navigationsleiste anzuzeigen, wenn das XML-Layout in der Designansicht von Android Studio geöffnet ist.
Die offizielle Dokumentation sagt folgendes über Schubladenlayout:
Schubladenlayoutfungiert als Container der obersten Ebene für Fensterinhalte, mit dem interaktive "Schubladen" -Ansichten aus einer oder beiden vertikalen Kanten des Fensters herausgezogen werden können.
Nach dem Hinzufügen der Schubladenlayout Widget, haben wir ein untergeordnetes Layout eingefügt, das auf zeigt @ layout / app_bar_main.
Hier ist mein app_bar_main.xml Ressourcendatei. Diese Datei hat einfach eine KoordinatorLayout, ein AppBarLayout, und ein Werkzeugleiste Widget.
Schließlich haben wir eine erstellt Navigationsansicht Widget. Die offizielle Dokumentation sagt folgendes über Navigationsansicht:
Accentsconagua
Navigationsansicht stellt ein Standardnavigationsmenü für die Anwendung dar. Der Menüinhalt kann mit einer Menüressourcendatei gefüllt werden.In dem Navigationsansicht XML-Widget, Sie können sehen, dass wir ein hinzugefügt haben android: layout_gravity Attribut mit Wert Start. 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 eigenen Fall kommt die Schublade von links heraus.
Wir haben auch eine app: headerLayout Attribut, auf das zeigt @ layout / nav_header_main. Dies wird eine hinzufügen Aussicht als Kopfzeile des Navigationsmenüs.
Hier ist mein nav_header_main.xml Layout-Ressourcendatei:
Diese Layoutdatei hat einfach eine LinearLayout, ein Bildansicht, und ein Textvorschau.
Um die Menüelemente für die Navigationsleiste einzuschließen, können wir das Attribut verwenden App: Menü mit einem Wert, der auf eine Menüressourcendatei zeigt.
Hier ist der res / menu / activity_main_drawer.xml Menü Ressourcendatei:
Hier haben wir eine definiert Speisekarte Verwendung der die als Container für Menüpunkte dient. Ein MenuItem, was ein einzelnes Element in einem Menü darstellt.
Wir haben dann unsere erste Menügruppe mit der
EIN Um ein Untermenü zu erstellen, haben wir dies in unserem letzten Schritt getan
Beachten Sie, dass wir beim Anzeigen der Navigationslistenelemente aus einer Menüressource eine verwenden könnten Listenansicht stattdessen. Indem Sie die Navigationsleiste mit einer Menüressource konfigurieren, erhalten Sie das Materialdesign kostenlos in der Navigationsleiste. Wenn Sie eine Listenansicht, Sie müssen die Liste pflegen und auch so anpassen, dass sie den empfohlenen Materialdesignspezifikationen für die Navigationsleiste entspricht.
Als nächstes werden wir Instanzen unseres initialisieren Schubladenlayout und ActionBarDrawerToggle. Die Initialisierung wird im Inneren stattfinden onCreate () im 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-Klasse MainActivity: AppCompatActivity () privates lateinit var-Zeichenfach: DrawerLayout privates lateinit var toggle: ActionBarDrawerToggle-Überschreibung fun onCreate (savedInstanceState: Bundle?) super.onCont () .activity_main) val toolbar: Toolbar = findViewById (R.id.toolbar_main) setSupportActionBar (Symbolleiste) drawer = findViewById (R.id.drawer_layout) toggle = ActionBarDrawerToggle (this, Drawer, Toolbar, R.string.navigation_drawer). navigation_drawer_close) drawer.addDrawerListener (toggle) supportActionBar? .setDisplayHomeAsUpEnabled (true) supportActionBar? .setHomeButtonEnabled (true) //…
Das ActionBarDrawerToggle Richtet das App-Symbol auf der linken Seite der Aktionsleiste oder Symbolleiste ein, um die Navigationsleiste zu öffnen und zu schließen. Um eine Instanz von erstellen zu können ActionBarDrawerToggle, Wir müssen folgende Parameter angeben:
Aktivität Sie verwenden diese, während in einer Fragment du rufst an getActivity () Schubladenlayout Widget zur Verknüpfung mit der Aktivität Aktionsleiste Wir haben die Methode aufgerufen addDrawerListener () auf einen Schubladenlayout um einen zu verbinden ActionBarDrawerToggle mit einer Schubladenlayout.
Beachten Sie, dass wir auch das App-Symbol über aktivieren setHomeButtonEnabled () und aktivieren Sie diese für die Navigation nach oben setDisplayHomeAsUpEnabled ().
Wir leiten dann die onPostCreate (), onConfigurationChanged (), und onOptionsItemSelected () Aktivitätsrückrufmethoden für die Umschaltung:
Klasse MainActivity: AppCompatActivity () //… überschreibe fun onPostCreate (savedInstanceState: Bundle?) super.onPostCreate (savedInstanceState) toggle.syncState () überschreibt fun onConfigurationChanged (newConfig: Configuration?) super.onConfigurationCapton. onConfigurationChanged (newConfig) überschreibt fun onOptionsItemSelected (item: MenuItem?): Boolean if (toggle.onOptionsItemSelected (item)) return true return super.onOptionsItemSelected (item)
Hier ist was der syncState () laut offiziellen Unterlagen:
Synchronisiert den Status des Schubladenkennzeichens / -preises mit dem verknüpften DrawerLayout… Dies sollte von Ihrem aufgerufen werdenAktivität'sonPostCreateMethode, die synchronisiert werden soll, nachdem der Instanzstatus des DrawerLayout wiederhergestellt wurde, und zu einem anderen Zeitpunkt, zu dem der Status so auseinandergegangen ist, dass ActionBarDrawerToggle nicht benachrichtigt wurde. (Wenn Sie beispielsweise die Weiterleitung der entsprechenden Fachereignisse für einen bestimmten Zeitraum aufhören.)
An diesem Punkt können wir die App ausführen!
Wie Sie sehen, wird beim Starten der App in der Aktionsleiste das Symbol für die Navigationsleiste „Hamburger“ angezeigt. Tippen Sie auf dieses App-Symbol, um die Schublade zu öffnen. Wenn Sie auf die Elemente der Navigationsleiste klicken, wird auch nichts getan. Wir werden diesen Teil im nächsten Abschnitt behandeln.
Sehen wir uns nun an, wie mit Klickereignissen für die einzelnen Elemente in der Navigationsleiste gearbeitet wird. Beachten Sie, dass Sie durch Klicken auf ein Element zu einer neuen Aktivität oder einem neuen Fragment gelangen sollten. Aus diesem Grund wird es als Navigationsleiste bezeichnet!
Zunächst muss Ihre Aktivität das implementieren NavigationView.OnNavigationItemSelectedListener.
Klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //…
Durch die Implementierung dieses Vertrags oder dieser Schnittstelle müssen wir nun die einzige Methode überschreiben: onNavigationItemSelected ().
Klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //… überschreibe Fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (this, ". Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (dieser "geklickte Punkt zwei", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (" Auf geklicktes Element drei ", Toast.LENGTH_SHORT) .show () R.id.nav_item_four -> Toast.makeText (dieses" geklickte Element vier ", Toast.LENGTH_SHORT) .show () return trueDiese Methode wird aufgerufen, wenn ein Element im Navigationsmenü ausgewählt wird. Wir haben das benutzt wann Ausdruck zum Ausführen verschiedener Aktionen basierend auf dem Menüelement, auf das geklickt wurde. Die Menüelement-IDs dienen als Konstanten für das wann Ausdruck.
Als nächstes müssen wir unser initialisieren Navigationsansicht und setzen Sie diesen Listener hinein onCreate () unserer Tätigkeit.
Klasse MainActivity: AppCompatActivity (), NavigationView.OnNavigationItemSelectedListener //… überschreibe Fun onCreate (savedInstanceState: Bundle?) //… val navigationView: navigationView = findViewById (R.id.nav_view) navigationView.setNavigationItemSelectedListener (in) //…
Führen Sie das Projekt erneut aus!
Wenn Sie auf einige Elemente klicken, wird eine Toastnachricht angezeigt - genau wie wir es erwartet haben. Denken Sie jedoch daran, dass ein Klick 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 die Schublade beim Klicken auf ein Element weiterhin angezeigt wird. Es wäre besser, wenn er automatisch geschlossen würde, wenn auf ein Element geklickt wurde. Mal sehen, wie das geht.
overnide fun onNavigationItemSelected (item: MenuItem): Boolean when (item.itemId) R.id.nav_item_one -> Toast.makeText (dies ist ein "geklicktes Element 1", Toast.LENGTH_SHORT) .show () R.id.nav_item_two -> Toast.makeText (dies ist "geklicktes Element zwei", Toast.LENGTH_SHORT) .show () R.id.nav_item_three -> Toast.makeText (dieses "geklicktes Element drei", Toast.LENGTH_SHORT) .show () R .id.nav_item_four -> Toast.makeText (dieses "geklickte Element vier", Toast.LENGTH_SHORT) .show () drawer.closeDrawer (GravityCompat.START) gibt true zurück.
Um die Schublade zu schließen, nachdem ein Link angeklickt wurde, rufen Sie einfach auf closeDrawer () auf einer Instanz von Schubladenlayout und weitergeben GravityCompat.START auf die Methode.
Führen Sie das Projekt noch einmal aus und sehen Sie das Ergebnis!
Wenn die Schublade geöffnet ist, ist es eine bessere Benutzererfahrung, die Aktivität zu Hause nicht zu schließen, wenn die Schublade geöffnet wird Zurück Taste wird gedrückt. So funktionieren beliebte Apps wie die Inbox-App von Google.
Also, wenn die Schublade geöffnet ist und die Zurück Wenn Sie die Taste drücken, schließen Sie nur die Schublade anstelle der aktuellen Aktivität zu Hause. Wenn der Benutzer die Taste drückt Zurück Wenn Sie die Taste erneut drücken, sollte die Aktivität zu Hause geschlossen werden.
So können wir das 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!
Nachdem Sie nun die APIs kennen gelernt haben, die zum Erstellen einer Navigationsleiste erforderlich sind, zeige ich Ihnen eine Verknüpfung, die das nächste Mal schneller machen wird. Sie können einfach eine Vorlage verwenden, anstatt eine Aktivität der Navigationsschublade von Grund auf neu zu programmieren.
Android Studio bietet Codevorlagen, die den bewährten Vorgehensweisen von Android beim Design und der Entwicklung entsprechen. Diese vorhandenen Code-Vorlagen (verfügbar in Java und Kotlin) können Ihnen dabei helfen, Ihr Projekt schnell zu starten. Eine solche Vorlage kann verwendet werden, um eine Aktivität der Navigationsleiste zu erstellen.
Ich zeige Ihnen, wie Sie diese praktische Funktion in Android Studio verwenden können.
Starten Sie für ein neues Projekt Android Studio.
Geben Sie den Anwendungsnamen ein und klicken Sie auf Nächster Taste.
Sie können die Standardeinstellungen so belassen, wie sie im Ziel Android-Geräte Dialog. Drücke den Nächster Taste erneut.
In dem Hinzufügen eine Aktivität für das Handy blättern Sie nach unten und wählen Sie Aktivität der Navigationsablage. Drücke den Nächster Taste danach.
Im letzten Dialogfeld können Sie den Aktivitätsnamen, den Layoutnamen oder den Titel umbenennen, wenn Sie möchten. Zum Schluss klicken Sie auf Fertig Taste, um alle Konfigurationen zu akzeptieren.
Android Studio hat uns jetzt dabei geholfen, ein Projekt mit einer Aktivität der Navigationsleiste 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. Einfach auf gehen Datei> Neu> Aktivität> Aktivität der Navigationsleiste.
Die im Lieferumfang von Android Studio enthaltenen Vorlagen eignen sich für einfache Layouts und für das Erstellen einfacher Apps. Wenn Sie Ihre App jedoch noch weiter vorantreiben möchten, sollten Sie einige der von Envato Market verfügbaren App-Vorlagen in Betracht ziehen.
Sie sparen viel Zeit für erfahrene Entwickler und helfen ihnen, den Slog der Erstellung einer App von Grund auf zu durchbrechen und sich stattdessen auf die einzigartigen und angepassten Teile der Erstellung einer neuen App zu konzentrieren.
In diesem Lernprogramm haben Sie gelernt, wie Sie mit Android eine Navigationsleiste erstellen Schubladenlayout und Navigationsansicht API von Grund auf neu. Wir haben auch untersucht, wie Sie mit den Android Studio-Vorlagen einfach und schnell eine Navigationsleiste erstellen können.
Ich empfehle Ihnen dringend, die offiziellen Richtlinien für das Materialdesign für Navigationsschubladen zu lesen, um mehr darüber zu erfahren, wie Navigationsschubladen in Android richtig entworfen und verwendet werden.
Weitere Informationen zum Codieren für Android finden Sie in Envato Tuts. Hier finden Sie einige unserer anderen Kurse und Tutorials+!
