Entdecken Sie die Android Design Support-Bibliothek: Ansicht von unten

Es ist schon eine Weile her, dass ich über die Android Design Support Library geschrieben habe, und ich war sehr aufgeregt, als ich heute Morgen aufwachte und feststellte, dass die Bottom Navigation View zu Version 25 der Design Support Library hinzugefügt wurde!

Die Ansicht "Bottom Navigation" ist seit einiger Zeit in den Materialdesign-Richtlinien enthalten, aber es war nicht einfach, sie in unsere Apps zu implementieren. Einige Anwendungen haben ihre eigenen Lösungen erstellt, während andere sich auf Open-Source-Bibliotheken von Drittanbietern verlassen haben, um die Arbeit zu erledigen. Jetzt wird in der Design-Support-Bibliothek diese untere Navigationsleiste hinzugefügt. Lassen Sie uns einen Blick darauf werfen, wie wir sie verwenden können!

Ich habe eine wirklich einfache Beispiel-App erstellt. Sie ist auf github beendet, wenn Sie sie ausprobieren möchten.

Hinzufügen der unteren Navigationsansicht zu Ihrem Layout

Zunächst müssen wir unsere Abhängigkeit aktualisieren!

kompiliere "com.android.support:design:25.0.0"

Als nächstes müssen wir einfach das Bottom Navigation View-Widget zu unserer gewünschten Layoutdatei hinzufügen. Denken Sie daran, dass dies am unteren Bildschirmrand ausgerichtet sein sollte und der gesamte Inhalt darüber angezeigt wird. Wir können diese Ansicht folgendermaßen hinzufügen:

Sie werden feststellen, dass für das Widget einige Attribute festgelegt wurden. Wir können diese verwenden, um Menüelemente festzulegen, die wir anzeigen möchten, und um die Farben festzulegen, die in der unteren Navigationsansicht verwendet werden sollen:

  • app: itemBackground - Die Hintergrundfarbe für das untere Navigationsmenü
  • app: itemIconTint - Der Farbton, der für die Symbole im unteren Navigationsmenü verwendet werden soll
  • app: itemTextColor - Die Farbe, die für den Text im unteren Navigationsmenü verwendet werden soll
  • app: menu - Die Menüressource, mit der Elemente im unteren Navigationsmenü angezeigt werden

Wir können diese Werte auch programmgesteuert festlegen, indem wir die folgenden Methoden in unserer BottomNavigationView-Instanz verwenden:

  • inflateMenu (int menuResource) - Bläst ein Menü für die untere Navigationsansicht mithilfe einer Menüressourcenkennung auf.
  • setItemBackgroundResource (int backgroundResource) - Der für die Menüelemente zu verwendende Hintergrund.
  • setItemTextColor (ColorStateList colorStateList) - Eine ColorStateList, mit der der für die Menüelemente verwendete Text eingefärbt wird
  • setItemIconTintList (ColorStateList colorStateList) - Eine ColorStateList, mit der die für die Menüelemente verwendeten Symbole eingefärbt werden

Wenn Sie dies zu Ihrer App hinzufügen und auf Ihrem Gerät ausführen, sehen Sie eine glänzende neue Ansicht der unteren Navigation wie folgt:

Erstellen Sie ein anzuzeigendes Menü

Wir haben also im vorherigen Abschnitt auf ein Menü verwiesen, aber wie sieht das aus? Nun, es sieht genauso aus wie jedes andere Menü, das wir in unserer gesamten App verwenden würden!

Es ist wichtig zu beachten, dass die maximale Anzahl von Elementen, die angezeigt werden können, 5 beträgt. Dies kann sich zu jedem Zeitpunkt ändern. Daher ist es wichtig, dies mithilfe der von der BottomNavigationView-Klasse bereitgestellten getMaxItem () -Methode zu überprüfen, anstatt den Wert selbst fest zu codieren.

Behandlung von Aktivierten / Deaktivierten Zuständen

Mit der BottomNavigationView können wir die Anzeige von sowohl aktivierten als auch deaktivierten Menüelementen einfach handhaben. Damit die Ansicht diese Fälle verarbeitet, müssen nur zwei Änderungen vorgenommen werden:

  • Zuerst müssen wir eine Auswahldatei für unsere aktivierten / deaktivierten Farben erstellen. Wenn Sie zuvor noch keine dieser Optionen verwendet haben, können wir das Erscheinungsbild im Wesentlichen anhand des Zustands eines Elements definieren.
  • Als nächstes müssen wir

Der Status "Deaktiviert" und "Aktiviert" wird dann in der Auswahldatei wie folgt angezeigt:

Lauschen Sie auf Klickereignisse

Nachdem wir unser Menü implementiert haben, müssen wir in der Lage sein, auf die Interaktion mit dem Menü zu reagieren. Mit der BottomNavigationView-Methode setOnNavigationItemSelectedListener () können Sie einen Listener für Menüelementereignisse festlegen:

Wenn wir Klickereignisse für die Artikel erhalten, können wir einfach entsprechend reagieren. In meinem Beispiel ändere ich einfach das aktuell ausgewählte Ansichtspagerelement, das auf dem Bildschirm angezeigt wird.

Und das ist es!

Das scheint überhaupt nicht viel zu sein - ich hoffe, Sie können jetzt sehen, wie einfach es ist, die Ansicht "Bottom Navigation" mithilfe der Design-Support-Bibliothek zu implementieren. Viele Apps verwenden bereits die Design-Support-Bibliothek, daher ist es ziemlich praktisch, die Notwendigkeit für Bibliotheken von Drittanbietern zu beseitigen.

Schauen Sie sich einige meiner anderen Projekte auf hitherejoe.com an