Vaikeat fragmentit: Androidin navigointiarkkitehtuurikomponentin käyttäminen

Sisältö

Mikä on navigointiarkkitehtuurikomponentti?
Navigointieditorin lisääminen Android Studioon
Projektiriippuvuudet: Navigointipala ja Navigointiliittymä
Hanki visuaalinen kuvaus sovelluksesi navigoinnista
Navigointikaavion täyttö: Kohteiden lisääminen
Päivitetään fragmenttiasettelut
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Kohteiden yhdistäminen toimiin
Navigointikaavion ylläpito
Siirtymien käynnistäminen NavControllerilla
Lisää navigointi
Mukautettujen siirtymäanimaatioiden luominen
Käärimistä

Vuoden 2018 I / O-konferenssin aikana Google ilmoitti uuden lähestymistavan Android-sovellusten kehittämiseen.

Googlen virallinen suositus on luoda yksi aktiviteetti, joka toimii sovelluksesi päälähtökohtana, ja toimittaa sitten loput sovelluksesi sisällöstä katkelmina.

Vaikka ajatus kaikkien näiden erilaisten fragmenttitapahtumien ja elinkaarien hyppäämisestä voi kuulostaa painajaiselta, I / O 2018 Google julkaisi myös navigointiarkkitehtuurikomponentin, jonka tarkoituksena on auttaa sinua ottamaan käyttöön tällainen yksittäinen aktiviteettirakenne.

Tässä artikkelissa osoitamme sinulle, kuinka voit lisätä navigointikomponentin projektiisi ja kuinka voit luoda sen nopeasti ja helposti luomaan yhden toiminnan, useita osia sisältävän sovelluksen, jolla on vähän apua Android Studion uudesta navigointieditorista. Kun olet luonut ja yhdistänyt fragmenttisi, parannamme Androidin tavallisia fragmenttisiirtymiä käyttämällä Navigaatiokomponenttia ja Editoria luomaan valikoiman täysin muokattavia siirtymäanimaatioita.

Mikä on navigointiarkkitehtuurikomponentti?

Osa Android JetPackia, navigointiarkkitehtuurikomponentti auttaa sinua visualisoimaan erilaisia reittejä sovelluksesi kautta ja yksinkertaistaa näiden reittien toteuttamisprosessia, etenkin kun kyse on fragmentti-tapahtumien hallinnasta.

Navigointikomponentin käyttämiseksi sinun on luotava navigointikaavio, joka on XML-tiedosto, joka kuvaa, kuinka sovelluksesi aktiviteetit ja fragmentit liittyvät toisiinsa.

Navigointikaavio koostuu:

kohteita: Yksittäiset näytöt, joihin käyttäjä voi navigoida
Toimet: Reitit, jotka käyttäjä voi kuljettaa sovelluksesi kohteiden välillä

Voit tarkastella visuaalista projektisi navigointikaaviota Android Studion navigointieditorissa. Alta löydät navigointikaavion, joka koostuu kolmesta kohdasta ja kolmesta toiminnosta sellaisena kuin se näkyy navigointieditorissa.

Navigointikomponentti on suunniteltu auttamaan sinua ottamaan käyttöön Googlen uusi suositeltu sovellusrakenne, jossa yksi toiminto "isännöi" navigointikaaviota ja kaikki määränpäät toteutetaan katkelmina. Seuraamme tässä artikkelissa tätä suositeltua lähestymistapaa ja luomme sovelluksen, joka koostuu MainActivity-toiminnasta ja kolmesta fragmenttikohteesta.

Navigointikomponentti ei kuitenkaan ole vain sovelluksissa, joilla on tämä suositeltu rakenne. Projektissa voi olla useita navigointikaavioita, ja voit käyttää fragmentteja ja aktiviteetteja kohteina kyseisissä navigointikaavioissa. Jos siirrät suuren, kypsän projektin navigointikomponenttiin, voi olla helpompaa erottaa sovelluksesi navigointivirtat ryhmiin, joissa kukin ryhmä koostuu päätoiminnosta, joistain liittyvistä palasista ja omasta navigointikaaviosta.

Navigointieditorin lisääminen Android Studioon

Android Studio 3.2 Canary ja uudemmat sisältävät uuden navigointieditorin, jotta saat parhaan hyödyn navigointikomponentista.

Ota tämä editori käyttöön:

Valitse Android Studio -valikkoriviltä ”Android Studio> Asetukset…”.
Valitse vasemmanpuoleisesta valikosta ”Kokeellinen”.
Jos sitä ei ole vielä valittu, valitse Ota käyttöön navigointieditori -valintaruutu.

Napsauta “OK”.
Käynnistä Android Studio uudelleen.

Projektiriippuvuudet: Navigointipala ja Navigointiliittymä

Luo uusi projekti valitsemillasi asetuksilla, avaa sen sitten build.gradle-tiedosto ja lisää navigointi-fragmentti ja navigointi-ui projekti riippuvuuksiksi:

riippuvuudet {toteutustiedostoTree (oh: libs, include:) toteutus com.android.support:appcompat-v7:28.0.0 toteutus com.android.support.constraint: rajoitus-asettelu: 1.1.3 // Lisää seuraava // toteutus "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI tarjoaa pääsyn joihinkin avustajatoimintoihin // toteutus "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implement 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 }

Hanki visuaalinen kuvaus sovelluksesi navigoinnista

Navigointikaavion luominen:

Napsauta Control-napsauttamalla projektisi ”res” -hakemistoa ja valitse ”Uusi> Android Resource Directory”.
Avaa avattava Resurssityyppi ja valitse ”navigointi”.
Valitse ”OK”.
Napsauta Control-painiketta napsauttamalla uutta ”res / navigointi” -hakemistoa ja valitsemalla ”New> Navigation resource file”.
Avaa avattava Resurssityyppi ja valitse Navigointi.

Anna tämä tiedostonimi; Käytän “nav_graph”.
Napsauta “OK”.

Avaa “res / navigation / nav_graph” -tiedostosi, ja Navigointieditori käynnistyy automaattisesti. Samoin kuin asettelueditori, navigointieditori on jaettu ”Suunnittelu” ja “Teksti” -välilehtiin.

Jos valitset ”Teksti” -välilehden, näet seuraavan XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigointi ”on jokaisen navigointikaavion juurisolmu //

Suunnittelu-välilehti on paikka, jossa voit rakentaa ja muokata sovelluksesi navigointia visuaalisesti.

Vasemmalta oikealle, navigointieditori koostuu:

Kohdeluettelo: Tässä luetellaan kaikki määränpäät, jotka muodostavat tämän navigointikaavion, sekä toiminta, jossa navigointikaavio isännöi.
Kaavioeditori: Kaavioeditori tarjoaa visuaalisen yleiskuvan kaikista kuvaajan kohteista ja niitä yhdistävistä toimista.
Ominaisuuksien toimittaja: Jos valitset määränpään tai toiminnon graafisessa muokkausohjelmassa, Attribuutit-paneeli näyttää tietoja nykyisin valitusta kohdasta.

Navigointikaavion täyttö: Kohteiden lisääminen

Navigointikaaviomme on tällä hetkellä tyhjä. Lisäämme joitain kohteita.

Voit lisätä jo olemassa olevia aktiviteetteja tai fragmentteja, mutta voit myös käyttää navigointikaaviota nopeasti ja helposti luoda uusia fragmentteja:

Napsauta ”Uusi kohde” -painiketta napsautuksella ja valitse ”Luo tyhjä kohde”.

Kirjoita fragmentin luokan nimi Fragmentin nimi -kenttään; Käytän ”FirstFragment” -sovellusta.
Varmista, että ”Luo asettelu XML” -valintaruutu on valittuna.
Täytä ”Fragment Layout Name” -kenttä; Käytän ”fragment_first”.
Napsauta Valmis.

FirstFragment-alaluokka ja vastaava ”fragment_first.xml” -asetustiedostot lisätään nyt projektiisi. FirstFragment näkyy myös kohteena navigointikaaviossa.

Jos valitset navigointieditorissa FirstFragmentin, Attribuutit-paneeli näyttää joitain tietoja tästä määräpaikasta, kuten sen luokan nimi ja tunnus, jota käytät viittaamaan tähän määränpäähän muualla koodissa.

Huuhtele ja toista lisätäksesi toisen fragmentin ja kolmannen fragmentin projektiisi.

Vaihda “Teksti” -välilehteen ja näet, että XML on päivitetty vastaamaan näitä muutoksia.

Jokaisella navigointikaaviolla on aloituskohde, joka on näyttö, joka näytetään, kun käyttäjä käynnistää sovelluksesi. Yllä olevassa koodissa käytämme FirstFragment-sovellusta sovelluksen lähtökohteena. Jos siirryt Suunnittelu-välilehteen, huomaat talokuvaketta, joka merkitsee myös FirstFragmentin kaavion aloituskohteeksi.

Jos haluat käyttää toista lähtöpistettä, valitse kyseinen aktiviteetti tai fragmentti ja valitse sitten ”Määritä aloituskohde” Attribuutit-paneelista.

Vaihtoehtoisesti voit tehdä tämän muutoksen kooditasolla:

Päivitetään fragmenttiasettelut

Nyt meillä on määränpäät, lisätään joitain käyttöliittymäelementtejä, jotta on aina selvää, mitä fragmenttia me parhaillaan katsomme.

Aion lisätä seuraavan jokaiseen fragmenttiin:

Tekstinäkymä, joka sisältää fragmentin otsikon
Painike, jonka avulla käyttäjä voi navigoida fragmentista toiseen

Tässä on kunkin asetteluresurssitiedoston koodi:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Kohteiden yhdistäminen toimiin

Seuraava vaihe on kohteidemme linkittäminen toimien avulla.

Voit luoda toiminnon navigointieditorissa käyttämällä yksinkertaista vetämistä ja pudottamista:

Varmista, että toimittajan Suunnittelu-välilehti on valittu.
Vie hiiri sen määränpään oikealle puolelle, johon haluat navigoida alkaen, joka tässä tapauksessa on FirstFragment. Ympyrän tulisi näkyä.
Napsauta ja vedä kohdistinta kohteeseen, johon haluat navigoida että, joka on SecondFragment. Sinisen viivan tulisi näkyä. Kun SecondFragment on korostettu sinisellä, vapauta kohdistin luodaksesi linkin näiden kohteiden välillä.

Nyt pitäisi olla toimintanuoli, joka linkittää FirstFragmentin SecondFragmenttiin. Napsauta valitaksesi tämän nuolen, ja Attribuutti-paneeli päivittyy, jotta näyttöön tulee joitain tietoja toiminnosta, mukaan lukien sen järjestelmälle osoitettu tunnus.

Tämä muutos heijastuu myös navigointikaavion XML-tiedostoon:

… … …

Huuhtele ja toista luodaksesi toiminnon, joka yhdistää SecondFragmentin ThirdFragmenttiin ja toiminnon, joka yhdistää ThirdFragmentin FirstFragmenttiin.

Navigointikaavion ylläpito

Navigointikaavio tarjoaa visuaalisen esityksen sovelluksesi kohteista ja toiminnoista, mutta näiden toimintojen käynnistäminen vaatii joitain lisäkoodeja.

Kun olet luonut navigointikaavion, sinun on isännöidä sitä aktiviteetin sisällä lisäämällä NavHostFragment kyseisen aktiviteetin asettelutiedostoon. Tämä NavHostFragment tarjoaa säiliön, jossa navigointi voi tapahtua, ja vastaa myös fragmenttien vaihtamisesta sisään ja ulos, kun käyttäjä navigoi sovelluksesi ympärillä.

Avaa projektisi aktiviteetti_main.xml-tiedosto ja lisää NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Luo fragmentti, joka toimii NavHostFragmenttinä //

Yllä olevassa koodissa app: defaultNavHost = ”true” sallii navigointipalvelimen siepata aina, kun järjestelmän “Takaisin” -painiketta painetaan, joten sovellus kunnioittaa navigointikaaviossa kuvattua navigointia.

Siirtymien käynnistäminen NavControllerilla

Seuraavaksi meidän on otettava käyttöön NavController, joka on uusi komponentti, joka vastaa NavHostFragmentin navigointiprosessin hallinnassa.

Siirtyäksesi uuteen näyttöön, sinun on haettava NavController Navigation.findNavController -sovelluksella, soita navigate () -menetelmälle ja lähetä sitten joko määränpään tunnus, johon navigoit tai toiminto, johon haluat käynnistää. Esimerkiksi vetoan ”action_firstFragment_to_secondFragment”, joka kuljettaa käyttäjän FirstFragmentista SecondFragmenttiin:

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

Käyttäjä siirtyy uudelle näytölle napsauttamalla painiketta, joten meidän on myös otettava käyttöön OnClickListener.

Näiden muutosten tekemisen jälkeen FirstFragmentin pitäisi näyttää noin:

tuo android.os.Bundle; tuo android.support.annotation.NonNull; Tuo android.support.annotation.Nollable; tuo android.support.v4.app.Fragment; tuo android.view.LayoutInflater; Tuo android.view.View; tuo android.view.ViewGroup; tuo android.widget.Button; tuo androidx.navigation.NavController; tuo androidx.navigation.Navigation; julkisen luokan FirstFragment laajentaa fragmentin {public FirstFragment () {} @Orride public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = tyhjä) {}} @Orride public View onCreateView (LayoutInflater inflater, ViewGroup -säiliö, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Näytä julkinen tyhjä onViewCreated (@NonNull View -näkymä, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (uusi View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigointi.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id) }}); }}

Avaa seuraavaksi MainActivity ja lisää seuraava:

NavigationView.OnNavigationItemSelectedListener: Kuuntelija navigointikohteiden tapahtumien käsittelemiseksi
SecondFragment.OnFragmentInteractionListener: Käyttöliittymä, joka luotiin, kun loit SecondFragmentin navigointieditorin kautta

MainActivity täytyy myös toteuttaa onFragmentInteraction () -menetelmä, joka mahdollistaa viestinnän fragmentin ja toiminnan välillä.

tuo android.support.v7.app.AppCompatActivity; tuo android.os.Bundle; tuo android.net.Uri; tuo android.view.MenuItem; Tuo android.support.design.widget.NavigationView; tuo android.support.annotation.NonNull; julkisen luokan MainActivity laajentaa AppCompatActivity -työkaluja NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@On yli suojattu tyhjä onCreate (Bundle SaveInstanceState) {super.onCreate (tallennettuInstanceState); setContentView (R.layout.activity_main); } @Orride public boolean onNavigationItemSelected (@NonNull MenuItem -kohde) {return false; } @Kulje julkinen mitätön onFragmentInteraction (Uri uri) {}}

Lisää navigointi

Jotta voimme toteuttaa muun sovelluksen navigoinnin, meidän täytyy vain kopioida / liittää onViewCreated-lohko ja tehdä muutama parannus, jotta viittaamme oikeisiin painikewidgetteihin ja navigointitoimintoihin.

Avaa SecondFragment ja lisää seuraava:

@Näytä julkinen tyhjä onViewCreated (@NonNull View -näkymä, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (uusi View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigointi.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.Firection; }}); }

Päivitä sitten ThirdFragmentin onViewCreated-lohko:

@Näytä julkinen tyhjä onViewCreated (@NonNull View -näkymä, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (uusi View.OnClickListener () {@Orride public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id) }}); }

Lopuksi, älä unohda lisätä ThirdFragment.OnFragmentInteractionListener -käyttöliittymää MainAktiviteettiisi:

julkisen luokan MainActivity laajentaa AppCompatActivity -työkaluja NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Suorita tämä projekti Android-laitteellasi tai Android Virtual Devicellä (AVD) ja testaa navigointi. Sinun pitäisi pystyä liikkumaan kaikkien kolmen fragmentin välillä napsauttamalla eri painikkeita.

Mukautettujen siirtymäanimaatioiden luominen

Tässä vaiheessa käyttäjä voi liikkua sovelluksesi ympäri, mutta siirtyminen fragmenttien välillä on aika äkillinen. Tässä viimeisessä osassa käytämme navigointikomponenttia lisätäksesi eri animaation jokaiseen siirtymään, jotta ne tapahtuvat sujuvammin.

Jokainen käytettävä animaatio on määritettävä omassa animaatioresurssitiedostossaan res / anim-hakemistossa. Jos projektissasi ei vielä ole res / anim-hakemistoa, sinun on luotava se:

Napsauta Control-napsauttamalla projektisi res-kansiota ja valitsemalla Uusi> Android Resource Directory.
Anna tälle hakemistolle nimi “anim”.
Avaa avattava Resurssityyppi ja valitse “anim”.
Napsauta “OK”.

Aloitetaan määrittelemällä häivytysanimaatio:

Napsauta Control-napsauttamalla projektisi “res / anim” -hakemistoa.
Valitse ”Uusi> Animaatioresurssitiedosto”.
Anna tälle tiedostolle nimi “fade_out”.
Avaa fade_out-tiedosto ja lisää seuraava:

Toista yllä olevat vaiheet luodaksesi toinen animaatioresurssitiedosto, nimeltään “slide_out_left”, ja lisää sitten seuraava:

Luo kolmas tiedosto nimeltä “slide_out_right” ja lisää seuraava:

Voit nyt määrittää nämä animaatiot toimintoihisi navigointieditorin avulla.Fade-out-animaation toistaminen, kun käyttäjä navigoi FirstFragmentista SecondFragmenttiin:

Avaa navigointikaavio ja varmista, että “Suunnittelu” -välilehti on valittu.
Napsauta valitaksesi toiminnon, joka linkittää FirstFragmentin SecondFragmenttiin.
Napsauta ”Attribuutit” -paneelissa laajentaa “Transitions” -osaa. Oletusarvon mukaan tämän osan jokaisen pudotusvalinnan on oltava ”Ei mitään”.
Avaa “Enter” -pudotusvalikko, joka ohjaa animaatiota, joka toistetaan aina, kun SecondFragment siirtyy takaosan pinoon. Valitse “fade_out” -animaatio.

Jos vaihdat “Suunnittelu” -välilehteen, huomaat, että tämä animaatio on lisätty ”action_firstFragment_to_secondFragment” -kohtaan.

Suorita päivitetty projekti Android-laitteellasi tai AVD: llä. Sinun pitäisi nyt kohdata häivytysvaikutus, kun siirryt FirstFragmentista SecondFragmenttiin.

Jos tarkastelet Attribuutit-paneelia uudelleen, huomaat, että Enter ei ole ainoa osa siirtymistä, jossa voit käyttää animaatiota. Voit myös valita seuraavista:

exit: Animaatio, joka toistetaan, kun fragmentti poistuu pinosta
Pop Enter: Animaatio, joka toistetaan, kun fragmentti täyttää pinon yläosan
Pop-poistuminen: Animaatio, joka toistetaan, kun fragmentti siirtyy pinon alaosaan

Kokeile kokeilla soveltamalla erilaisia animaatioita siirtymien eri osiin. Voit myös ladata valmis projektin GitHubista.

Käärimistä

Tässä artikkelissa tarkasteltiin kuinka voit käyttää navigointiarkkitehtuurikomponenttia luomaan yhden toiminnan, useita osia sisältävän sovelluksen, joka on varustettu mukautetuilla siirtymäanimaatioilla. Onko Navigation-komponentti vakuuttanut sinut siirtämään projektisi tällaiseen sovellusrakenteeseen? Kerro meille alla olevissa kommenteissa!