Problemfri fragmenter: Bruker Android's Navigation Architecture Component

Innhold

Hva er navigasjonsarkitekturkomponenten?
Legge til navigasjonsredigereren i Android Studio
Prosjektavhengigheter: Navigasjonsfragment og navigasjonsgrensesnitt
Få en visuell oversikt over navigasjonen til appen din
Populere navigasjonsgrafen: Legge til destinasjoner
Oppdaterer fragmentoppsettene dine
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Koble dine destinasjoner med handlinger
Vert for navigasjonsgrafen
Utløser overganger med NavController
Legger til mer navigasjon
Lage tilpassede overgangsanimasjoner
Innpakking

I løpet av 2018s I / O-konferanse kunngjorde Google en ny tilnærming for å utvikle Android-apper.

Googles offisielle anbefaling er å lage en enkelt aktivitet som fungerer som appens hovedinngangspunkt, og deretter levere resten av applikasjonens innhold som fragmenter.

Mens tanken på å sjonglere med alle de forskjellige fragmenttransaksjonene og livssyklusene kan høres ut som et mareritt, lanserte Google på I / O 2018 også Navigation Architecture Component som er utviklet for å hjelpe deg med å ta i bruk denne typen enkeltaktivitetsstrukturer.

I denne artikkelen viser vi deg hvordan du legger til navigasjonskomponenten til prosjektet ditt, og hvordan du kan bruke den til å raskt og enkelt lage en applikasjon med flere aktiviteter, flere fragmenter, med litt hjelp fra Android Studios nye Navigasjonsredigeringsprogram. Når du har opprettet og koblet fragmentene dine, forbedrer vi Android's standardfragmentoverganger ved å bruke Navigasjonskomponenten og Editoren for å lage en rekke fulltilpassbare overgangsanimasjoner.

Hva er navigasjonsarkitekturkomponenten?

En del av Android JetPack, Navigation Architecture Component, hjelper deg å visualisere de forskjellige rutene gjennom applikasjonen din og forenkler prosessen med å implementere disse rutene, spesielt når det gjelder å styre fragmenttransaksjoner.

Hvis du vil bruke navigasjonskomponenten, må du lage en navigasjonsgraf, som er en XML-fil som beskriver hvordan appens aktiviteter og fragmenter forholder seg til hverandre.

En navigasjonsgraf består av:

destinasjoner: De enkelte skjermbildene brukeren kan navigere til
handlinger: Rutene brukeren kan ta mellom appens destinasjoner

Du kan se en visuell representasjon av prosjektets navigasjonsgraf i Android Studios navigasjonsredigeringsprogram. Nedenfor finner du en navigasjonsgraf som består av tre destinasjoner og tre handlinger slik den vises i navigasjonsredigereren.

Navigasjonskomponenten er designet for å hjelpe deg med å implementere Googles nye anbefalte appstruktur, der en enkelt aktivitet "vert" for navigasjonsgrafen, og alle destinasjonene dine implementeres som fragmenter. I denne artikkelen følger vi denne anbefalte tilnærmingen og oppretter en applikasjon som består av en MainActivity og tre fragmentmål.

Navigasjonskomponenten er imidlertid ikke bare for applikasjoner som har denne anbefalte strukturen. Et prosjekt kan ha flere navigasjonsgrafer, og du kan bruke fragmenter og aktiviteter som destinasjoner i disse navigasjonsgrafene. Hvis du migrerer et stort, modent prosjekt til navigasjonskomponenten, kan det være lettere å dele appens navigasjonsstrømmer inn i grupper, der hver gruppe består av en "hoved" -aktivitet, noen relaterte fragmenter og sin egen navigasjonsgraf.

Legge til navigasjonsredigereren i Android Studio

For å hjelpe deg med å få mest mulig ut av navigasjonskomponenten har Android Studio 3.2 Canary og nyere en ny navigasjonsredigerer.

Slik aktiverer du denne redigereren:

Velg "Android Studio> Innstillinger ..." fra menylinjen til Android Studio.
I menyen til venstre velger du “Eksperimentell.”
Hvis det ikke allerede er valgt, merker du av for Aktiver navigasjonsredigeringsboksen.

Klikk "OK."
Start Android Studio på nytt.

Prosjektavhengigheter: Navigasjonsfragment og navigasjonsgrensesnitt

Lag et nytt prosjekt med innstillingene du ønsker, åpne deretter build.gradle-filen og legg til navigasjonsfragment og navigasjons-ui som prosjektavhengighet:

avhengigheter {implementeringsfilTree (dir: libs, inkluderer:) implementering com.android.support:appcompat-v7:28.0.0 implementering com.android.support.constraint: constraint-layout: 1.1.3 // Legg til følgende // implementering "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI gir tilgang til noen hjelperfunksjoner // 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 visuell oversikt over navigasjonen til appen din

Slik lager du en navigasjonsgraf:

Kontroll-klikk på prosjektets "res" -katalog og velg "New> Android Resource Directory."
Åpne rullegardinmenyen “Ressurstype” og velg “navigasjon.”
Velg "OK."
Kontroll-klikk på den nye "res / navigation" -katalogen og velg "New> Navigation resource file."
Åpne rullegardinmenyen “Ressurstype” og velg “Navigering.”

Gi dette filnavnet; Jeg bruker "nav_graph."
Klikk "OK."

Åpne filen “res / navigation / nav_graph”, og navigasjonsredigereren starter automatisk. I likhet med layoutredigeringsprogrammet er Navigasjonsredigereren delt inn i fanene "Design" og "Tekst".

Hvis du velger "Tekst" -fanen, ser du følgende XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'er rotnoden til hver navigasjonsgraf //

Fanen "Design" er der du kan lage og redigere appens navigasjon visuelt.

Fra venstre til høyre består navigasjonsredigereren av:

En destinasjonsliste: Denne viser alle destinasjonene som utgjør denne spesifikke navigasjonsgrafen, pluss aktiviteten der navigasjonsgrafen er vert.
Graph Editor: Graph Editor gir en visuell oversikt over alle grafens destinasjoner og handlingene som forbinder dem.
Attributtredigereren: Hvis du velger en destinasjon eller en handling i Graph Editor, vil "Attributter" -panelet vise informasjon om det valgte elementet.

Populere navigasjonsgrafen: Legge til destinasjoner

Navigasjonsgrafen vår er for øyeblikket tom. La oss legge til noen destinasjoner.

Du kan legge til aktiviteter eller fragmenter som allerede eksisterer, men du kan også bruke navigasjonsgrafen til å raskt og enkelt lage nye fragmenter:

Gi knappen "Ny destinasjon" et klikk, og velg "Opprett tom destinasjon."

Skriv inn fragmentets klassens navn i feltet "Fragment Name". Jeg bruker "FirstFragment."
Kontroller at avmerkingsboksen "Opprett layout XML" er valgt.
Fullfør feltet "Fragment Layout Name"; Jeg bruker "fragment_first."
Klikk "Fullfør."

En FirstFragment underklasse og tilsvarende "fragment_first.xml" layout ressursfil vil nå bli lagt til prosjektet ditt. FirstFragment vises også som en destinasjon i navigasjonsgrafen.

Hvis du velger FirstFragment i Navigasjonsredigereren, vil "Attributter" -panelet vise noe informasjon om dette destinasjonen, for eksempel klassens navn og ID-en du bruker for å referere til denne destinasjonen andre steder i koden.

Skyll og gjenta for å legge til et SecondFragment og ThirdFragment til prosjektet ditt.

Bytt til kategorien Tekst, så ser du at XML er oppdatert for å gjenspeile disse endringene.

Hver navigasjonsgraf har et startmål, som er skjermen som vises når brukeren lanserer appen din. I koden ovenfor bruker vi FirstFragment som appens startdestinasjon. Hvis du bytter til fanen "Design", vil du legge merke til et husikon, som også markerer FirstFragment som grafens startdestinasjon.

Hvis du foretrekker å bruke et annet utgangspunkt, velger du aktiviteten eller fragmentet det gjelder, og velger deretter "Angi startdestinasjon" fra "Attributter" -panelet.

Alternativt kan du gjøre denne endringen på kodenivå:

Oppdaterer fragmentoppsettene dine

Nå har vi våre destinasjoner, la oss legge til noen elementer i brukergrensesnittet, slik at det alltid er klart hvilket fragment vi ser for øyeblikket.

Jeg skal legge til følgende i hvert fragment:

En tekstvisning som inneholder fragmentets tittel
En knapp som lar brukeren navigere fra det ene fragmentet til det neste

Her er koden for hver layoutressursfil:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Koble dine destinasjoner med handlinger

Neste trinn er å koble reisemålene våre via handlinger.

Du kan opprette en handling i Navigasjonsredigereren ved å bruke enkle dra og slipp:

Forsikre deg om at Editor-kategorien "Design" er valgt.
Hold musepekeren over høyre side av destinasjonen du vil navigere fra, som i dette tilfellet er FirstFragment. En sirkel skal vises.
Klikk og dra markøren til destinasjonen du vil navigere til, som er SecondFragment. En blå linje skal vises. Når SecondFragment er uthevet blått, slipper du markøren for å opprette en kobling mellom disse destinasjonene.

Det skal nå være en handlingspil som knytter FirstFragment til SecondFragment. Klikk for å velge denne pilen, og "Attributt" -panelet vil oppdatere for å vise litt informasjon om denne handlingen, inkludert dens systemtilordnede ID.

Denne endringen gjenspeiles også i navigasjonsgrafens XML:

… … …

Skyll og gjenta for å lage en handling som knytter SecondFragment til ThirdFragment og en handling som kobler ThirdFragment til FirstFragment.

Vert for navigasjonsgrafen

Navigasjonsgrafen gir en visuell representasjon av appens destinasjoner og handlinger, men å innkalle disse handlingene krever litt tilleggskode.

Når du har laget en navigasjonsgraf, må du være vert for den i en aktivitet ved å legge til en NavHostFragment i den aktivitets layoutfil. Dette NavHostFragment gir en beholder der navigasjonen kan skje, og vil også være ansvarlig for å bytte fragmenter inn og ut når brukeren navigerer rundt i appen din.

Åpne prosjektets "Activity_main.xml" -fil og legg til en NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Lag et fragment som vil fungere som NavHostFragment //

I koden over gir app: defaultNavHost = "true" navigasjonsverten å avskjære når du trykker på systemets "Tilbake" -knapp, så appen respekterer alltid navigasjonen som er beskrevet i navigasjonsgrafen.

Utløser overganger med NavController

Deretter må vi implementere en NavController, som er en ny komponent som er ansvarlig for å styre navigasjonsprosessen i et NavHostFragment.

For å navigere til et nytt skjermbilde, må du hente en NavController ved hjelp av Navigation.findNavController, ringe navigeringsmetoden () og deretter passere IDen til destinasjonen du navigerer til eller handlingen du vil påkalle. For eksempel påkaller jeg “action_firstFragment_to_secondFragment,” som vil transportere brukeren fra FirstFragment, til SecondFragment:

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

Brukeren vil flytte til et nytt skjermbilde ved å klikke på en knapp, så vi må også implementere en OnClickListener.

Etter å ha gjort disse endringene, bør FirstFragment se slik ut:

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 utvider Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override offentlig visning påCreateView (LayoutInflater oppblåser, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override offentlig tomrom onViewCreated (@NonNull View-visning, @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.naondragmentFrament) }}); }}

Deretter åpner du MainActivity og legger til følgende:

NavigationView.OnNavigationItemSelectedListener: En lytter for å håndtere hendelser på navigasjonselementer
SecondFragment.OnFragmentInteractionListener: Et grensesnitt som ble generert da du opprettet SecondFragment via Navigasjonsredigereren

MainActivity må også implementere onFragmentInteraction () -metoden, som tillater kommunikasjon mellom 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 utvider AppCompatActivity implementerer NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protection void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override offentlig boolsk onNavigationItemSelected (@NonNull MenuItem-vare) {return falsk; } @Overr offentlig annullering påFragmentInteraction (Uri uri) {}}

Legger til mer navigasjon

For å implementere resten av appens navigasjon, trenger vi bare å kopiere / lime inn onViewCreated-blokken og lage noen få justeringer slik at vi refererer til de riktige knappedelene og navigasjonshandlingene.

Åpne SecondFragment og legg til følgende:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {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_ }}); }

Oppdater deretter ThirdFragments onViewCreated-blokk:

@Override public void onViewCreated (@NonNull View 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.nafragment.nafragment) }}); }

Til slutt, ikke glem å legge til ThirdFragment.OnFragmentInteractionListener-grensesnittet til MainActivity:

offentlig klasse MainActivity utvider AppCompatActivity implementerer NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Kjør dette prosjektet på din Android-enhet eller Android Virtual Device (AVD) og test navigasjonen. Du skal kunne navigere mellom alle tre fragmentene ved å klikke på de forskjellige knappene.

Lage tilpassede overgangsanimasjoner

På dette tidspunktet kan brukeren bevege seg rundt appen din, men overgangen mellom hvert fragment er ganske brå. I denne siste delen bruker vi navigasjonskomponenten til å legge til en annen animasjon til hver overgang, slik at de skjer jevnere.

Hver animasjon du vil bruke, må defineres i sin egen animasjonsressursfil, i en “res / anim” -katalog. Hvis prosjektet ikke allerede inneholder en "res / anim" -katalog, må du opprette en:

Kontroll-klikk på prosjektets “res” -mappe og velg “New> Android Resource Directory.”
Gi denne katalogen navnet "anim."
Åpne rullegardinmenyen “Ressurstype”, og velg “animasjon”.
Klikk "OK."

La oss starte med å definere en fade-out animasjon:

Kontrollklikk på prosjektets "res / anim" -katalog.
Velg "Ny> ressursfil for animasjon."
Gi denne filen navnet "fade_out."
Åpne "fade_out" -filen din, og legg til følgende:

Gjenta trinnene ovenfor for å opprette en andre animasjonsressursfil, kalt "slide_out_left," og legg deretter til følgende:

Lag en tredje fil, kalt "slide_out_right", og legg til følgende:

Du kan nå tilordne disse animasjonene til handlingene dine via Navigasjonsredigereren.Slik spiller du fade-out-animasjonen når brukeren navigerer fra FirstFragment til SecondFragment:

Åpne navigasjonsgrafen og sørg for at fanen "Design" er valgt.
Klikk for å velge handlingen som kobler FirstFragment til SecondFragment.
I "Attributter" -panelet klikker du for å utvide delen "Overganger". Som standard skal hvert nedtrekksområde i denne delen settes til "Ingen."
Åpne rullegardinmenyen “Enter”, som kontrollerer animasjonen som spilles når SecondFragment overføres til toppen av bakbunken. Velg animasjonen “fade_out”.

Hvis du bytter til "Design" -fanen, vil du se at denne animasjonen er lagt til "action_firstFragment_to_secondFragment."

Kjør det oppdaterte prosjektet på din Android-enhet eller AVD. Du bør nå få en fade-out effekt når du navigerer fra FirstFragment til SecondFragment.

Hvis du ser på "Attributter" -panelet, ser du at "Enter" ikke er den eneste delen av overgangen der du kan bruke en animasjon. Du kan også velge mellom:

Exit: Animasjonen som spilles av når et fragment forlater bunken
Pop Enter: Animasjonen som spilles av når et fragment fyller toppen av stabelen
Pop Exit: Animasjonen som spilles av når et fragment går over til bunnen av bunken

Prøv å eksperimentere ved å bruke forskjellige animasjoner på forskjellige deler av overgangene dine. Du kan også laste ned det ferdige prosjektet fra GitHub.

Innpakking

I denne artikkelen så vi på hvordan du kan bruke Navigation Architecture-komponenten til å lage et enkelt-aktivitetsprogram med flere fragment, komplett med tilpassede overgangsanimasjoner. Har navigasjonskomponenten overbevist deg om å migrere prosjektene dine til denne typen applikasjonsstrukturer? Gi oss beskjed i kommentarene nedenfor!