Turinys

• Kas yra navigacijos architektūros komponentas?
• Naršymo rengyklės pridėjimas prie „Android Studio“
• Projekto priklausomybės: Naršymo fragmentas ir Naršymo sąsaja
• Gaukite vaizdinę programos naršymo apžvalgą
• Naršymo schemos užpildymas: paskirties vietų pridėjimas
• Atnaujinamas fragmentų išdėstymas
• „Fragment_first.xml“
• Fragment_second.xml
• „Fragment_third.xml“
• Tikslų susiejimas su veiksmais
• Naršymo grafiko talpinimas
• Suaktyvinti perėjimus naudojant „NavController“
• Pridedama daugiau navigacijos
• Sukurti pasirinktines perėjimo animacijas
• Apvyniojimas

2018 m. I / O konferencijoje „Google“ paskelbė naują „Android“ programų kūrimo metodą.

Oficiali „Google“ rekomendacija yra sukurti vieną veiklą, kuri yra pagrindinis jūsų programos įėjimo taškas, o likusį programos turinį pateikti kaip fragmentus.

Nors mintis žongliruoti visais skirtingais fragmentų sandoriais ir gyvenimo ciklais gali skambėti kaip košmaras, „I / O 2018“ „Google“ taip pat pradėjo „Navigacijos architektūros komponentą“, kuris yra skirtas padėti jums pritaikyti tokio tipo vieną veiklos struktūrą.

Šiame straipsnyje jums parodysime, kaip pridėti naršymo komponentą prie savo projekto ir kaip jį panaudoti greitai ir lengvai kurdami vienos veiklos, kelių fragmentų programą, naudodami nedidelę „Android Studio“ naršymo redagavimo priemonės pagalbą. Sukūrę ir prijungę fragmentus, patobulinsime standartinius „Android“ fragmentų perėjimus, naudodami naršymo komponentą ir redaktorių, kad sukurtume visiškai tinkinamų perėjimų animaciją.

Kas yra navigacijos architektūros komponentas?

„Android JetPack“ dalis, navigacijos architektūros komponentas, padeda jūsų programai vizualizuoti įvairius maršrutus ir supaprastina šių maršrutų diegimo procesą, ypač kai reikia tvarkyti fragmentų operacijas.

Norėdami naudoti naršymo komponentą, turėsite sukurti naršymo schemą, kuri yra XML failas, apibūdinantis, kaip jūsų programos veikla ir fragmentai yra susiję vienas su kitu.

Naršymo schemą sudaro:

• Paskirties vietos: Atskiri ekranai, į kuriuos vartotojas gali patekti
• Veiksmai: Maršrutai, kuriuos vartotojas gali pasirinkti tarp jūsų programos tikslų

Galite pamatyti vaizdą apie projekto naršymo schemą „Android Studio“ naršymo redagavimo priemonėje. Žemiau rasite naršymo schemą, susidedančią iš trijų tikslų ir trijų veiksmų, kaip parodyta Naršymo rengyklėje.

Naršymo komponentas yra skirtas padėti jums įgyvendinti naują „Google“ rekomenduojamą programos struktūrą, kurioje viena veikla „priglobia“ naršymo schemą, o visos jūsų tikslai yra įgyvendinami kaip fragmentai. Šiame straipsnyje mes laikysimės šio rekomenduojamo požiūrio ir sukursime programą, kurią sudaro „MainActivity“ ir trys fragmentų vietos.

Tačiau naršymo komponentas yra ne tik toms programoms, kurios turi šią rekomenduojamą struktūrą. Projekte gali būti keli naršymo grafikai, o tuose naršymo grafikuose kaip paskirties vietas galite naudoti fragmentus ir veiklą. Jei perkeliate didelį, brandų projektą į naršymo komponentą, gali būti lengviau atskirti programos naršymo srautus į grupes, kur kiekvieną grupę sudaro „pagrindinė“ veikla, keli susiję fragmentai ir atskiras naršymo grafikas.

Naršymo rengyklės pridėjimas prie „Android Studio“

Norėdami padėti maksimaliai išnaudoti naršymo komponentą, „Android Studio 3.2 Canary“ ir naujesnėse versijose yra naujas naršymo rengyklė.

Norėdami įgalinti šį redaktorių:

• „Android Studio“ meniu juostoje pasirinkite „Android Studio> Preferences…“.
• Kairiajame meniu pasirinkite „Eksperimentinis“.
• Jei jis dar nepasirinktas, pažymėkite žymimąjį laukelį „Įgalinti naršymo rengyklę“.

• Spustelėkite „Gerai“.
• Iš naujo paleiskite „Android Studio“.

Projekto priklausomybės: Naršymo fragmentas ir Naršymo sąsaja

Sukurkite naują projektą pasirinktais parametrais, tada atidarykite jo failą build.gradle ir pridėkite naršymo fragmentą ir navigacijos ui kaip projekto priklausomybes:

priklausomybės {diegimo failasTree (režimas: libs, įtraukti:) diegimas com.android.support:appcompat-v7:28.0.0 diegimas com.android.support.constraint: apribojimų išdėstymas: 1.1.3 // Įrašykite šį // įgyvendinimas "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI suteikia prieigą prie kai kurių pagalbinių funkcijų // įgyvendinimas "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implement com .android.support: support-v4: 28.0.0 testElemento diegimas: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Gaukite vaizdinę programos naršymo apžvalgą

Norėdami sukurti naršymo schemą:

• Valdiklyje spustelėkite projekto „res“ katalogą ir pasirinkite „Naujas>„ Android “išteklių katalogas“.
• Atidarykite išskleidžiamąjį meniu „Šaltinio tipas“ ir pasirinkite „navigacija“.
• Pasirinkite „Gerai“.
• Valdiklyje spustelėkite naują katalogą „Res / navigacija“ ir pasirinkite „Naujas> Naršymo šaltinio failas“.
• Atidarykite išskleidžiamąjį meniu „Šaltinio tipas“ ir pasirinkite „Naršymas“.

• Duokite šio failo vardą; Aš naudoju „nav_graph“.
• Spustelėkite „Gerai“.

Atidarykite failą „res / navigation / nav_graph“, o Navigacijos redaktorius paleis automatiškai. Panašiai kaip išdėstymo rengyklę, naršymo rengyklė yra padalinta į skirtukus „Dizainas“ ir „Tekstas“.

Jei pasirinksite skirtuką „Tekstas“, pamatysite šį XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigacija “yra kiekvieno naršymo grafiko šaknis mazgas //

Skirtuke „Dizainas“ galite sukurti ir redaguoti programos naršymą vizualiai.

Naršymo rengyklę iš kairės į dešinę sudaro:

• Tikslų sąrašas: Čia išvardijamos visos paskirties vietos, kurios sudaro šią konkrečią naršymo schemą, taip pat veikla, kurioje yra naršymo schema.
• Diagramų rengyklė: Diagramos rengyklėje pateikiama vaizdinė visų grafiko tikslų ir juos jungiančių veiksmų apžvalga.
• Atributų redaktorius: Jei grafikos rengyklėje pasirinksite tikslą ar veiksmą, skydelyje „Atributai“ bus rodoma informacija apie šiuo metu pasirinktą elementą.

Naršymo schemos užpildymas: paskirties vietų pridėjimas

Šiuo metu mūsų naršymo schema tuščia. Pridėkime keletą vietų.

Galite pridėti jau esamų veiklų ar fragmentų, bet taip pat galite naudoti naršymo schemą, kad greitai ir lengvai sukurtumėte naujus fragmentus:

• Spustelėkite mygtuką „Naujas tikslas“ ir pasirinkite „Sukurti tuščią vietą“.

• Lauke „Fragment Name“ įveskite savo fragmento klasės pavadinimą; Aš naudoju „FirstFragment“.
• Įsitikinkite, kad pažymėtas žymimasis laukelis „Kurti išdėstymo XML“.
• Užpildykite lauką „Fragment Mayout Name“; Aš naudoju „fragment_first“.
• Spustelėkite „Baigti“.

Dabar prie jūsų projekto bus pridėtas „FirstFragment“ poklasis ir atitinkamas „fragment_first.xml“ išdėstymo šaltinio failas. „FirstFragment“ taip pat pasirodys kaip paskirties vieta naršymo schemoje.

Jei Naršymo rengyklėje pasirinksite „FirstFragment“, skydelyje „Atributai“ bus rodoma tam tikra informacija apie šį kelionės tikslą, pavyzdžiui, klasės pavadinimas ir ID, kurį naudosite nurodydami šią vietą kitur savo kode.

Nuplaukite ir pakartokite, kad pridėtumėte „SecondFragment“ ir „ThirdFragment“ prie savo projekto.

Perjunkite į skirtuką „Tekstas“ ir pamatysite, kad XML buvo atnaujintas, kad atspindėtų šiuos pakeitimus.

Kiekvienas naršymo grafikas turi pradžios vietą, ty ekraną, kuris rodomas vartotojui paleidus jūsų programą. Aukščiau pateiktame kode mes naudojame „FirstFragment“ kaip programos pradžios vietą. Jei perjungsite į skirtuką „Dizainas“, pastebėsite namo piktogramą, kuri taip pat žymi „FirstFragment“ kaip grafiko pradžios vietą.

Jei norėtumėte naudoti kitą pradžios tašką, tada pasirinkite aptariamą veiklą ar fragmentą ir skydelyje „Atributai“ pasirinkite „Nustatyti pradžios tikslą“.

Arba galite atlikti šį pakeitimą kodo lygiu:

Atnaujinamas fragmentų išdėstymas

Dabar turime savo paskirties vietas, pridėkime kelis vartotojo sąsajos elementus, kad visada būtų aišku, kurį fragmentą šiuo metu žiūrime.

Prie kiekvieno fragmento pridėsiu:

• „TextView“, kuriame yra fragmento pavadinimas
• Mygtukas, kuris leis vartotojui pereiti nuo vieno fragmento prie kito

Štai kiekvieno išdėstymo šaltinio failo kodas:

„Fragment_first.xml“

Fragment_second.xml

„Fragment_third.xml“

Tikslų susiejimas su veiksmais

Kitas žingsnis yra mūsų tikslų susiejimas veiksmais.

Naršymo rengyklėje galite sukurti veiksmą naudodami paprastą vilkimą:

• Įsitikinkite, kad pasirinktas redaktoriaus skirtukas „Dizainas“.
• Užveskite pelės žymeklį virš dešinės kelionės tikslo pusės, kurioje norite naršyti iš, kuris šiuo atveju yra „FirstFragment“. Turėtų pasirodyti ratas.
• Spustelėkite ir nuvilkite žymeklį iki kelionės tikslo, į kurį norite naršyti į, kuris yra „SecondFragment“. Turėtų atsirasti mėlyna linija. Kai „SecondFragment“ paryškinamas mėlynai, atleiskite žymeklį, kad sukurtumėte ryšį tarp šių vietų.

Dabar turėtų būti veiksmo rodyklė, susiejanti „FirstFragment“ su „SecondFragment“. Spustelėkite, kad pasirinktumėte šią rodyklę, ir skydelis „Atributas“ bus atnaujintas, kad būtų rodoma tam tikra informacija apie šį veiksmą, įskaitant jo sistemai priskirtą ID.

Šis pokytis taip pat atsispindi Naršymo schemos XML:

… … …

Nuplaukite ir pakartokite, kad sukurtumėte veiksmą, susiejantį „SecondFragment“ su „ThirdFragment“, ir veiksmą, susiejantį „ThirdFragment“ su „FirstFragment“.

Naršymo grafiko talpinimas

Naršymo schema pateikia vaizdinį programos tikslų ir veiksmų vaizdą, tačiau norint iškviesti šiuos veiksmus, reikia turėti papildomą kodą.

Sukūrę naršymo schemą, turite ją priglobti veikloje, pridėdami „NavHostFragment“ prie tos veiklos išdėstymo failo. Šis „NavHostFragment“ pateikia konteinerį, kuriame gali vykti naršymas, taip pat bus atsakingas už fragmentų keitimą į vidų ir į išorę, kai vartotojas naršys po jūsų programą.

Atidarykite projekto failą „activity_main.xml“ ir pridėkite „NavHostFragment“.

<? xml version = "1.0" encoding = "utf-8"?> // Sukurkite fragmentą, kuris veiks kaip „NavHostFragment“ //

Aukščiau pateiktame kode programa: defaultNavHost = „true“ leidžia „Navigation Host“ perimti kiekvieną kartą, kai paspaudžiamas sistemos mygtukas „Atgal“, todėl programa visada gerbia navigaciją, aprašytą jūsų naršymo schemoje.

Suaktyvinti perėjimus naudojant „NavController“

Toliau turime įdiegti „NavController“ - naują komponentą, atsakingą už navigacijos „NavHostFragment“ proceso valdymą.

Norėdami pereiti į naują ekraną, turite nuskaityti „NavController“ naudodami „Navigation.findNavController“, paskambinti navigacijos () metodu, tada perduoti arba kelionės tikslo, į kurį naršote, ID, arba veiksmą, kurį norite paskatinti. Pavyzdžiui, aš raginu „action_firstFragment_to_secondFragment“, kuris perkels vartotoją iš „FirstFragment“ į „SecondFragment“:

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

Vartotojas pereis į naują ekraną spustelėjęs mygtuką, todėl mes taip pat turime įdiegti „OnClickListener“.

Atlikę šiuos pakeitimus, „FirstFragment“ turėtų atrodyti taip:

importuoti android.os.Bundle; importuoti „android.support.annotation.NonNull“; importuoti android.support.annotation.Nenable; importuoti „android.support.v4.app.Fragment“; importuoti „android.view.LayoutInflater“; importuoti android.view.View; importuoti „android.view.ViewGroup“; importuoti android.widget.Button; importuoti androidx.navigation.NavController; importuoti androidx.navigation.Navigation; viešosios klasės „FirstFragment“ išplečia fragmentą {public FirstFragment () {} @Atšaukti viešą tuštumą onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Oreride public View onCreateView („LayoutInflater“ pripūtimas, „ViewGroup“ talpykla, „Bundle savedInstanceState“) {return inflater.inflate (R.layout.fragment_first, container, false); } @Atšaukti viešą tuštumą onViewCreated (@NonNull View vaizdas, @Nullable Bundle savedInstanceState) {Mygtuko mygtukas = (mygtukas) view.findViewById (R.id.button); button.setOnClickListener (nauja peržiūra.OnClickListener () {@Oreride public void onClick (View v)) {NavController navController = Navigacija.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id) }}); }}

Tada atidarykite „MainActivity“ ir pridėkite:

• „NavigationView.OnNavigationItemSelectedListener“: Klausiklis, skirtas tvarkyti navigacijos elementų įvykius
• „SecondFragment.OnFragmentInteractionListener“: Sąsaja, sugeneruota sukūrus „SecondFragment“ per naršymo rengyklę

„MainActivity“ taip pat turi įdiegti onFragmentInteraction () metodą, kuris leidžia susisiekti tarp fragmento ir veiklos.

importuoti „android.support.v7.app.AppCompatActivity“; importuoti android.os.Bundle; importuoti android.net.Uri; import android.view.MenuItem; importuoti „android.support.design.widget.NavigationView“; importuoti „android.support.annotation.NonNull“; viešosios klasės „MainActivity“ išplečia „AppCompatActivity“ diegimo programas „NavigationView.OnNavigationItemSelectedListener“, „SecondFragment.OnFragmentInteractionListener“ {@Orderideide void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); „setContentView“ (R.layout.activity_main); } @Atšaukti viešąją loginę vertę onNavigationItemSelected (elementas @NonNull MenuItem) {return false; } @Atšaukti viešą negaliojimą dėl „FragmentInteraction“ („Uri uri“) {}}

Pridedama daugiau navigacijos

Kad įgyvendintume likusią programos naršymo dalį, mums tereikia nukopijuoti / įklijuoti „onViewCreated“ bloką ir atlikti keletą taisymų, kad būtų nuorodos į teisingus mygtukų valdiklius ir naršymo veiksmus.

Atidarykite „SecondFragment“ ir pridėkite:

@Atšaukti viešą tuštumą „onViewCreated“ (@NonNull View vaizdas, @Nullable Bundle savedInstanceState) {Mygtuko mygtukas = (Mygtukas) view.findViewById (R.id.button2); button.setOnClickListener (naujas „View.OnClickListener“) }}); }

Tada atnaujinkite „ThirdFragment“ „onViewCreated“ bloką:

@Atšaukti viešą tuštumą onViewCreated (@NonNull View vaizdas, @Nullable Bundle savedInstanceState) {Mygtuko mygtukas = (Mygtukas) view.findViewById (R.id.button3); button.setOnClickListener (nauja peržiūra.OnClickListener () {@Oreride public void onClick (View v)) {NavController navController = Naršymas.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id }}); }

Galiausiai nepamirškite prie „MainActivity“ pridėti „ThirdFragment.OnFragmentInteractionListener“ sąsają:

viešosios klasės „MainActivity“ išplečia „AppCompatActivity“ įgyvendina „NavigationView.OnNavigationItemSelectedListener“, „SecondFragment.OnFragmentInteractionListener“, „ThirdFragment“.

Vykdykite šį projektą „Android“ įrenginyje arba „Android“ virtualiame įrenginyje (AVD) ir išbandykite naršymą. Turėtumėte galėti naršyti po visus tris fragmentus spustelėdami skirtingus mygtukus.

Sukurti pasirinktines perėjimo animacijas

Šiuo metu vartotojas gali judėti jūsų programoje, tačiau perėjimas tarp kiekvieno fragmento yra gana staigus. Šiame paskutiniame skyriuje naudosime naršymo komponentą, kad prie kiekvieno perėjimo pridėtume skirtingą animaciją, kad jie vyktų sklandžiau.

Kiekviena animacija, kurią norite naudoti, turi būti apibrėžta atskirame animacijos išteklių faile „res / anim“ kataloge. Jei jūsų projekte dar nėra „res / anim“ katalogo, turėsite sukurti:

• Kontroliniu būdu spustelėkite projekto aplanką „res“ ir pasirinkite „Naujas>„ Android “išteklių katalogas“.
• Suteikite šiam katalogui pavadinimą „anim“.
• Atidarykite išskleidžiamąjį meniu „Šaltinio tipas“ ir pasirinkite „anim“.
• Spustelėkite „Gerai“.

Pradėkime nuo išnykimo animacijos apibrėžimo:

• Kontroliniu būdu spustelėkite projekto katalogą „res / anim“.
• Pasirinkite „Naujas> Animacijos šaltinio failas“.
• Suteikite šiam failui pavadinimą „fade_out“.
• Atidarykite failą „fade_out“ ir pridėkite:

Pakartokite aukščiau aprašytus veiksmus, kad sukurtumėte antrą animacijos išteklių failą, pavadintą „slide_out_left“, tada pridėkite:

Sukurkite trečiąjį failą, pavadintą „slide_out_right“, ir pridėkite:

Dabar šias animacijas galite priskirti savo veiksmams naudodamiesi Naršymo rengykle.Norėdami paleisti išnyksiančią animaciją, kai vartotojas pereis iš „FirstFragment“ į „SecondFragment“:

• Atidarykite naršymo schemą ir įsitikinkite, kad pasirinktas skirtukas „Dizainas“.
• Spustelėkite, kad pasirinktumėte veiksmą, kuris susieja „FirstFragment“ su „SecondFragment“.
• Skyde „Atributai“ spustelėkite, kad išplėstumėte skyrių „Perėjimai“. Pagal nutylėjimą kiekvienas šio skyriaus išskleidžiamasis meniu turėtų būti nustatytas kaip „Nėra“.
• Atidarykite išskleidžiamąjį meniu „Enter“, kuris kontroliuoja animaciją, kuri atkuriama, kai „SecondFragment“ pereina į galinės krūvos viršutinę dalį. Pasirinkite „fade_out“ animaciją.

Jei pereisite į skirtuką „Dizainas“, pamatysite, kad ši animacija buvo pridėta prie „action_firstFragment_to_secondFragment“.

Vykdykite atnaujintą projektą „Android“ įrenginyje arba AVD. Dabar jūs turėtumėte patirti išnykimo efektą, kai eisite iš „FirstFragment“ į „SecondFragment“.

Pažvelgę ​​į skydelį „Atributai“ dar kartą, pamatysite, kad „Enter“ nėra vienintelė perėjimo dalis, kurioje galite pritaikyti animaciją. Taip pat galite pasirinkti iš:

• Išėjimas: Animacija, kuri atkuriama, kai fragmentas išeina iš krūvos
• „Pop Enter“: Animacija, kuri atkuriama, kai fragmentas užpildo krūvos viršų
• Pop išeiti: Animacija, kuri atkuriama, kai fragmentas pereina į krūvos dugną

Pabandykite eksperimentuoti pritaikydami skirtingas animacijas skirtingoms perėjimų dalims. Taip pat galite atsisiųsti baigtą projektą iš „GitHub“.

Apvyniojimas

Šiame straipsnyje mes pažvelgėme į tai, kaip galite naudoti „Navigacijos architektūros“ komponentą kurdami vienos veiklos, kelių fragmentų programą su pasirinktinėmis perėjimo animacijomis. Ar navigacijos komponentas įtikino jus perkelti savo projektus į tokią programų struktūrą? Praneškite mums toliau pateiktuose komentaruose!