Share
Was Sie erstellen werdenDas Material-Design-Team bei Google definiert die Funktionalitä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 Tastendruck.
Durch Tippen auf ein unteres Navigationssymbol gelangen Sie direkt zur zugehörigen Ansicht oder aktualisieren die derzeit aktive Ansicht.
Gemäß den offiziellen Richtlinien für das Materialdesign für die untere Navigationsleiste sollte es verwendet werden, wenn Ihre App über Folgendes verfügt:
Ein Beispiel für eine beliebte App, die die untere Navigationsleiste implementiert, ist die Google+ Android-App von Google, mit der zu verschiedenen Zielen der App navigiert wird. Sie können dies selbst sehen, indem Sie die Google+ App aus dem Google Play Store herunterladen (sofern Sie sie noch nicht auf Ihrem Gerät haben). Der folgende Screenshot stammt von der Google+ App mit einer unteren Navigationsleiste.
In diesem Beitrag erfahren Sie, wie Sie Menüelemente in einer unteren Navigationsleiste in Android anzeigen. Wir werden die verwenden BottomNavigationView API zum Ausführen der Aufgabe. Für einen zusätzlichen Bonus erfahren Sie auch, wie Sie die Android Studio-Vorlagenfunktion verwenden, um Ihr Projekt schnell mit einer unteren 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.) BottomNavigationDemo) mit einer leeren Aktivität aufgerufen Hauptaktivität. Überprüfen Sie auch das Kotlin-Unterstützung einschließen Kontrollkästchen.
Mit der Verwendung beginnen BottomNavigationView Stellen Sie sicher, dass Sie in Ihrem Projekt die Designunterstützung und das Android-Support-Artefakt importieren. Fügen Sie diese zu Ihrem Modul hinzu build.gradle Datei, um sie zu importieren.
Abhängigkeiten Implementierung 'com.android.support:design:27.0.2'
Besuchen Sie auch Ihre res / layout / activlty_main.xml Datei zum Einschließen der BottomNavigationView Widget. Diese Layoutdatei enthält auch eine ConstraintLayout und ein FrameLayout. Notiere dass der FrameLayout dient als Container oder Platzhalter für die verschiedenen Fragmente, die darauf platziert werden, wenn ein Menüelement in der unteren Navigationsleiste angeklickt wird. (Wir werden in Kürze dazu kommen.)
Hier haben wir eine erstellt BottomNavigationView Widget mit der ID navigationView. In der offiziellen Dokumentation heißt es:
Accentsconagua
BottomNavigationView stellt eine standardmäßige untere Navigationsleiste für die Anwendung dar. Es ist eine Implementierung der Materialnavigation.Mit den unteren Navigationsleisten können Benutzer mit einem einzigen Klick die Ansichten der obersten Ebene erkunden und zwischen ihnen wechseln. Es sollte verwendet werden, wenn die Anwendung drei bis fünf Top-Level-Ziele hat.
Die wichtigen Attribute, die Sie beachten sollten, wurden unserem hinzugefügt BottomNavigationView sind:
App: itemBackground: Dieses Attribut legt den Hintergrund unserer Menüelemente auf die angegebene Ressource fest. In unserem Fall haben wir ihm lediglich eine Hintergrundfarbe gegeben. App: itemIconTint: legt den Farbton fest, der auf die Symbole unserer Menüelemente angewendet wird.app: itemTextColor: Legt die Farben fest, die für die verschiedenen Status (normal, ausgewählt, fokussiert usw.) des Menüelementetextes verwendet werden sollen.Um die Menüelemente für die untere Navigationsleiste einzubeziehen, können wir das Attribut verwenden App: Menü mit einem Wert, der auf eine Menüressourcendatei zeigt.
Hier ist der res / menu / navigation.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. Wie Sie sehen können, jeder
Als nächstes initialisieren wir eine Instanz von BottomNavigationView. Die Initialisierung wird im Inneren stattfinden onCreate () im MainActivity.kt.
import android.os.Bundle import android.support.design.widget.BottomNavigationView import android.support.v7.app.AppCompatActivity-Klasse MainActivity: AppCompatActivity () lateinit var toolbar: ActionBar-Überschreibung fun onCreate (savedInstanceState: Bundle?) super. onCreate (savedInstanceState) setContentView (R.layout.activity_main) Symbolleiste = supportActionBar !! val bottomNavigation: BottomNavigationView = findViewById (R.id.navigationView)
Jetzt können wir die App ausführen!
Wie Sie sehen, wird unsere untere Navigationsleiste am unteren Rand des App-Bildschirms angezeigt. Wenn Sie auf eines der Navigationselemente klicken, wird nichts passieren. Wir werden diesen Abschnitt im nächsten Abschnitt behandeln.
Sehen wir uns nun an, wie Sie Klickereignisse für die einzelnen Elemente in der unteren Navigationsleiste konfigurieren. Denken Sie daran, dass ein Klick auf ein Element dort zu einem neuen Ziel in der App führt.
//… private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener item -> when (item.itemId) R.id.navigation_songs -> return @ OnNavigationItemSelectedListener true R.id.navigation_albums -> .navigation_artists -> return @ OnNavigationItemSelectedListener true false überschreiben fun onCreate (savedInstanceState: Bundle?) //… bottomNavigation.setOnNavigationItemSelectedListener (mOnNavigationItemSelectedListener) //…
Hier haben wir die Methode genannt setOnNavigationItemSelectedListener. Dies geschieht gemäß der offiziellen Dokumentation:
Legen Sie einen Listener fest, der benachrichtigt wird, wenn ein unteres Navigationselement 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. Am Ende von jedem wann Zweig, wir kehren zurück wahr.
Wir passieren dann unsere mOnNavigationItemSelectedListener Hörer zu setOnNavigationItemSelectedListener () als Argument.
Beachten Sie, dass es eine andere ähnliche Methode gibt setOnNavigationItemReselectedListener, Diese wird benachrichtigt, wenn das aktuell ausgewählte untere Navigationselement erneut ausgewählt wird.
Als Nächstes erstellen wir die verschiedenen Seiten (oder Fragmente) für jedes Menüelement in der Navigationsleiste, sodass beim Klicken oder Tippen auf ein Menüelement ein anderes Android-Fragment oder eine andere Seite angezeigt wird.
Wir fangen mit dem an SongsFragment.kt Klasse, und Sie sollten einen ähnlichen Prozess für die verbleibenden zwei Fragmentklassen ausführen-AlbenFragment.kt und KünstlerFragment.kt.
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-Klasse SongsFragment: Fragment () überschreibe fun onCreateView (inflater: LayoutInflater, container.) : ViewGroup ?, savedInstanceState: Bundle?): View? = inflater.inflate (R.layout.fragment_songs, container, false) Begleitobjekt fun newInstance (): SongsFragment = SongsFragment ()
Auch hier ist mein R.layout.fragment_songs:
Wenn Sie auf eines der Menüelemente klicken, öffnen wir das entsprechende Fragment und ändern auch den Titel der Aktionsleiste.
private val mOnNavigationItemSelectedListener = rundeNavigationAnsicht.OnNavigationItemSelectedListener item -> when (item.itemId) R.id.navigation_song -> toolbar.title = "Lieder" val songsFragment = LiederFragment.newInstance () R.id.navigation_albums -> toolbar.title = "Albums" val AlbenFragment = AlbumsFragment.newInstance () openFragment (AlbenFragment) return @ OnNavigationItemSelectedListener true R.id.navigation_artists -> toolbar.title = "Artists" valArtment = 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 () das nutzt einfach die FragmentTransaction um unser Fragment zur Benutzeroberfläche hinzuzufügen.
Führen Sie das Projekt jetzt erneut aus, um zu sehen, wie alles funktioniert!
Jedes Mal, wenn Sie auf ein Menüelement klicken, wird der Benutzer zu einem neuen Fragment geführt.
Beachten Sie, dass sich in der unteren Navigationsleiste mehr als vier Menüpunkte befinden, d. H. im BottomNavigationView-dann aktiviert das Android-System automatisch den Schichtmodus. Wenn in diesem Modus auf eines der Menüelemente geklickt wird, werden die anderen Elemente rechts oder links vom angeklickten Element verschoben.
Nachdem Sie nun die APIs kennen gelernt haben, die für das Erstellen einer unteren Navigationsleiste in Android von Grund auf 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 Navigationsleiste 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 zum Erstellen einer unteren Navigationsleiste verwendet werden.
Um diese praktische Funktion für ein neues Projekt zu verwenden, starten Sie zunächst 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 wählen Sie aus Aktivität der unteren Navigation. Drücke den Nächster Taste danach wieder.
Im letzten Dialogfeld können Sie die Aktivität umbenennen oder ihren Layoutnamen oder Titel ändern, 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 unteren Navigationsaktivität zu erstellen. Wirklich cool!
Es wird dringend empfohlen, den generierten Code zu untersuchen.
Um in einem vorhandenen Android Studio-Projekt diese Vorlage zu verwenden, gehen Sie einfach zu Datei> Neu> Aktivität> Aktivität unterer Navigationsbereich.
Beachten Sie, dass die im Lieferumfang von Android Studio enthaltenen Vorlagen für einfache Layouts und das Erstellen einfacher Apps geeignet sind. Wenn Sie jedoch Ihre App wirklich in Schwung bringen 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 untere Navigationsleiste erstellen BottomNavigationView API von Grund auf neu. Wir haben auch untersucht, wie Sie mit den Android Studio-Vorlagen einfach und schnell eine untere Navigationsaktivität erstellen können.
Es wird dringend empfohlen, die offiziellen Richtlinien für das Materialdesign für die untere Navigationsleiste zu lesen, um mehr darüber zu erfahren, wie Sie die untere Navigationsleiste in Android richtig entwerfen und verwenden.
Weitere Informationen zum Codieren für Android finden Sie in Envato Tuts. Hier finden Sie einige unserer anderen Kurse und Tutorials+!
