Indhold

• Hvad er navigationsarkitekturkomponenten?
• Føjelse af navigationseditor til Android Studio
• Projektafhængighed: Navigation Fragment og Navigation UI
• Få en visuel oversigt over din apps navigation
• Udfyldning af navigationsgrafen: Tilføjelse af destinationer
• Opdatering af dine fragmentlayouts
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Forbinder dine destinationer med handlinger
• Hosting af navigationsgrafen
• Udløser overgange med NavController
• Tilføjelse af mere navigation
• Oprettelse af tilpassede overgangsanimationer
• Afslutter

I løbet af 2018's I / O-konference annoncerede Google en ny tilgang til udvikling af Android-apps.

Googles officielle anbefaling er at oprette en enkelt aktivitet, der fungerer som din app's vigtigste indgangspunkt og derefter levere resten af ​​din applikations indhold som fragmenter.

Mens tanken om at jonglere med alle disse forskellige fragmenttransaktioner og livscyklusser muligvis kan lyde som et mareridt, lancerede Google ved I / O 2018 også Navigation Architecture Component, som er designet til at hjælpe dig med at indføre denne form for enkelt aktivitetsstruktur.

I denne artikel viser vi dig, hvordan du tilføjer navigationskomponenten til dit projekt, og hvordan du kan bruge den til hurtigt og nemt at oprette et enkelt-aktivitetsprogram med flere fragmenter med lidt hjælp fra Android Studios nye Navigationseditor. Når du har oprettet og forbundet dine fragmenter, forbedrer vi Android's standardfragmentovergange ved hjælp af Navigationskomponenten og Editoren til at oprette en række fuldt tilpassbare overgangsanimationer.

Hvad er navigationsarkitekturkomponenten?

En del af Android JetPack, navigationsarkitekturkomponenten hjælper dig med at visualisere de forskellige ruter gennem din applikation og forenkler processen med at implementere disse ruter, især når det drejer sig om styring af fragmenttransaktioner.

For at bruge navigationskomponenten skal du oprette en navigationsgraf, som er en XML-fil, der beskriver, hvordan din apps aktiviteter og fragmenter forholder sig til hinanden.

En navigationsgraf består af:

• destinationer: De individuelle skærme, som brugeren kan navigere til
• Handlinger: De ruter, som brugeren kan tage mellem din apps destinationer

Du kan se en visuel repræsentation af dit projekts navigationsgraf i Android Studios navigationseditor. Nedenfor finder du en navigationsgraf bestående af tre destinationer og tre handlinger, som den vises i navigationseditoren.

Navigationskomponenten er designet til at hjælpe dig med at implementere Googles nye anbefalede appstruktur, hvor en enkelt aktivitet "er vært" for navigationsgrafen, og alle dine destinationer implementeres som fragmenter. I denne artikel følger vi denne anbefalede tilgang og opretter en applikation, der består af en MainActivity og tre fragmentdestinationer.

Navigationskomponenten er dog ikke kun for applikationer, der har denne anbefalede struktur. Et projekt kan have flere navigationsgrafer, og du kan bruge fragmenter og aktiviteter som destinationer inden for disse navigationsgrafer. Hvis du migrerer et stort, modent projekt til navigationskomponenten, kan det være lettere at opdele din apps navigationsstrømme i grupper, hvor hver gruppe består af en "hoved" -aktivitet, nogle relaterede fragmenter og sin egen navigationsgraf.

Føjelse af navigationseditor til Android Studio

For at hjælpe dig med at få mest muligt ud af Navigation-komponenten har Android Studio 3.2 Canary og nyere en ny Navigation Editor.

Sådan aktiveres denne editor:

• Vælg "Android Studio> Præferencer ..." på menulinjen i Android Studio.
• I menuen til venstre skal du vælge "Eksperimentel."
• Hvis det ikke allerede er markeret, skal du markere afkrydsningsfeltet "Aktivér navigationseditor".

• Klik på "OK."
• Genstart Android Studio.

Projektafhængighed: Navigation Fragment og Navigation UI

Opret et nyt projekt med de valgte indstillinger, åbn derefter dens build.gradle-fil og tilføj navigationsfragment og navigation-ui som projektafhængighed:

afhængigheder {implementeringsfilTree (dir: libs, inkluderer:) implementering com.android.support:appcompat-v7:28.0.0 implementering com.android.support.constraint: constraint-layout: 1.1.3 // Tilføj følgende // implementering "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI giver adgang til nogle hjælpefunktioner // implementering "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementering 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 }

Få en visuel oversigt over din apps navigation

Sådan opretter du en navigationsgrafik:

• Kontrol-klik på dit projekt "res" -katalog, og vælg "Ny> Android Resource Directory."
• Åbn rullemenuen "Ressource type", og vælg "navigation."
• Vælg "OK."
• Kontrol-klik på din nye "res / navigation" -katalog, og vælg "Ny> Navigation ressourcefil."
• Åbn rullemenuen "Ressource type", og vælg "Navigation."

• Giv dette filnavn; Jeg bruger "nav_graph."
• Klik på "OK."

Åbn din “res / navigation / nav_graph” -fil, og navigationseditoren starter automatisk. I lighed med layouteditoren er Navigationseditor opdelt i fanerne "Design" og "Tekst".

Hvis du vælger fanen "Tekst", ser du følgende XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'er rodnoden for hver navigationsgraf //

Fanen "Design" er det sted, hvor du kan oprette og redigere din apps navigation visuelt.

Fra venstre til højre består navigationseditoren af:

• En liste over destinationer: Dette viser alle de destinationer, der udgør denne specifikke navigationsgraf, plus den aktivitet, hvor navigationsgrafen er vært.
• Graf Editor: Grafeditoren giver et visuelt overblik over alle grafens destinationer og handlingerne, der forbinder dem.
• Attributtredigeringen: Hvis du vælger en destination eller en handling i Graph Editor, viser panelet "Attributter" oplysninger om det aktuelt valgte element.

Udfyldning af navigationsgrafen: Tilføjelse af destinationer

Vores navigationsgrafik er i øjeblikket tom. Lad os tilføje nogle destinationer.

Du kan tilføje aktiviteter eller fragmenter, der allerede findes, men du kan også bruge navigationsgrafen til hurtigt og nemt at oprette nye fragmenter:

• Giv knappen "Ny destination" et klik, og vælg "Opret blank destination."

• I feltet "Fragment Name" skal du indtaste dit fragments klassens navn; Jeg bruger "FirstFragment."
• Sørg for, at afkrydsningsfeltet "Opret layout XML" er markeret.
• Udfyld feltet "Fragment Layout Name"; Jeg bruger "fragment_first."
• Klik på "Udfør."

En FirstFragment-underklasse og den tilsvarende “fragment_first.xml” -layout-ressourcefil tilføjes nu til dit projekt. FirstFragment vises også som en destination i navigationsgrafen.

Hvis du vælger FirstFragment i Navigationseditoren, viser panelet "Attributter" nogle oplysninger om denne destination, f.eks. Dens klassens navn og det ID, du vil bruge til at henvise til denne destination andetsteds i din kode.

Skyl og gentag for at tilføje en SecondFragment og ThirdFragment til dit projekt.

Skift til fanen "Tekst", så ser du, at XML er blevet opdateret for at afspejle disse ændringer.

Hver navigationsgrafik har en startdestination, som er den skærm, der vises, når brugeren starter din app. I ovenstående kode bruger vi FirstFragment som vores app's startdestination. Hvis du skifter til fanen "Design", vil du bemærke et husikon, der også markerer FirstFragment som grafens startdestination.

Hvis du foretrækker at bruge et andet udgangspunkt, skal du vælge den pågældende aktivitet eller fragment og derefter vælge "Indstil startdestination" i panelet "Attributter".

Alternativt kan du foretage denne ændring på kodeniveau:

Opdatering af dine fragmentlayouts

Nu har vi vores destinationer, lad os tilføje nogle brugergrænsefladeelementer, så det altid er klart, hvilket fragment vi i øjeblikket ser.

Jeg vil tilføje følgende til hvert fragment:

• En TextView, der indeholder fragmentets titel
• En knap, der giver brugeren mulighed for at navigere fra det ene fragment til det næste

Her er koden for hver layoutressourcefil:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Forbinder dine destinationer med handlinger

Det næste trin er at linke vores destinationer via handlinger.

Du kan oprette en handling i Navigationseditoren ved hjælp af simpelt træk og slip:

• Sørg for, at redaktørens fane "Design" er valgt.
• Hold markøren over højre side af den destination, du vil navigere fra, som i dette tilfælde er FirstFragment. En cirkel skal vises.
• Klik og træk din markør til den destination, du vil navigere i til, som er SecondFragment. En blå linje skal vises. Når SecondFragment er fremhævet blå, frigør markøren for at oprette et link mellem disse destinationer.

Der skal nu være en handlingspil, der forbinder FirstFragment til SecondFragment. Klik for at vælge denne pil, og "Attribut" -panelet opdateres for at vise nogle oplysninger om denne handling, herunder dens systemtildelte ID.

Denne ændring afspejles også i navigationsgrafs XML:

… … …

Skyl og gentag for at oprette en handling, der forbinder SecondFragment til ThirdFragment og en handling, der forbinder ThirdFragment med FirstFragment.

Hosting af navigationsgrafen

Navigationsgrafen giver en visuel repræsentation af din apps destinationer og handlinger, men for at påkalde disse handlinger kræves en vis yderligere kode.

Når du har oprettet en navigationsgraf, skal du være vært for den i en aktivitet ved at tilføje en NavHostFragment til den aktivitets layoutfil. Dette NavHostFragment leverer en beholder, hvor navigationen kan forekomme og vil også være ansvarlig for at udskifte fragmenter ind og ud, når brugeren navigerer rundt i din app.

Åbn dit projekts "Activity_main.xml" -fil, og tilføj et NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Opret et fragment, der fungerer som NavHostFragment //

I ovennævnte kode tillader app: defaultNavHost = ”true” navigationsværten at aflytte, når der trykkes på systemets ”Tilbage” -knap, så appen altid hæder den navigation, der er beskrevet i din navigationsgraf.

Udløser overgange med NavController

Dernæst er vi nødt til at implementere en NavController, som er en ny komponent, der er ansvarlig for at styre navigationsprocessen i et NavHostFragment.

For at navigere til en ny skærm skal du hente en NavController vha. Navigation.findNavController, kalde metoden Navigere () og derefter videresende enten ID'et for den destination, du navigerer til, eller den handling, du vil påkalde. For eksempel påkalder jeg “action_firstFragment_to_secondFragment”, som vil transportere brugeren fra FirstFragment til SecondFragment:

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

Brugeren flytter til en ny skærm ved at klikke på en knap, så vi er også nødt til at implementere en OnClickListener.

Efter at have foretaget disse ændringer, skal FirstFragment se sådan ud:

import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import androidx.navigation.NavController; import androidx.navigation.Navigation; public class FirstFragment udvider Fragment {public FirstFragment () {} @Override offentligt tomrum onCreate (Bundle gemtInstanceState) {super.onCreate (gemtInstanceState); if (getArguments ()! = null) {}} @Override offentlig visning onCreateView (LayoutInflater oppustning, ViewGroup container, Bundle gemtInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override offentligt tomrum påViewCreated (@NonNull View-visning, @Nullable Bundle gemtInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (ny View.OnClickListener () {@Override offentligt tomrum onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naondragment) }}); }}

Åbn derefter din MainActivity og tilføj følgende:

• NavigationView.OnNavigationItemSelectedListener: En lytter til håndtering af begivenheder på navigationselementer
• SecondFragment.OnFragmentInteractionListener: En grænseflade, der blev genereret, da du oprettede SecondFragment via navigationseditoren

MainActivity er også nødt til at implementere onFragmentInteraction () -metoden, der tillader kommunikation mellem fragmentet og aktiviteten.

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull; offentlig klasse MainActivity udvider AppCompatActivity implementerer NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protection void onCreate (Bundle gemtInstanceState) {super.onCreate (gemtInstanceState); setContentView (R.layout.activity_main); } @Override offentlig boolsk onNavigationItemSelected (@NonNull MenuItem-vare) {return falsk; } @Override offentligt ugyldigt onFragmentInteraction (Uri uri) {}}

Tilføjelse af mere navigation

For at implementere resten af ​​vores apps navigation skal vi bare kopiere / indsætte onViewCreated-blokken og foretage et par justeringer, så vi refererer til de rigtige knapwidgets og navigationshandlinger.

Åbn dit SecondFragment, og tilføj følgende:

@Override offentligt tomrum påViewCreated (@NonNull View view, @Nullable Bundle gemtInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (ny View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.naFragment_naFragment) }}); }

Opdater derefter ThirdFragment's onViewCreated-blok:

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

Til sidst glem ikke at tilføje ThirdFragment.OnFragmentInteractionListener-grænsefladen til din MainActivity:

public class MainActivity udvider AppCompatActivity implementerer NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Kør dette projekt på din Android-enhed eller Android Virtual Device (AVD) og test navigationen. Du skal være i stand til at navigere mellem alle tre fragmenter ved at klikke på de forskellige knapper.

Oprettelse af tilpassede overgangsanimationer

På dette tidspunkt kan brugeren bevæge sig rundt i din app, men overgangen mellem hvert fragment er temmelig pludselig. I dette sidste afsnit bruger vi navigationskomponenten til at tilføje en anden animation til hver overgang, så de sker mere glat.

Hver animation, du vil bruge, skal defineres i sin egen animationsressourcefil i et “res / anim” -katalog. Hvis dit projekt ikke allerede indeholder et "res / anim" -mappe, skal du oprette et:

• Kontrol-klik på projektets "res" -mappe, og vælg "Ny> Android Resource Directory."
• Giv dette bibliotek navnet "anim."
• Åbn rullemenuen "Ressource type", og vælg "anim."
• Klik på "OK."

Lad os starte med at definere en fade-out animation:

• Kontrol-klik på dit projekt “res / anim” -katalog.
• Vælg "Ny> Animationsressourcefil."
• Giv denne fil navnet "fade_out."
• Åbn din "fade_out" -fil, og tilføj følgende:

Gentag ovenstående trin for at oprette en anden animationsressourcefil, kaldet "slide_out_left", og tilføj derefter følgende:

Opret en tredje fil med navnet "slide_out_right" og tilføj følgende:

Du kan nu tildele disse animationer til dine handlinger via Navigationseditor.Sådan spiller du fade-out-animationen, når brugeren navigerer fra FirstFragment til SecondFragment:

• Åbn din navigationsgrafik, og sørg for, at fanen "Design" er valgt.
• Klik for at vælge handlingen, der forbinder FirstFragment til SecondFragment.
• Klik på "Attributter" -panelet for at udvide afsnittet "Overgange". Som standard skal enhver dropdown i dette afsnit indstilles til “Ingen.”
• Åbn rullemenuen "Enter", der kontrollerer animationen, der afspilles hver gang SecondFragment overgår til toppen af ​​bagsiden. Vælg animationen "fade_out".

Hvis du skifter til fanen "Design", vil du se, at denne animation er føjet til "action_firstFragment_to_secondFragment."

Kør det opdaterede projekt på din Android-enhed eller AVD. Du skal nu støde på en fade-out effekt, hver gang du navigerer fra FirstFragment til SecondFragment.

Hvis du ser et andet på panelet "Attributter", ser du, at "Enter" ikke er den eneste del af overgangen, hvor du kan anvende en animation. Du kan også vælge mellem:

• Afslut: Animationen, der afspilles, når et fragment forlader stakken
• Pop Enter: Animationen, der afspilles, når et fragment udfylder toppen af ​​stakken
• Pop Exit: Animationen, der afspilles, når et fragment skifter til bunden af ​​stakken

Prøv at eksperimentere ved at anvende forskellige animationer på forskellige dele af dine overgange. Du kan også downloade det afsluttede projekt fra GitHub.

Afslutter

I denne artikel kiggede vi på, hvordan du kan bruge Navigation Architecture-komponenten til at oprette et enkelt-aktivitetsprogram med flere fragmenter komplet med brugerdefinerede overgangsanimationer. Har navigationskomponenten overbevist dig om at migrere dine projekter til denne form for applikationsstruktur? Fortæl os det i kommentarerne herunder!