Obsah

• Čo je komponent architektúry navigácie?
• Pridanie editora navigácie do Android Studio
• Závislosti projektu: Fragmentácia navigácie a UI navigácie
• Získajte vizuálny prehľad o navigácii vašej aplikácie
• Naplnenie navigačného grafu: Pridanie cieľov
• Aktualizácia rozloženia fragmentov
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Prepojenie cieľov s akciami
• Hosting navigačného grafu
• Spustenie prechodov pomocou programu NavController
• Pridáva sa ďalšia navigácia
• Vytváranie vlastných animácií prechodu
• Zabalenie

Počas konferencie I / O v roku 2018 spoločnosť Google oznámila nový prístup k vývoju aplikácií pre Android.

Oficiálnym odporúčaním spoločnosti Google je vytvoriť jednu aktivitu, ktorá bude slúžiť ako hlavný vstupný bod vašej aplikácie, a potom dodať zvyšok obsahu vašej aplikácie ako fragmenty.

Aj keď myšlienka na žonglovanie so všetkými týmito rôznymi transakciami fragmentov a životnými cyklami môže znieť ako nočná mora, spoločnosť I / O 2018 tiež spustila komponent navigačnej architektúry, ktorý je navrhnutý tak, aby vám pomohol prijať tento druh jednotnej štruktúry aktivít.

V tomto článku vám ukážeme, ako pridať komponent Navigácia do vášho projektu a ako ho môžete použiť na rýchle a ľahké vytvorenie aplikácie s viacerými fragmentami s jednou aktivitou, s malou pomocou nového editora navigácie pre Android Studio. Po vytvorení a pripojení svojich fragmentov vylepšíme štandardné prechody fragmentov systému Android pomocou komponentu Navigácia a Editora na vytvorenie radu plne prispôsobiteľných prechodových animácií.

Čo je komponent architektúry navigácie?

Súčasťou architektúry navigácie JetPack je súčasť navigačnej architektúry, ktorá vám umožňuje vizualizovať rôzne trasy prostredníctvom vašej aplikácie, a zjednodušuje proces implementácie týchto trás, najmä pokiaľ ide o správu fragmentových transakcií.

Ak chcete používať komponent Navigácia, musíte si vytvoriť navigačný graf, čo je súbor XML popisujúci vzájomný vzťah medzi aktivitami a fragmentmi vašej aplikácie.

Navigačný graf sa skladá z:

• destinácie: Jednotlivé obrazovky, na ktoré môže používateľ prejsť
• Akcia: Trasy, ktoré môže používateľ absolvovať medzi cieľmi vašej aplikácie

Vizuálnu reprezentáciu navigačného grafu svojho projektu môžete zobraziť v Navigačnom editore Android Studio. Nižšie nájdete navigačný graf pozostávajúci z troch cieľov a troch akcií, ako sa zobrazuje v navigačnom editore.

Komponenta Navigácia je navrhnutá tak, aby vám pomohla implementovať novú štruktúru odporúčaných aplikácií Google, kde jediná aktivita „hostí“ navigačný graf a všetky vaše ciele sú implementované ako fragmenty. V tomto článku sa budeme riadiť týmto odporúčaným prístupom a vytvoríme aplikáciu, ktorá pozostáva z MainActivity a troch cieľových častí.

Komponenta Navigácia však nie je len pre aplikácie, ktoré majú túto odporúčanú štruktúru. Projekt môže obsahovať viacero navigačných grafov a fragmenty a aktivity môžete použiť ako ciele v rámci týchto navigačných grafov. Ak migrujete veľký, vyzretý projekt na komponent Navigácia, bude pre vás jednoduchšie rozdeliť navigačné toky vašej aplikácie do skupín, kde každá skupina pozostáva z „hlavnej“ aktivity, niektorých súvisiacich fragmentov a vlastného navigačného grafu.

Pridanie editora navigácie do Android Studio

Android Studio 3.2 Canary a novšie verzie nového navigačného editora vám pomôžu vyťažiť maximum z navigačnej súčasti.

Povolenie tohto editora:

• Na paneli s ponukami systému Android Studio vyberte položku „Android Studio> Predvoľby ...“.
• V ponuke naľavo vyberte možnosť Experimentálne.
• Ak ešte nie je vybratá, začiarknite políčko „Povoliť editor navigácie“.

• Kliknite na tlačidlo „OK“.
• Reštartujte aplikáciu Android Studio.

Závislosti projektu: Fragmentácia navigácie a UI navigácie

Vytvorte nový projekt s nastaveniami podľa vášho výberu, potom otvorte jeho súbor build.gradle a pridajte fragmenty navigácie a fragmenty navigácie ako závislosti projektu:

závislosti {implementácia fileTree (dir: libs, zahŕňajú:) implementácia com.android.support:appcompat-v7:28.0.0 implementácia com.android.support.constraint: constraint-layout: 1.1.3 // Pridajte nasledujúcu // implementáciu "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI poskytuje prístup k niektorým pomocným funkciám // implementácia "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementácia 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 }

Získajte vizuálny prehľad o navigácii vašej aplikácie

Vytvorenie navigačného grafu:

• Control-kliknite na adresár „res“ vášho projektu a vyberte „Nový> Android Resource Directory“.
• Otvorte rozbaľovaciu ponuku „Typ prostriedku“ a vyberte možnosť „navigácia“.
• Vyberte „OK“.
• Control-kliknite na nový adresár „res / navigation“ a vyberte „New> Navigation resource file“.
• Otvorte rozbaľovaciu ponuku „Typ prostriedku“ a vyberte možnosť „Navigácia“.

• Zadajte tento názov súboru; Používam „nav_graph“.
• Kliknite na tlačidlo „OK“.

Otvorte súbor „res / navigation / nav_graph“ a automaticky sa spustí editor navigácie. Podobne ako editor rozloženia je aj navigačný editor rozdelený na karty „Návrh“ a „Text“.

Ak vyberiete kartu „Text“, zobrazí sa nasledujúci súbor XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'je koreňový uzol každého navigačného grafu //

Na karte Dizajn môžete vizuálne vytvárať a upravovať navigáciu svojej aplikácie.

Z pohľadu zľava doprava sa Editor navigácie skladá z:

• Zoznam cieľov: Zobrazí sa zoznam všetkých cieľov, ktoré tvoria tento konkrétny navigačný graf, plus aktivita, v ktorej je navigačný graf hostený.
• Editor grafov: Editor grafov poskytuje vizuálny prehľad všetkých cieľov grafu a akcií, ktoré ich spájajú.
• Editor atribútov: Ak v grafickom editore zvolíte cieľ alebo akciu, na paneli „Atribúty“ sa zobrazia informácie o aktuálne vybratej položke.

Naplnenie navigačného grafu: Pridanie cieľov

Náš navigačný graf je momentálne prázdny. Pridajme nejaké ciele.

Môžete pridať aktivity alebo fragmenty, ktoré už existujú, ale môžete tiež použiť navigačný graf na rýchle a ľahké vytvorenie nových fragmentov:

• Kliknite na tlačidlo „Nový cieľ“ a vyberte možnosť „Vytvoriť prázdny cieľ“.

• Do poľa Názov fragmentu zadajte názov triedy fragmentu; Používam funkciu „FirstFragment“.
• Uistite sa, že je začiarknuté políčko „Vytvoriť rozloženie XML“.
• Vyplňte pole „Názov rozloženia fragmentu“; Používam „fragment_first“.
• Kliknite na tlačidlo Dokončiť.

Do vášho projektu sa teraz pridá podtrieda FirstFragment a zodpovedajúci súbor zdrojov rozloženia „fragment_first.xml“. FirstFragment sa tiež objaví ako cieľ v navigačnom grafe.

Ak v navigačnom editore zvolíte FirstFragment, na paneli „Atribúty“ sa zobrazia niektoré informácie o tomto cieli, ako je názov triedy a ID, ktoré použijete na označenie tohto cieľa inde vo svojom kóde.

Opláchnite a opakujte, aby ste do projektu pridali SecondFragment a ThirdFragment.

Prepnite sa na kartu Text a uvidíte, že XML bolo aktualizované, aby odrážalo tieto zmeny.

Každý navigačný graf má počiatočný cieľ, čo je obrazovka, ktorá sa zobrazí pri spustení aplikácie používateľom. Vo vyššie uvedenom kóde používame FirstFragment ako počiatočný cieľ našej aplikácie. Ak prepnete na kartu Návrh, všimnete si ikonu domu, ktorá ako počiatočný cieľ grafu označí aj FirstFragment.

Ak chcete použiť iný počiatočný bod, vyberte príslušnú aktivitu alebo fragment a potom na paneli Atribúty vyberte možnosť Nastaviť začiatočný cieľ.

Túto zmenu môžete vykonať aj na úrovni kódu:

Aktualizácia rozloženia fragmentov

Teraz máme svoje ciele, pridajte niektoré prvky používateľského rozhrania, aby bolo vždy jasné, ktorý fragment práve sledujeme.

Ku každému fragmentu pridám nasledujúce položky:

• TextView, ktorý obsahuje názov fragmentu
• Tlačidlo, ktoré umožní používateľovi prechádzať z jedného fragmentu na druhý

Tu je kód pre každý súbor prostriedku rozloženia:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Prepojenie cieľov s akciami

Ďalším krokom je prepojenie našich cieľov prostredníctvom akcií.

Akciu môžete vytvoriť v navigačnom editore pomocou jednoduchého drag and drop:

• Uistite sa, že je vybratá karta „Návrh“ editora.
• Umiestnite kurzor myši na pravú stranu cieľa, ktorý chcete navigovať z, čo je v tomto prípade FirstFragment. Mal by sa objaviť kruh.
• Kliknite a presuňte kurzor do cieľa, ktorý chcete navigovať na, čo je SecondFragment. Mala by sa objaviť modrá čiara. Keď je SecondFragment označený modrou farbou, uvoľnite kurzor a vytvorte prepojenie medzi týmito cieľmi.

Teraz by mala existovať šípka akcie spájajúca FirstFragment s SecondFragment. Kliknutím vyberte túto šípku a panel „Atribút“ sa aktualizuje, aby sa zobrazili niektoré informácie o tejto akcii, vrátane jej ID priradeného systémom.

Táto zmena sa prejaví aj v XML navigačného grafu:

… … …

Opláchnite a opakujte, aby ste vytvorili akciu spájajúcu SecondFragment s ThirdFragment a akciu spájajúcu ThirdFragment s FirstFragment.

Hosting navigačného grafu

Navigačný graf poskytuje vizuálnu reprezentáciu cieľov a akcií vašej aplikácie, ale vyvolanie týchto akcií vyžaduje nejaký dodatočný kód.

Po vytvorení navigačného grafu ho musíte umiestniť do aktivity pridaním súboru NavHostFragment do súboru s rozložením tejto aktivity. Tento program NavHostFragment poskytuje kontajner, v ktorom sa môže vyskytnúť navigácia, a bude tiež zodpovedný za výmenu fragmentov dovnútra a von, keď používateľ naviguje po vašej aplikácii.

Otvorte súbor „activity_main.xml“ vášho projektu a pridajte program NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Vytvorte fragment, ktorý bude fungovať ako NavHostFragment //

Vo vyššie uvedenom kóde aplikácia: defaultNavHost = „true“ umožňuje navigačnému hostiteľovi zachytiť vždy, keď sa stlačí tlačidlo „Späť“ v systéme, takže aplikácia vždy uctie navigáciu opísanú v navigačnom grafe.

Spustenie prechodov pomocou programu NavController

Ďalej musíme implementovať NavController, čo je nový komponent zodpovedný za riadenie procesu navigácie v rámci NavHostFragment.

Ak chcete navigovať na novú obrazovku, musíte načítať NavController pomocou Navigation.findNavController, zavolať metódu navigate () a potom odovzdať buď ID cieľa, do ktorého navigujete, alebo činnosť, ktorú chcete vyvolať. Napríklad vyvolávam „action_firstFragment_to_secondFragment“, ktorý užívateľa prenesie z FirstFragment do SecondFragment:

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

Používateľ prejde na novú obrazovku kliknutím na tlačidlo, takže musíme implementovať aj OnClickListener.

Po vykonaní týchto zmien by FirstFragment mal vyzerať asi takto:

import android.os.Bundle; importovať android.support.annotation.NonNull; importovať android.support.annotation.Nullable; import android.support.v4.app.Fragment; importovať 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 rozširuje Fragment {public FirstFragment () {} @Override public void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); if (getArguments ()! = null) {}} @Override verejné zobrazenie onCreateView (inflater LayoutInflater, kontajner ViewGroup, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NenNull View view, @Nullable Bundle uloženéInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (nové zobrazenie.OnClickListener () {@Override verejné void onClick (Zobraziť v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firse); }}); }}

Potom otvorte svoju MainActivity a pridajte nasledujúce:

• NavigationView.OnNavigationItemSelectedListener: Poslucháč na spracovanie udalostí na navigačných položkách
• SecondFragment.OnFragmentInteractionListener: Rozhranie, ktoré bolo vygenerované pri vytvorení SecondFragmentu pomocou navigačného editora

MainActivity musí tiež implementovať metódu onFragmentInteraction (), ktorá umožňuje komunikáciu medzi fragmentom a aktivitou.

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; importovať android.support.annotation.NonNull; public class MainActivity rozširuje AppCompatActivity implementuje NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override chránené void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Pridáva sa ďalšia navigácia

Na implementáciu zvyšku navigácie našej aplikácie potrebujeme iba skopírovať / vložiť blok onViewCreated a urobiť niekoľko vyladení, aby sme odkazovali na správne widgety a navigačné akcie tlačidiel.

Otvorte SecondFragment a pridajte nasledujúce:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle uloženéInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (nové zobrazenie.OnClickListener () {@Override verejné void onClick (Zobraziť v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_secondFragment;); }}); }

Potom zaktualizujte blok ThirdFragment onViewCreated:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle uloženéInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (nové zobrazenie.OnClickListener () {@Override verejné void onClick (Zobraziť v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_thirfragment); }}); }

Nakoniec nezabudnite pridať rozhranie ThirdFragment.OnFragmentInteractionListener do svojej hlavnej činnosti:

verejná trieda MainActivity rozširuje AppCompatActivity implementujúci NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteraction Listener, ThirdFragment.OnFragmentInteractionListener {

Spustite tento projekt na svojom zariadení Android alebo na virtuálnom zariadení Android (AVD) a otestujte navigáciu. Mali by ste byť schopní prechádzať medzi všetkými tromi fragmentmi kliknutím na rôzne tlačidlá.

Vytváranie vlastných animácií prechodu

V tomto okamihu sa používateľ môže pohybovať po vašej aplikácii, ale prechod medzi jednotlivými fragmentmi je dosť rýchly. V tejto záverečnej časti použijeme komponent navigácie na pridanie inej animácie ku každému prechodu, takže k nim dôjde plynulejšie.

Každá animácia, ktorú chcete použiť, musí byť definovaná vo vlastnom súbore zdrojov animácie, v adresári „res / anim“. Ak váš projekt už neobsahuje adresár „res / anim“, musíte si ho vytvoriť:

• Control-kliknite na priečinok „res“ vášho projektu a vyberte „Nový> Android Resource Directory“.
• Pomenujte tento adresár „anim“.
• Otvorte rozbaľovaciu ponuku „Typ prostriedku“ a vyberte „anim“.
• Kliknite na tlačidlo „OK“.

Začnime definovaním fade-out animácie:

• Control-kliknite na adresár „res / anim“ vášho projektu.
• Vyberte „Nový> Zdrojový súbor animácie.“
• Pomenujte tento súbor s názvom „fade_out.“
• Otvorte súbor „fade_out“ a pridajte nasledujúce:

Opakujte vyššie uvedené kroky a vytvorte druhý súbor prostriedku animácie s názvom „slide_out_left“ a potom pridajte nasledujúce:

Vytvorte tretí súbor s názvom „slide_out_right“ a pridajte nasledujúce:

Tieto animácie môžete teraz priradiť k svojim akciám pomocou navigačného editora.Ak chcete prehrať animáciu vyblednutia, kedykoľvek používateľ prejde z formátu FirstFragment na SecondFragment:

• Otvorte svoj navigačný graf a uistite sa, že je vybratá karta „Návrh“.
• Kliknutím vyberte akciu, ktorá spája FirstFragment s SecondFragment.
• Na paneli Atribúty kliknutím rozbaľte časť Prechody. V predvolenom nastavení by mala byť každá rozbaľovacia ponuka v tejto sekcii nastavená na možnosť Žiadne.
• Otvorte rozbaľovaciu ponuku „Enter“, ktorá riadi animáciu, ktorá sa prehráva vždy, keď sa SecondFragment presunie na hornú časť zásobníka. Vyberte animáciu „fade_out“.

Ak prepnete na kartu Dizajn, uvidíte, že táto animácia bola pridaná do „action_firstFragment_to_secondFragment“.

Spustite aktualizovaný projekt na zariadení Android alebo AVD. Teraz by ste sa mali stretnúť s efektom zoslabovania pri každej navigácii z prvého fragmentu na druhý fragment.

Ak sa znova pozriete na panel Atribúty, uvidíte, že „Enter“ nie je jedinou časťou prechodu, v ktorej môžete použiť animáciu. Môžete si tiež vybrať z:

• Východ: Animácia, ktorá sa prehrá, keď fragment opúšťa zásobník
• Pop Enter: Animácia, ktorá sa prehrá, keď sa do hornej časti zásobníka zaplní fragment
• Pop Koniec: Animácia, ktorá sa prehrá, keď fragment prechádza na spodnú časť zásobníka

Skúste experimentovať s použitím rôznych animácií na rôzne časti vašich prechodov. Dokončený projekt si môžete tiež stiahnuť z GitHubu.

Zabalenie

V tomto článku sme sa zamerali na to, ako môžete použiť komponent navigačnej architektúry na vytvorenie aplikácie s viacerými fragmentami s jednou aktivitou, doplnenej o vlastné animácie prechodu. Presvedčil vás komponent navigácie, aby ste svoje projekty migrovali do tejto aplikačnej štruktúry? Dajte nám vedieť v komentároch nižšie!