Problemlose Fragmente: Verwenden der Navigationsarchitektur-Komponente von Android

Inhalt

Was ist die Navigationsarchitekturkomponente?
Hinzufügen des Navigationseditors zu Android Studio
Projektabhängigkeiten: Navigationsfragment und Navigationsoberfläche
Verschaffen Sie sich einen visuellen Überblick über die Navigation Ihrer App
Auffüllen des Navigationsdiagramms: Hinzufügen von Zielen
Aktualisieren Sie Ihre Fragment-Layouts
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Verbinden Sie Ihre Ziele mit Aktionen
Hosten des Navigationsdiagramms
Übergänge mit NavController auslösen
Weitere Navigation hinzufügen
Erstellen benutzerdefinierter Übergangsanimationen
Einpacken

Auf der I / O-Konferenz 2018 kündigte Google einen neuen Ansatz für die Entwicklung von Android-Apps an.

Die offizielle Empfehlung von Google lautet, eine einzelne Aktivität zu erstellen, die als Haupteinstiegspunkt für Ihre App dient, und dann den Rest des Inhalts Ihrer Anwendung als Fragmente bereitzustellen.

Während der Gedanke, all diese verschiedenen Fragmenttransaktionen und Lebenszyklen zu jonglieren, wie ein Albtraum klingt, hat Google auf der I / O 2018 auch die Navigationsarchitektur-Komponente herausgebracht, die Ihnen dabei helfen soll, diese Art von Struktur für einzelne Aktivitäten zu übernehmen.

In diesem Artikel zeigen wir Ihnen, wie Sie die Navigationskomponente zu Ihrem Projekt hinzufügen und wie Sie mit Hilfe des neuen Navigationseditors von Android Studio schnell und einfach eine Anwendung mit einer Aktivität und mehreren Fragmenten erstellen können. Sobald Sie Ihre Fragmente erstellt und verbunden haben, werden wir die Standard-Fragmentübergänge von Android verbessern, indem wir die Navigationskomponente und den Editor verwenden, um eine Reihe vollständig anpassbarer Übergangsanimationen zu erstellen.

Was ist die Navigationsarchitekturkomponente?

Als Teil von Android JetPack unterstützt Sie die Navigationsarchitekturkomponente bei der Visualisierung der verschiedenen Routen in Ihrer Anwendung und vereinfacht die Implementierung dieser Routen, insbesondere bei der Verwaltung von Fragmenttransaktionen.

Um die Navigationskomponente verwenden zu können, müssen Sie ein Navigationsdiagramm erstellen. Hierbei handelt es sich um eine XML-Datei, in der beschrieben wird, wie die Aktivitäten und Fragmente Ihrer App zueinander in Beziehung stehen.

Ein Navigationsdiagramm besteht aus:

Reiseziele: Die einzelnen Bildschirme, zu denen der Benutzer navigieren kann
Aktionen: Die Routen, die der Benutzer zwischen den Zielen Ihrer App nehmen kann

Sie können eine visuelle Darstellung des Navigationsdiagramms Ihres Projekts im Navigationseditor von Android Studio anzeigen. Im Folgenden finden Sie ein Navigationsdiagramm mit drei Zielen und drei Aktionen, wie es im Navigationseditor angezeigt wird.

Die Navigationskomponente soll Ihnen bei der Implementierung der neuen empfohlenen App-Struktur von Google helfen, bei der eine einzelne Aktivität das Navigationsdiagramm hostet und alle Ihre Ziele als Fragmente implementiert werden. In diesem Artikel befolgen wir diesen empfohlenen Ansatz und erstellen eine Anwendung, die aus einer MainActivity und drei Fragmentzielen besteht.

Die Navigationskomponente eignet sich jedoch nicht nur für Anwendungen mit dieser empfohlenen Struktur. Ein Projekt kann mehrere Navigationsdiagramme enthalten, und Sie können Fragmente und Aktivitäten als Ziele in diesen Navigationsdiagrammen verwenden. Wenn Sie ein großes, ausgereiftes Projekt in die Navigationskomponente migrieren, ist es möglicherweise einfacher, die Navigationsabläufe Ihrer App in Gruppen zu unterteilen, wobei jede Gruppe aus einer „Hauptaktivität“, einigen verwandten Fragmenten und einem eigenen Navigationsdiagramm besteht.

Hinzufügen des Navigationseditors zu Android Studio

Damit Sie die Navigationskomponente optimal nutzen können, verfügt Android Studio 3.2 Canary und höher über einen neuen Navigationseditor.

So aktivieren Sie diesen Editor:

Wählen Sie in der Android Studio-Menüleiste „Android Studio> Einstellungen…“.
Wählen Sie im Menü auf der linken Seite "Experimental".
Wenn es noch nicht ausgewählt ist, aktivieren Sie das Kontrollkästchen "Navigationseditor aktivieren".

OK klicken."
Starten Sie Android Studio neu.

Projektabhängigkeiten: Navigationsfragment und Navigationsoberfläche

Erstellen Sie ein neues Projekt mit den Einstellungen Ihrer Wahl, öffnen Sie die build.gradle-Datei und fügen Sie Navigationsfragment und Navigations-UI als Projektabhängigkeiten hinzu:

Abhängigkeiten {Implementierung fileTree (dir: libs, include:) Implementierung com.android.support:appcompat-v7:28.0.0 Implementierung com.android.support.constraint: constraint-layout: 1.1.3 // Fügen Sie die folgende // Implementierung hinzu "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI bietet Zugriff auf einige Hilfsfunktionen // Implementierung "android.arch.navigation: navigation-ui: 1.0.0-alpha05" Implementierung com .android.support: support-v4: 28.0.0 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Verschaffen Sie sich einen visuellen Überblick über die Navigation Ihrer App

So erstellen Sie ein Navigationsdiagramm:

Klicken Sie bei gedrückter Ctrl-Taste auf das "res" -Verzeichnis Ihres Projekts und wählen Sie "Neu> Android-Ressourcenverzeichnis".
Öffnen Sie die Dropdown-Liste "Ressourcentyp" und wählen Sie "Navigation".
Wählen Sie "OK".
Klicken Sie bei gedrückter Ctrl-Taste auf Ihr neues Verzeichnis "res / navigation" und wählen Sie "Neu> Navigationsressourcendatei".
Öffnen Sie die Dropdown-Liste "Ressourcentyp" und wählen Sie "Navigation".

Geben Sie diesen Dateinamen an. Ich verwende "nav_graph".
OK klicken."

Öffnen Sie die Datei "res / navigation / nav_graph" und der Navigationseditor wird automatisch gestartet. Ähnlich wie der Layout-Editor ist der Navigations-Editor in die Registerkarten „Design“ und „Text“ unterteilt.

Wenn Sie die Registerkarte "Text" auswählen, wird folgendes XML angezeigt:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation ’ist der Wurzelknoten jedes Navigationsgraphen //

Auf der Registerkarte "Design" können Sie die Navigation Ihrer App visuell erstellen und bearbeiten.

Der Navigationseditor besteht von links nach rechts aus:

Eine Liste der Ziele: Hier werden alle Ziele aufgelistet, aus denen sich dieses Navigationsdiagramm zusammensetzt, sowie die Aktivität, in der das Navigationsdiagramm gehostet wird.
Der Graph Editor: Der Diagrammeditor bietet einen visuellen Überblick über alle Ziele des Diagramms und die Aktionen, die diese verbinden.
Der Attribut-Editor: Wenn Sie im Diagrammeditor ein Ziel oder eine Aktion auswählen, werden im Bereich „Attribute“ Informationen zum aktuell ausgewählten Element angezeigt.

Auffüllen des Navigationsdiagramms: Hinzufügen von Zielen

Unser Navigationsdiagramm ist derzeit leer. Lassen Sie uns einige Ziele hinzufügen.

Sie können bereits vorhandene Aktivitäten oder Fragmente hinzufügen, aber Sie können auch das Navigationsdiagramm verwenden, um schnell und einfach neue Fragmente zu erstellen:

Klicken Sie auf die Schaltfläche "Neues Ziel" und wählen Sie "Leeres Ziel erstellen".

Geben Sie im Feld "Fragmentname" den Klassennamen Ihres Fragments ein. Ich verwende "FirstFragment".
Stellen Sie sicher, dass das Kontrollkästchen "Layout XML erstellen" aktiviert ist.
Füllen Sie das Feld "Fragment Layout Name" aus. Ich verwende "fragment_first".
Klicken Sie auf "Fertig stellen".

Eine FirstFragment-Unterklasse und die dazugehörige Layout-Ressourcendatei „fragment_first.xml“ werden jetzt zu Ihrem Projekt hinzugefügt. FirstFragment wird auch als Ziel in der Navigationsgrafik angezeigt.

Wenn Sie FirstFragment im Navigationseditor auswählen, werden im Bereich "Attribute" einige Informationen zu diesem Ziel angezeigt, z. B. der Klassenname und die ID, mit der Sie auf dieses Ziel an einer anderen Stelle im Code verweisen.

Spülen und wiederholen Sie den Vorgang, um Ihrem Projekt ein zweites und ein drittes Fragment hinzuzufügen.

Wechseln Sie zur Registerkarte "Text", und Sie werden feststellen, dass das XML aktualisiert wurde, um diese Änderungen widerzuspiegeln.

Jedes Navigationsdiagramm hat ein Startziel. Dies ist der Bildschirm, der angezeigt wird, wenn der Benutzer Ihre App startet. Im obigen Code verwenden wir FirstFragment als Startziel für unsere App. Wenn Sie zur Registerkarte "Entwurf" wechseln, sehen Sie ein Haussymbol, das FirstFragment auch als Startziel des Diagramms kennzeichnet.

Wenn Sie lieber einen anderen Startpunkt verwenden möchten, wählen Sie die betreffende Aktivität oder das betreffende Fragment aus und klicken Sie dann im Bereich "Attribute" auf "Startziel festlegen".

Alternativ können Sie diese Änderung auf Codeebene vornehmen:

Aktualisieren Sie Ihre Fragment-Layouts

Nachdem wir unsere Ziele festgelegt haben, fügen wir einige Elemente der Benutzeroberfläche hinzu, damit immer klar ist, welches Fragment gerade angezeigt wird.

Ich werde jedem Fragment Folgendes hinzufügen:

Eine Textansicht, die den Titel des Fragments enthält
Eine Schaltfläche, mit der der Benutzer von einem Fragment zum nächsten navigieren kann

Hier ist der Code für jede Layout-Ressourcendatei:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Verbinden Sie Ihre Ziele mit Aktionen

Der nächste Schritt ist die Verknüpfung unserer Ziele über Aktionen.

Sie können eine Aktion im Navigationseditor durch einfaches Ziehen und Ablegen erstellen:

Stellen Sie sicher, dass die Registerkarte "Design" des Editors ausgewählt ist.
Bewegen Sie den Mauszeiger über die rechte Seite des Ziels, zu dem Sie navigieren möchten vonDies ist in diesem Fall FirstFragment. Ein Kreis sollte erscheinen.
Klicken Sie und ziehen Sie den Cursor zu dem Ziel, zu dem Sie navigieren möchten zu, das ist SecondFragment. Eine blaue Linie sollte erscheinen. Wenn SecondFragment blau markiert ist, lassen Sie den Cursor los, um eine Verknüpfung zwischen diesen Zielen herzustellen.

Es sollte jetzt einen Aktionspfeil geben, der FirstFragment mit SecondFragment verbindet. Klicken Sie auf diesen Pfeil, um ihn auszuwählen. Der Bereich "Attribute" wird aktualisiert und zeigt einige Informationen zu dieser Aktion an, einschließlich der vom System zugewiesenen ID.

Diese Änderung spiegelt sich auch in der XML des Navigationsdiagramms wider:

… … …

Spülen und wiederholen, um eine Aktion zu erstellen, die SecondFragment mit ThirdFragment und eine Aktion, die ThirdFragment mit FirstFragment verbindet.

Hosten des Navigationsdiagramms

Das Navigationsdiagramm bietet eine visuelle Darstellung der Ziele und Aktionen Ihrer App. Für das Aufrufen dieser Aktionen ist jedoch zusätzlicher Code erforderlich.

Nachdem Sie ein Navigationsdiagramm erstellt haben, müssen Sie es in einer Aktivität hosten, indem Sie der Layoutdatei dieser Aktivität ein NavHostFragment hinzufügen. Dieses NavHostFragment bietet einen Container, in dem die Navigation erfolgen kann, und ist auch für das Ein- und Auswechseln von Fragmenten verantwortlich, während der Benutzer durch Ihre App navigiert.

Öffnen Sie die Datei "activity_main.xml" Ihres Projekts und fügen Sie ein NavHostFragment hinzu.

<? xml version = "1.0" encoding = "utf-8"?> // Erstellt ein Fragment, das als NavHostFragment fungiert //

Im obigen Code ermöglicht app: defaultNavHost = "true", dass der Navigationshost abfängt, wenn die Schaltfläche "Zurück" des Systems gedrückt wird, sodass die App immer die in Ihrem Navigationsdiagramm beschriebene Navigation berücksichtigt.

Übergänge mit NavController auslösen

Als nächstes müssen wir einen NavController implementieren, eine neue Komponente, die für die Verwaltung des Navigationsprozesses in einem NavHostFragment verantwortlich ist.

Um zu einem neuen Bildschirm zu navigieren, müssen Sie einen NavController mit Navigation.findNavController abrufen, die navigate () -Methode aufrufen und dann entweder die ID des Ziels übergeben, zu dem Sie navigieren, oder die Aktion, die Sie aufrufen möchten. Zum Beispiel rufe ich "action_firstFragment_to_secondFragment" auf, wodurch der Benutzer von FirstFragment nach SecondFragment transportiert wird:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

Der Benutzer wechselt durch Klicken auf eine Schaltfläche zu einem neuen Bildschirm. Daher müssen wir auch einen OnClickListener implementieren.

Nach diesen Änderungen sollte FirstFragment ungefähr so aussehen:

android.os.Bundle importieren; import android.support.annotation.NonNull; Import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; android.view.View importieren; import android.view.ViewGroup; import android.widget.Button; androidx.navigation.NavController importieren; Import androidx.navigation.Navigation; öffentliche Klasse FirstFragment erweitert Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInstanceState, ViewGroup-Container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (Ansicht @NonNull View, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_first_frag }}); }}

Öffnen Sie als Nächstes Ihre MainActivity und fügen Sie Folgendes hinzu:

NavigationView.OnNavigationItemSelectedListener: Ein Listener zum Behandeln von Ereignissen für Navigationselemente
SecondFragment.OnFragmentInteractionListener: Eine Schnittstelle, die beim Erstellen von SecondFragment über den Navigationseditor generiert wurde

MainActivity muss auch die Methode onFragmentInteraction () implementieren, die die Kommunikation zwischen dem Fragment und der Activity ermöglicht.

android.support.v7.app.AppCompatActivity importieren; android.os.Bundle importieren; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull; öffentliche Klasse MainActivity erweitert AppCompatActivity implementiert NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem-Element) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Weitere Navigation hinzufügen

Um den Rest der Navigation unserer App zu implementieren, müssen Sie nur den onViewCreated-Block kopieren / einfügen und einige Änderungen vornehmen, damit wir auf die richtigen Schaltflächen-Widgets und Navigationsaktionen verweisen.

Öffnen Sie Ihr SecondFragment und fügen Sie Folgendes hinzu:

@Override public void onViewCreated (Ansicht @NonNull View, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_secondFondFondF }}); }

Aktualisieren Sie dann den onViewCreated-Block von ThirdFragment:

@Override public void onViewCreated (Ansicht @NonNull View, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_thirdf }}); }

Vergessen Sie nicht, die ThirdFragment.OnFragmentInteractionListener-Schnittstelle zu Ihrer MainActivity hinzuzufügen:

Öffentliche Klasse MainActivity erweitert AppCompatActivity implementiert NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Führen Sie dieses Projekt auf Ihrem Android-Gerät oder Android Virtual Device (AVD) aus und testen Sie die Navigation. Sie sollten in der Lage sein, zwischen allen drei Fragmenten zu navigieren, indem Sie auf die verschiedenen Schaltflächen klicken.

Erstellen benutzerdefinierter Übergangsanimationen

Zu diesem Zeitpunkt kann sich der Benutzer in Ihrer App bewegen, aber der Übergang zwischen den einzelnen Fragmenten ist ziemlich abrupt. In diesem letzten Abschnitt verwenden wir die Navigationskomponente, um jedem Übergang eine andere Animation hinzuzufügen, damit sie reibungsloser abläuft.

Jede Animation, die Sie verwenden möchten, muss in einer eigenen Animationsressourcendatei in einem Verzeichnis "res / anim" definiert werden. Wenn Ihr Projekt noch kein "res / anim" -Verzeichnis enthält, müssen Sie eines erstellen:

Klicken Sie bei gedrückter Ctrl-Taste auf den Ordner "res" Ihres Projekts und wählen Sie "Neu> Android-Ressourcenverzeichnis".
Geben Sie diesem Verzeichnis den Namen "anim".
Öffnen Sie das Dropdown-Menü "Ressourcentyp" und wählen Sie "Animation".
OK klicken."

Beginnen wir mit der Definition einer Ausblendanimation:

Klicken Sie bei gedrückter Ctrl-Taste auf das Verzeichnis "res / anim" Ihres Projekts.
Wählen Sie "Neu> Animationsressourcendatei".
Geben Sie dieser Datei den Namen "fade_out".
Öffnen Sie die Datei "fade_out" und fügen Sie Folgendes hinzu:

Wiederholen Sie die obigen Schritte, um eine zweite Animationsressourcendatei mit dem Namen "slide_out_left" zu erstellen, und fügen Sie dann Folgendes hinzu:

Erstellen Sie eine dritte Datei mit dem Namen "slide_out_right" und fügen Sie Folgendes hinzu:

Sie können diese Animationen jetzt über den Navigationseditor Ihren Aktionen zuordnen.So spielen Sie die Ausblendanimation ab, wenn der Benutzer von FirstFragment zu SecondFragment wechselt:

Öffnen Sie Ihr Navigationsdiagramm und vergewissern Sie sich, dass die Registerkarte „Design“ ausgewählt ist.
Aktivieren Sie die Aktion, die FirstFragment mit SecondFragment verknüpft.
Erweitern Sie im Bereich „Attribute“ den Abschnitt „Übergänge“. Standardmäßig sollte jede Dropdown-Liste in diesem Abschnitt auf "Keine" gesetzt sein.
Öffnen Sie das Dropdown-Menü "Enter", das die Animation steuert, die bei jedem Übergang von SecondFragment zum oberen Rand des Hintergrundstapels abgespielt wird. Wählen Sie die Animation "fade_out".

Wenn Sie zur Registerkarte "Design" wechseln, wird angezeigt, dass diese Animation zu "action_firstFragment_to_secondFragment" hinzugefügt wurde.

Führen Sie das aktualisierte Projekt auf Ihrem Android-Gerät oder AVD aus. Sie sollten jetzt einen Ausblendeffekt feststellen, wenn Sie von FirstFragment zu SecondFragment navigieren.

Wenn Sie sich das Fenster "Attribute" noch einmal ansehen, werden Sie feststellen, dass "Eingabe" nicht der einzige Teil des Übergangs ist, in dem Sie eine Animation anwenden können. Sie können auch wählen aus:

Ausgang: Die Animation, die abgespielt wird, wenn ein Fragment den Stapel verlässt
Pop Enter: Die Animation, die abgespielt wird, wenn sich ein Fragment oben im Stapel befindet
Pop Exit: Die Animation, die abgespielt wird, wenn ein Fragment in den unteren Bereich des Stapels übergeht

Versuchen Sie zu experimentieren, indem Sie verschiedene Animationen auf verschiedene Teile Ihrer Übergänge anwenden. Sie können das fertige Projekt auch von GitHub herunterladen.

Einpacken

In diesem Artikel haben wir uns angesehen, wie Sie mit der Navigationsarchitektur-Komponente eine Einzelaktivitätsanwendung mit mehreren Fragmenten und benutzerdefinierten Übergangsanimationen erstellen können. Hat Sie die Navigationskomponente überzeugt, Ihre Projekte auf eine solche Anwendungsstruktur zu migrieren? Lass es uns in den Kommentaren unten wissen!