Inhoud

• Wat is de navigatiearchitectuurcomponent?
• De navigatie-editor toevoegen aan Android Studio
• Projectafhankelijkheden: Navigatiefragment en Navigatie-UI
• Krijg een visueel overzicht van de navigatie van uw app
• De navigatiegrafiek vullen: bestemmingen toevoegen
• Uw fragmentlay-outs bijwerken
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Uw bestemmingen verbinden met acties
• Hosting van de navigatiegrafiek
• Overgangen activeren met NavController
• Meer navigatie toevoegen
• Aangepaste overgangsanimaties maken
• Afsluiten

Tijdens de I / O-conferentie van 2018 heeft Google een nieuwe aanpak aangekondigd voor het ontwikkelen van Android-apps.

De officiële aanbeveling van Google is om een ​​enkele activiteit te maken die dient als het belangrijkste toegangspunt van uw app en vervolgens de rest van de inhoud van uw applicatie als fragmenten te leveren.

Hoewel de gedachte om met al die verschillende fragmenttransacties en levenscycli te jongleren misschien een nachtmerrie klinkt, heeft Google op I / O 2018 ook de Navigation Architecture Component gelanceerd die is ontworpen om u te helpen dit soort enkele activiteitsstructuur aan te nemen.

In dit artikel laten we u zien hoe u de navigatiecomponent aan uw project kunt toevoegen en hoe u deze kunt gebruiken om snel en eenvoudig een toepassing met meerdere activiteiten en meerdere fragmenten te maken, met een beetje hulp van de nieuwe navigatie-editor van Android Studio. Nadat u uw fragmenten hebt gemaakt en verbonden, zullen we de standaard fragmentovergangen van Android verbeteren door de navigatiecomponent en Editor te gebruiken om een ​​reeks volledig aanpasbare overgangsanimaties te maken.

Wat is de navigatiearchitectuurcomponent?

De navigatie-architectuurcomponent maakt deel uit van Android JetPack en helpt u de verschillende routes door uw applicatie te visualiseren en vereenvoudigt het proces van het implementeren van deze routes, met name als het gaat om het beheren van fragmenttransacties.

Als u de component Navigatie wilt gebruiken, moet u een navigatiegrafiek maken. Dit is een XML-bestand dat beschrijft hoe de activiteiten en fragmenten van uw app zich tot elkaar verhouden.

Een navigatiegrafiek bestaat uit:

• bestemmingen: De afzonderlijke schermen waarnaar de gebruiker kan navigeren
• acties: De routes die de gebruiker kan nemen tussen de bestemmingen van uw app

U kunt een visuele weergave van de navigatiegrafiek van uw project bekijken in de navigatie-editor van Android Studio. Hieronder vindt u een navigatiegrafiek bestaande uit drie bestemmingen en drie acties zoals deze wordt weergegeven in de navigatie-editor.

De navigatiecomponent is ontworpen om u te helpen de nieuwe aanbevolen app-structuur van Google te implementeren, waarbij een enkele activiteit de navigatiegrafiek 'host' en al uw bestemmingen als fragmenten worden geïmplementeerd. In dit artikel volgen we deze aanbevolen aanpak en maken we een applicatie die bestaat uit een MainActivity en drie fragmentbestemmingen.

De component Navigatie is echter niet alleen voor toepassingen met deze aanbevolen structuur. Een project kan meerdere navigatiegrafieken hebben en u kunt fragmenten en activiteiten gebruiken als bestemmingen binnen die navigatiegrafieken. Als u een groot, volwassen project migreert naar de component Navigatie, is het wellicht gemakkelijker om de navigatiestromen van uw app in groepen te scheiden, waarbij elke groep bestaat uit een "hoofd" activiteit, enkele gerelateerde fragmenten en een eigen navigatiegrafiek.

De navigatie-editor toevoegen aan Android Studio

Om u te helpen het meeste uit de navigatiecomponent te halen, heeft Android Studio 3.2 Canary en hoger een nieuwe navigatie-editor.

Om deze editor in te schakelen:

• Selecteer "Android Studio> Voorkeuren ..." in de menubalk van Android Studio.
• Kies 'Experimenteel' in het menu aan de linkerkant.
• Als het nog niet is geselecteerd, schakelt u het selectievakje "Navigatie-editor inschakelen" in.

• Klik OK."
• Start Android Studio opnieuw.

Projectafhankelijkheden: Navigatiefragment en Navigatie-UI

Maak een nieuw project met de instellingen van uw keuze, open vervolgens het build.gradle-bestand en voeg navigatie-fragment en navigatie-ui toe als projectafhankelijkheden:

afhankelijkheden {implementatie fileTree (dir: libs, include:) implementatie com.android.support:appcompat-v7:28.0.0 implementatie com.android.support.constraint: constraint-layout: 1.1.3 // Voeg de volgende // implementatie toe "android.arch.navigation: navigatie-fragment: 1.0.0-alpha05" // Navigatie-UI biedt toegang tot enkele helpfuncties // implementatie "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementatie com .android.support: support-v4: 28.0.0 test Implementatie junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Krijg een visueel overzicht van de navigatie van uw app

Een navigatiegrafiek maken:

• Houd Control ingedrukt en klik op de map 'res' van uw project en selecteer 'Nieuw> Android Resource Directory'.
• Open de vervolgkeuzelijst 'Type bron' en kies 'navigatie'.
• Selecteer "OK".
• Houd Ctrl ingedrukt en klik op uw nieuwe map "res / navigation" en selecteer "Nieuw> Navigatiebronbestand".
• Open de vervolgkeuzelijst 'Type bron' en selecteer 'Navigatie'.

• Geef deze bestandsnaam; Ik gebruik 'nav_graph'.
• Klik OK."

Open uw "res / navigation / nav_graph" -bestand en de Navigatie-editor wordt automatisch gestart. Net als de lay-outeditor is de navigatie-editor opgesplitst in tabbladen "Ontwerp" en "Tekst".

Als u het tabblad 'Tekst' selecteert, ziet u de volgende XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigatie ’is het hoofdknooppunt van elke navigatiegrafiek //

Op het tabblad 'Ontwerp' kunt u de navigatie van uw app visueel bouwen en bewerken.

Van links naar rechts bestaat de Navigatie-editor uit:

• Een lijst met bestemmingen: Hierin staan ​​alle bestemmingen die deel uitmaken van deze specifieke navigatiegrafiek, plus de activiteit waar de navigatiegrafiek wordt gehost.
• De grafische editor: De grafische editor biedt een visueel overzicht van alle bestemmingen van de grafiek en de acties die hen verbinden.
• De attributeneditor: Als u een bestemming of een actie selecteert in de Graph Editor, geeft het paneel "Attributen" informatie weer over het momenteel geselecteerde item.

De navigatiegrafiek vullen: bestemmingen toevoegen

Onze navigatiegrafiek is momenteel leeg. Laten we enkele bestemmingen toevoegen.

U kunt activiteiten of fragmenten toevoegen die al bestaan, maar u kunt de navigatiegrafiek ook gebruiken om snel en eenvoudig nieuwe fragmenten te maken:

• Klik op de knop "Nieuwe bestemming" en selecteer "Lege bestemming maken".

• Voer in het veld "Fragmentnaam" de klassenaam van uw fragment in; Ik gebruik 'FirstFragment'.
• Zorg ervoor dat het aankruisvak 'Create layout XML' is ingeschakeld.
• Vul het veld "Fragment lay-outnaam" in; Ik gebruik 'fragment_first'.
• Klik op 'Voltooien'.

Een FirstFragment-subklasse en het bijbehorende "fragment_first.xml" -indelingsresourcebestand worden nu aan uw project toegevoegd. FirstFragment verschijnt ook als een bestemming in de navigatiegrafiek.

Als u FirstFragment selecteert in de Navigatie-editor, geeft het paneel "Kenmerken" enige informatie over deze bestemming weer, zoals de klassennaam en de ID die u gebruikt om naar deze bestemming elders in uw code te verwijzen.

Spoel en herhaal om een ​​SecondFragment en ThirdFragment aan uw project toe te voegen.

Ga naar het tabblad 'Tekst' en u zult zien dat de XML is bijgewerkt om deze wijzigingen weer te geven.

Elke navigatiegrafiek heeft een startbestemming. Dit is het scherm dat wordt weergegeven wanneer de gebruiker uw app start. In de bovenstaande code gebruiken we FirstFragment als startbestemming van onze app. Als u overschakelt naar het tabblad 'Ontwerp', ziet u een huispictogram, dat ook FirstFragment markeert als de startbestemming van de grafiek.

Als u liever een ander startpunt gebruikt, selecteert u de betreffende activiteit of het betreffende fragment en selecteert u vervolgens 'Stel startbestemming in' in het deelvenster 'Kenmerken'.

U kunt deze wijziging ook op codeniveau aanbrengen:

Uw fragmentlay-outs bijwerken

Nu hebben we onze bestemmingen, laten we enkele elementen van de gebruikersinterface toevoegen zodat het altijd duidelijk is welk fragment we momenteel bekijken.

Ik ga het volgende aan elk fragment toevoegen:

• Een tekstweergave die de titel van het fragment bevat
• Een knop waarmee de gebruiker van het ene fragment naar het volgende kan navigeren

Hier is de code voor elk lay-outresourcebestand:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Uw bestemmingen verbinden met acties

De volgende stap is het koppelen van onze bestemmingen via acties.

U kunt een actie in de Navigatie-editor maken met eenvoudig slepen en neerzetten:

• Zorg ervoor dat het tabblad 'Ontwerp' van de Editor is geselecteerd.
• Beweeg over de rechterkant van de bestemming die u wilt navigeren van, wat in dit geval FirstFragment is. Er moet een cirkel verschijnen.
• Klik en sleep uw cursor naar de bestemming waar u naartoe wilt navigeren naar, wat SecondFragment is. Er moet een blauwe lijn verschijnen. Wanneer SecondFragment blauw is gemarkeerd, laat u de cursor los om een ​​koppeling tussen deze bestemmingen te maken.

Er zou nu een actiepijl moeten zijn die FirstFragment aan SecondFragment koppelt. Klik om deze pijl te selecteren en het deelvenster "Kenmerk" wordt bijgewerkt om wat informatie over deze actie weer te geven, inclusief de door het systeem toegewezen ID.

Deze wijziging wordt ook weerspiegeld in de XML van de navigatiegrafiek:

… … …

Spoel en herhaal om een ​​actie te maken die SecondFragment aan ThirdFragment koppelt en een actie die ThirdFragment aan FirstFragment koppelt.

Hosting van de navigatiegrafiek

De navigatiegrafiek geeft een visuele weergave van de bestemmingen en acties van uw app, maar voor het activeren van deze acties is enige aanvullende code vereist.

Nadat u een navigatiegrafiek hebt gemaakt, moet u deze in een activiteit hosten door een NavHostFragment toe te voegen aan het lay-outbestand van die activiteit. Dit NavHostFragment biedt een container waar de navigatie kan plaatsvinden en is ook verantwoordelijk voor het in en uitwisselen van fragmenten terwijl de gebruiker door uw app navigeert.

Open het bestand "activity_main.xml" van uw project en voeg een NavHostFragment toe.

<? xml version = "1.0" encoding = "utf-8"?> // Maak een fragment dat zal werken als NavHostFragment //

In de bovenstaande code kan app: defaultNavHost = "true" de Navigation Host onderscheppen telkens wanneer op de knop "Terug" van het systeem wordt gedrukt, zodat de app altijd voldoet aan de navigatie die wordt beschreven in uw navigatiegrafiek.

Overgangen activeren met NavController

Vervolgens moeten we een NavController implementeren, een nieuw onderdeel dat verantwoordelijk is voor het beheer van het navigatieproces binnen een NavHostFragment.

Om naar een nieuw scherm te navigeren, moet u een NavController ophalen met behulp van Navigation.findNavController, roept u de methode navigate () aan en geeft u vervolgens de ID van de bestemming waarnaar u navigeert of de actie die u wilt oproepen. Ik roep bijvoorbeeld "action_firstFragment_to_secondFragment" in, waarmee de gebruiker van FirstFragment naar SecondFragment wordt getransporteerd:

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

De gebruiker gaat naar een nieuw scherm door op een knop te klikken, dus we moeten ook een OnClickListener implementeren.

Na het aanbrengen van deze wijzigingen zou FirstFragment er ongeveer zo uit moeten zien:

android.os.bundle importeren; android.support.annotation.NonNull importeren; android.support.annotation.Nullable importeren; android.support.v4.app.Fragment importeren; android.view.LayoutInflater importeren; android.view.View importeren; android.view.ViewGroup importeren; android.widget.Button importeren; androidx.navigation.NavController importeren; androidx.navigation.Navigation importeren; public class FirstFragment breidt Fragment uit {public FirstFragment () {} @Override public void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle saveInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle saveInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (nieuw View.OnClickListener () {@ Override openbare nietige onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment); }}); }}

Open vervolgens uw MainActivity en voeg het volgende toe:

• NavigationView.OnNavigationItemSelectedListener: Een luisteraar voor het afhandelen van gebeurtenissen op navigatie-items
• SecondFragment.OnFragmentInteractionListener: Een interface die werd gegenereerd toen u SecondFragment maakte via de Navigatie-editor

MainActivity moet ook de methode onFragmentInteraction () implementeren, die communicatie tussen het fragment en de activiteit mogelijk maakt.

android.support.v7.app.AppCompatActivity importeren; android.os.bundle importeren; android.net.Uri importeren; android.view.MenuItem importeren; android.support.design.widget.NavigationView importeren; android.support.annotation.NonNull importeren; openbare klasse MainActivity breidt AppCompatActivity implementeert NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override beveiligde nietig op onCreate (Bundle saveInstanceState) {super.onCreate (opgeslagenInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Meer navigatie toevoegen

Om de rest van de navigatie van onze app te implementeren, moeten we het onViewCreated-blok kopiëren en plakken en een paar tweaks maken, zodat we verwijzen naar de juiste knopwidgets en navigatie-acties.

Open uw SecondFragment en voeg het volgende toe:

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

Werk vervolgens het onViewCreated-blok van ThirdFragment bij:

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

Vergeet ten slotte niet om de ThirdFragment.OnFragmentInteractionListener-interface toe te voegen aan uw MainActivity:

openbare klasse MainActivity breidt AppCompatActivity implementeert NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Voer dit project uit op uw Android-apparaat of Android Virtual Device (AVD) en test de navigatie. U zou tussen alle drie fragmenten moeten kunnen navigeren door op de verschillende knoppen te klikken.

Aangepaste overgangsanimaties maken

Op dit moment kan de gebruiker door uw app bewegen, maar de overgang tussen elk fragment is behoorlijk abrupt. In dit laatste deel zullen we de component Navigatie gebruiken om een ​​andere animatie aan elke overgang toe te voegen, zodat ze soepeler verlopen.

Elke animatie die u wilt gebruiken, moet worden gedefinieerd in een eigen animatieresourcebestand, in een map 'res / anim'. Als uw project nog geen map 'res / anim' bevat, moet u er een maken:

• Houd Control ingedrukt en klik op de map 'res' van uw project en selecteer 'Nieuw> Android Resource Directory'.
• Geef deze map de naam 'anim'.
• Open de vervolgkeuzelijst 'Type bron' en kies 'anim'.
• Klik OK."

Laten we beginnen met het definiëren van een vervagende animatie:

• Houd Control ingedrukt en klik op de map 'res / anim' van uw project.
• Selecteer "Nieuw> Animatiebronbestand."
• Geef dit bestand de naam 'fade_out'.
• Open uw "fade_out" -bestand en voeg het volgende toe:

Herhaal de bovenstaande stappen om een ​​tweede animatiebronbestand te maken, genaamd "slide_out_left", en voeg vervolgens het volgende toe:

Maak een derde bestand met de naam "slide_out_right" en voeg het volgende toe:

U kunt deze animaties nu toewijzen aan uw acties via de Navigatie-editor.Om de vervagende animatie af te spelen wanneer de gebruiker van FirstFragment naar SecondFragment navigeert:

• Open uw navigatiegrafiek en zorg ervoor dat het tabblad "Ontwerp" is geselecteerd.
• Klik om de actie te selecteren die FirstFragment aan SecondFragment koppelt.
• Klik in het paneel "Kenmerken" om het gedeelte "Overgangen" uit te vouwen. Standaard moet elke vervolgkeuzelijst in dit gedeelte worden ingesteld op 'Geen'.
• Open de vervolgkeuzelijst "Enter", die de animatie regelt die wordt afgespeeld wanneer SecondFragment naar de bovenkant van de achterste stapel gaat. Selecteer de animatie "fade_out".

Als u overschakelt naar het tabblad 'Ontwerp', ziet u dat deze animatie is toegevoegd aan 'action_firstFragment_to_secondFragment'.

Voer het bijgewerkte project uit op uw Android-apparaat of AVD. U zou nu een fade-out effect moeten tegenkomen wanneer u van FirstFragment naar SecondFragment navigeert.

Als u nog eens naar het deelvenster "Kenmerken" kijkt, ziet u dat "Enter" niet het enige deel van de overgang is waar u een animatie kunt toepassen. U kunt ook kiezen uit:

• Uitgang: De animatie die wordt afgespeeld wanneer een fragment de stapel verlaat
• Pop Enter: De animatie die wordt afgespeeld wanneer een fragment bovenaan de stapel wordt weergegeven
• Pop Exit: De animatie die wordt afgespeeld wanneer een fragment naar de onderkant van de stapel wordt overgezet

Probeer te experimenteren door verschillende animaties toe te passen op verschillende delen van uw overgangen. Je kunt het voltooide project ook downloaden van GitHub.

Afsluiten

In dit artikel hebben we gekeken hoe u de component Navigatiearchitectuur kunt gebruiken om een ​​toepassing met meerdere activiteiten en meerdere fragmenten te maken, compleet met aangepaste overgangsanimaties. Heeft de navigatiecomponent u overtuigd om uw projecten naar dit soort applicatiestructuur te migreren? Laat het ons weten in de reacties hieronder!