Bezproblémové fragmenty: Použití komponenty Navigation Architecture pro Android

Obsah

Co je komponenta navigační architektury?
Přidání navigačního editoru do Android Studio
Závislosti projektu: Navigační fragment a UI navigace
Získejte vizuální přehled o navigaci vaší aplikace
Vyplnění navigačního grafu: Přidání cílů
Aktualizace rozložení fragmentů
Fragment_first.xml
Fragment_second.xml
Fragment_third.xml
Propojení vašich cílů s akcemi
Hosting navigačního grafu
Spouštění přechodů pomocí programu NavController
Přidání další navigace
Vytváření vlastních animací přechodu
Zabalení

Během konference I / O 2018 společnost Google oznámila nový přístup k vývoji aplikací pro Android.

Oficiálním doporučením společnosti Google je vytvořit jednu aktivitu, která bude sloužit jako hlavní vstupní bod vaší aplikace, a zbytek obsahu aplikace doručit jako fragmenty.

I když myšlenka na žonglování všech těchto různých fragmentových transakcí a životních cyklů může znít jako noční můra, na I / O 2018 Google také spustil komponentu Architektura navigace, která je navržena tak, aby vám pomohla přijmout tento druh jednotné struktury aktivity.

V tomto článku vám ukážeme, jak přidat komponentu Navigace do projektu a jak ji můžete použít k rychlému a snadnému vytvoření aplikace s více fragmenty s jednou aktivitou, s malou pomocí nového editoru navigace pro Android Studio. Jakmile vytvoříte a propojíte své fragmenty, zdokonalíme standardní přechody fragmentů Androidu pomocí komponenty Navigace a Editoru k vytvoření řady plně přizpůsobitelných přechodových animací.

Co je komponenta navigační architektury?

Součást navigační architektury, která je součástí systému Android JetPack, vám umožňuje vizualizovat různé trasy prostřednictvím aplikace a zjednodušuje proces implementace těchto tras, zejména pokud jde o správu fragmentových transakcí.

Abyste mohli používat komponentu Navigace, musíte si vytvořit navigační graf, což je soubor XML popisující vzájemné vztahy aktivit a fragmentů vaší aplikace.

Navigační graf se skládá z:

Destinace: Jednotlivé obrazovky, na které může uživatel navigovat
Akce: Trasy, které může uživatel provést mezi cíli aplikace

Vizuální znázornění navigačního grafu vašeho projektu můžete zobrazit v Editoru navigace pro Android Studio. Níže najdete navigační graf skládající se ze tří cílů a tří akcí, jak se zobrazuje v navigačním editoru.

Komponenta Navigace je navržena tak, aby vám pomohla implementovat novou doporučenou strukturu aplikací Google, kde jediná aktivita „hostí“ navigační graf a všechny vaše cíle jsou implementovány jako fragmenty. V tomto článku se budeme řídit tímto doporučeným přístupem a vytvoříme aplikaci, která se skládá z MainActivity a tří fragmentových cílů.

Komponenta Navigace však není jen pro aplikace, které mají tuto doporučenou strukturu. Projekt může mít více navigačních grafů a fragmenty a aktivity můžete použít jako cíle v těchto navigačních grafech. Pokud provádíte migraci velkého, vyspělého projektu do komponenty Navigace, bude pro vás snadnější oddělit navigační toky aplikace do skupin, kde každá skupina sestává z „hlavní“ aktivity, některých souvisejících fragmentů a vlastního navigačního grafu.

Přidání navigačního editoru do Android Studio

Abyste mohli co nejlépe využít komponentu Navigace, Android Studio 3.2 Canary a vyšší obsahuje nový navigační editor.

Povolení tohoto editoru:

Na panelu nabídky Android Studio vyberte „Android Studio> Předvolby ...“.
V nabídce vlevo vyberte možnost Experimentální.
Pokud ještě není vybrána, zaškrtněte políčko „Povolit Editor navigace“.

Klikněte na „OK“.
Restartujte Android Studio.

Závislosti projektu: Navigační fragment a UI navigace

Vytvořte nový projekt s vybranými nastaveními, otevřete jeho soubor build.gradle a přidejte fragmenty navigace a fragmenty navigace jako závislosti projektu:

závislosti {implementace fileTree (dir: libs, include:) implementace com.android.support:appcompat-v7:28.0.0 implementace com.android.support.constraint: constraint-layout: 1.1.3 // Přidejte následující // implementaci "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI poskytuje přístup k některým pomocným funkcím // implementace "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementace 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ískejte vizuální přehled o navigaci vaší aplikace

Vytvoření navigačního grafu:

Control-klikněte na adresář „res“ vašeho projektu a vyberte „Nový> Android Resource Directory“.
Otevřete rozbalovací nabídku „Typ zdroje“ a vyberte „navigace“.
Vyberte „OK“.
Control-klikněte na váš nový adresář „res / navigation“ a vyberte „New> Navigation resource file“.
Otevřete rozbalovací nabídku „Typ zdroje“ a vyberte „Navigace“.

Zadejte tento název souboru; Používám „nav_graph“.
Klikněte na „OK“.

Otevřete svůj soubor „res / navigation / nav_graph“ a automaticky se spustí Editor navigace. Podobně jako editor rozvržení je Navigační editor rozdělen na karty „Návrh“ a „Text“.

Pokud vyberete kartu „Text“, zobrazí se následující XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation 'je kořenem každého navigačního grafu //

Na kartě Návrh můžete vizuálně vytvářet a upravovat navigaci aplikace.

Zprava zleva doprava sestává z:

Seznam destinací: Zde jsou uvedeny všechny cíle, které tvoří tento konkrétní navigační graf, a aktivita, na které je navigační graf hostován.
Editor grafů: Grafický editor poskytuje vizuální přehled všech cílů grafu a akcí, které je spojují.
Editor atributů: Pokud vyberete cíl nebo akci v editoru grafů, panel „Atributy“ zobrazí informace o aktuálně vybrané položce.

Vyplnění navigačního grafu: Přidání cílů

Náš navigační graf je aktuálně prázdný. Pojďme přidat nějaké cíle.

Můžete přidat aktivity nebo fragmenty, které již existují, ale můžete také rychle a snadno vytvořit nové fragmenty pomocí navigačního grafu:

Klikněte na tlačítko „Nový cíl“ a vyberte „Vytvořit prázdný cíl“.

Do pole Název fragmentu zadejte název třídy fragmentu; Používám „FirstFragment“.
Ujistěte se, že je zaškrtnuto políčko „Vytvořit rozložení XML“.
Vyplňte pole „Název rozložení fragmentu“; Používám „fragment_first“.
Klikněte na tlačítko Dokončit.

Do vašeho projektu bude nyní přidána podtřída FirstFragment a odpovídající soubor prostředků rozložení „fragment_first.xml“. FirstFragment se také zobrazí jako cíl v navigačním grafu.

Pokud v navigačním editoru vyberete FirstFragment, zobrazí se na panelu „Atributy“ některé informace o tomto cíli, například název třídy a ID, které použijete k odkazu na tento cíl kdekoli v kódu.

Opláchněte a opakujte pro přidání SecondFragmentu a ThirdFragmentu do projektu.

Přejděte na kartu Text a uvidíte, že XML bylo aktualizováno, aby odráželo tyto změny.

Každý navigační graf má počáteční cíl, což je obrazovka, která se zobrazí při spuštění aplikace uživatelem. Ve výše uvedeném kódu používáme FirstFragment jako počáteční cíl naší aplikace. Pokud přepnete na kartu Návrh, zobrazí se ikona domu, která také označí FirstFragment jako počáteční cíl grafu.

Pokud chcete použít jiný počáteční bod, vyberte dotyčnou aktivitu nebo fragment a poté na panelu „Atributy“ vyberte „Nastavit počáteční cíl“.

Alternativně můžete tuto změnu provést na úrovni kódu:

Aktualizace rozložení fragmentů

Nyní máme své cíle, přidáme některé prvky uživatelského rozhraní, takže je vždy jasné, který fragment právě sledujeme.

Ke každému fragmentu přidám následující:

TextView, který obsahuje název fragmentu
Tlačítko, které uživateli umožní procházet z jednoho fragmentu na další

Zde je kód pro každý soubor zdroje rozložení:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Propojení vašich cílů s akcemi

Dalším krokem je propojení našich cílů prostřednictvím akcí.

V Navigačním editoru můžete vytvořit akci pomocí jednoduchého přetažení:

Zkontrolujte, zda je vybrána karta „Návrh“ editoru.
Umístěte ukazatel myši na pravou stranu cíle, který chcete navigovat z, což je v tomto případě FirstFragment. Měl by se objevit kruh.
Klikněte a přetáhněte kurzor do cíle, který chcete navigovat na, což je SecondFragment. Měla by se objevit modrá čára. Když je SecondFragment zvýrazněn modře, uvolněte kurzor a vytvořte propojení mezi těmito cíli.

Nyní by měla existovat akční šipka propojující FirstFragment s SecondFragment. Klepnutím vyberte tuto šipku a panel „Atribut“ se aktualizuje a zobrazí některé informace o této akci, včetně jejího ID přiřazeného systémem.

Tato změna se projeví také v XML navigačního grafu:

… … …

Opláchněte a opakujte pro vytvoření akce spojující SecondFragment s ThirdFragment a akce spojující ThirdFragment s FirstFragment.

Hosting navigačního grafu

Navigační graf poskytuje vizuální reprezentaci cílů a akcí vaší aplikace, ale vyvolání těchto akcí vyžaduje nějaký další kód.

Jakmile vytvoříte navigační graf, musíte ho hostit uvnitř aktivity přidáním NavHostFragmentu do souboru rozvržení této aktivity. Tento NavHostFragment poskytuje kontejner, ve kterém může navigace probíhat, a bude také zodpovědný za výměnu fragmentů dovnitř a ven, když uživatel naviguje po vaší aplikaci.

Otevřete soubor „activity_main.xml“ vašeho projektu a přidejte NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Vytvořte fragment, který bude fungovat jako NavHostFragment //

Ve výše uvedeném kódu aplikace: defaultNavHost = „true“ umožňuje Navigačnímu hostiteli zachytit pokaždé, když je stisknuto tlačítko „Zpět“ v systému, takže aplikace vždy ctí navigaci popsanou v navigačním grafu.

Spouštění přechodů pomocí programu NavController

Dále musíme implementovat NavController, což je nová součást, která odpovídá za řízení procesu navigace v rámci NavHostFragmentu.

Chcete-li přejít na novou obrazovku, musíte načíst NavController pomocí Navigation.findNavController, zavolat metodu navigate () a poté předat buď ID cíle, do kterého navigujete, nebo akci, kterou chcete vyvolat. Například vyvolávám „action_firstFragment_to_secondFragment“, který uživatele přenese z FirstFragmentu na SecondFragment:

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

Uživatel se přesune na novou obrazovku kliknutím na tlačítko, takže musíme také implementovat OnClickListener.

Po provedení těchto změn by měl FirstFragment vypadat takto:

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 rozšiřuje Fragment {public FirstFragment () {} @Override public void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (inflater LayoutInflater, kontejner ViewGroup, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle uloženéInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (nový View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firse); }}); }}

Poté otevřete MainActivity a přidejte následující:

NavigationView.OnNavigationItemSelectedListener: Posluchač pro zpracování událostí na navigačních položkách
SecondFragment.OnFragmentInteractionListener: Rozhraní, které bylo vygenerováno, když jste vytvořili SecondFragment pomocí navigačního editoru

MainActivity musí také implementovat metodu onFragmentInteraction (), která umožňuje komunikaci mezi fragmentem a aktivitou.

importovat 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; veřejná třída MainActivity rozšiřuje AppCompatActivity implementuje NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override chráněné void onCreate (Bundle savedInstanceState) {super.onCreate (uloženoInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (@NonNull MenuItem item) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Přidání další navigace

Abychom mohli implementovat zbytek navigace naší aplikace, musíme pouze zkopírovat / vložit blok onViewCreated a provést několik vyladění, abychom odkazovali na správné widgety a navigační akce.

Otevřete SecondFragment a přidejte následující:

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

Poté aktualizujte blok onViewCreated programu ThirdFragment:

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

Nakonec nezapomeňte přidat rozhraní ThirdFragment.OnFragmentInteractionListener do vaší MainActivity:

veřejná třída MainActivity rozšiřuje AppCompatActivity implementuje NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Spusťte tento projekt v zařízení Android nebo Android Virtual Device (AVD) a otestujte navigaci. Měli byste být schopni procházet mezi všemi třemi fragmenty kliknutím na různá tlačítka.

Vytváření vlastních animací přechodu

V tomto okamžiku se uživatel může pohybovat po vaší aplikaci, ale přechod mezi jednotlivými fragmenty je docela prudký. V této závěrečné části použijeme komponentu Navigace k přidání jiné animace ke každému přechodu, takže k tomu dojde plynuleji.

Každá animace, kterou chcete použít, musí být definována ve svém vlastním souboru prostředků animace, v adresáři „res / anim“. Pokud váš projekt již neobsahuje adresář „res / anim“, musíte si jej vytvořit:

Control-klikněte na složku „res“ vašeho projektu a vyberte „Nový> Android Resource Directory“.
Pojmenujte tento adresář „anim“.
Otevřete rozbalovací nabídku „Typ zdroje“ a vyberte „anim“.
Klikněte na „OK“.

Začněme definováním fade-out animace:

Control-klikněte na adresář „res / anim“ vašeho projektu.
Vyberte „Nový> Soubor prostředků animace.“
Pojmenujte tento soubor „fade_out“.
Otevřete svůj soubor „fade_out“ a přidejte následující:

Opakujte výše uvedené kroky a vytvořte druhý soubor prostředků animace s názvem „slide_out_left“ a poté přidejte následující:

Vytvořte třetí soubor s názvem „slide_out_right“ a přidejte následující:

Nyní můžete tyto animace přiřadit svým akcím pomocí Editoru navigace.Chcete-li přehrát animaci vyblednutí, kdykoli uživatel přejde z FirstFragmentu na SecondFragment:

Otevřete svůj navigační graf a ujistěte se, že je vybrána karta „Návrh“.
Klepnutím vyberte akci, která propojí FirstFragment s SecondFragment.
Na panelu „Atributy“ kliknutím rozbalte sekci „Přechody“. Ve výchozím nastavení by měla být každá rozbalovací nabídka v této části nastavena na „Žádná“.
Otevřete rozevírací nabídku „Enter“, která ovládá animaci, která se přehraje při každém přechodu SecondFragmentu na horní část zadního zásobníku. Vyberte animaci „fade_out“.

Pokud přepnete na kartu „Návrh“, uvidíte, že tato animace byla přidána do „action_firstFragment_to_secondFragment“.

Spusťte aktualizovaný projekt v zařízení Android nebo AVD. Nyní byste se měli setkat s fade-out efektem, kdykoli přejdete z FirstFragmentu na SecondFragment.

Pokud se znovu podíváte na panel „Atributy“, uvidíte, že „Enter“ není jedinou součástí přechodu, kde můžete použít animaci. Můžete si také vybrat z:

Výstup: Animace, která se hraje, když fragment opouští zásobník
Pop Enter: Animace, která se přehraje, když se v horní části zásobníku vyplní fragment
Pop Konec: Animace, která se hraje, když fragment přechází na dno zásobníku

Zkuste experimentovat pomocí různých animací na různé části vašich přechodů. Dokončený projekt si také můžete stáhnout z GitHubu.

Zabalení

V tomto článku jsme se zabývali tím, jak můžete pomocí komponenty Navigation Architecture vytvořit jednu aktivitu, více fragmentovou aplikaci, doplněnou vlastními animacemi přechodu. Přesvědčila vás komponenta Navigace, abyste své projekty přenesli na tento druh aplikační struktury? Dejte nám vědět v komentářích níže!