Conţinut

• Care este componenta de arhitectură de navigație?
• Adăugarea editorului de navigare la Android Studio
• Dependențe de proiect: fragment de navigare și interfață de navigare
• Obțineți o imagine generală asupra navigării aplicației dvs.
• Popularea graficului de navigare: adăugarea destinațiilor
• Actualizarea machetei fragmentului
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Conectarea destinațiilor dvs. cu acțiuni
• Gazduirea graficului de navigare
• Declanșarea tranzițiilor cu NavController
• Adăugarea mai multă navigare
• Crearea de animații de tranziție personalizate
• Înveliți

În cadrul conferinței I / O din 2018, Google a anunțat o nouă abordare pentru dezvoltarea aplicațiilor Android.

Recomandarea oficială a Google este să creați o singură activitate care să fie principalul punct de intrare al aplicației dvs., apoi să furnizați restul conținutului aplicației sub formă de fragmente.

În timp ce gândul de a jongla toate acele tranzacții cu fragmente diferite și cicluri de viață poate suna ca un coșmar, la I / O 2018 Google a lansat și componenta de arhitectură de navigație, care este concepută pentru a vă ajuta să adoptați acest tip de structură de activitate unică.

În acest articol, vă vom arăta cum să adăugați componenta de navigare la proiectul dvs. și cum puteți să o utilizați pentru a crea rapid și ușor o aplicație cu o singură activitate, cu mai multe fragmente, cu puțin ajutor din noul editor de navigație Android Studio. După ce v-ați creat și conectat fragmentele, vom îmbunătăți tranzițiile de fragmente standard ale Android folosind componenta Navigare și Editor pentru a crea o serie de animații de tranziție complet personalizabile.

Care este componenta de arhitectură de navigație?

Parte a Android JetPack, componenta de arhitectură de navigație vă ajută să vizualizați diferitele rute prin aplicația dvs. și simplifică procesul de implementare a acestor rute, în special atunci când vine vorba de gestionarea tranzacțiilor fragmentate.

Pentru a utiliza componenta de navigare, va trebui să creați un grafic de navigare, care este un fișier XML care descrie modul în care activitățile și fragmentele aplicației dvs. se raportează între ele.

Un grafic de navigare este format din:

• destinaţii: Ecranele individuale pe care utilizatorul le poate naviga
• acţiuni: Rutele pe care le poate face utilizatorul între destinațiile aplicației

Puteți vizualiza o reprezentare vizuală a graficului de navigare al proiectului dvs. în Editorul de navigație Android Studio. Mai jos, veți găsi un grafic de navigare format din trei destinații și trei acțiuni așa cum apare în editorul de navigare.

Componenta de navigare este concepută pentru a vă ajuta să implementați noua structură de aplicații recomandată de Google, unde o singură activitate „găzduiește” Graficul de navigare și toate destinațiile dvs. sunt implementate ca fragmente. În acest articol, vom urma această abordare recomandată și vom crea o aplicație care constă dintr-o MainActivity și trei destinații de fragment.

Cu toate acestea, componenta de navigare nu se referă doar la aplicațiile care au această structură recomandată. Un proiect poate avea mai multe grafice de navigație și puteți utiliza fragmente și activități ca destinații în acele grafice de navigare. Dacă migrați un proiect mare, matur, la componenta Navigare, este mai ușor să separați fluxurile de navigație ale aplicației în grupuri, unde fiecare grup constă dintr-o activitate „principală”, unele fragmente conexe și propriul său grafic de navigare.

Adăugarea editorului de navigare la Android Studio

Pentru a vă ajuta să beneficiați la maxim de componenta de navigare, Android Studio 3.2 Canary și versiuni superioare oferă un nou editor de navigare.

Pentru a activa acest editor:

• Selectați „Android Studio> Preferințe…” din bara de meniu Android Studio.
• În meniul din stânga, alegeți „Experimental”.
• Dacă nu a fost deja selectat, bifați caseta de selectare „Enable Navigation Editor”.

• Faceți clic pe „OK”.
• Reporniți Android Studio.

Dependențe de proiect: fragment de navigare și interfață de navigare

Creați un nou proiect cu setările pe care le alegeți, apoi deschideți fișierul build.gradle și adăugați navigare-fragment și navigare-ui ca dependențe de proiect:

dependencies {implement fileTree (dir: libs, include:) implementare com.android.support:appcompat-v7:28.0.0 implementare com.android.support.constraint: constraint-layout: 1.1.3 // Adăugați următoarele // implementare "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI oferă acces la unele funcții helper // implementare "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementare 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 }

Obțineți o imagine generală asupra navigării aplicației dvs.

Pentru a crea un grafic de navigare:

• Faceți clic pe directorul „res” al proiectului dvs. și selectați „Nou> Director resurse Android”.
• Deschideți meniul derulant „Tip resurse” și alegeți „navigare”.
• Selectați „OK”.
• Faceți clic pe noul dvs. director „res / navigare” și selectați „Nou> fișier resursă de navigare.”
• Deschideți meniul derulant „Tip resurse” și selectați „Navigare”.

• Dați acest nume de fișier; Folosesc „nav_graph”.
• Faceți clic pe „OK”.

Deschideți fișierul „res / navigation / nav_graph”, iar editorul de navigare se va lansa automat. Similar editorului de aspect, Editorul de navigare este împărțit în filele „Design” și „Text”.

Dacă selectați fila „Text”, veți vedea următorul XML:

<? xml version = "1.0" coding = "utf-8"?> // Navigare "este nodul rădăcină al fiecărui grafic de navigație //

Fila „Design” este cea în care puteți construi și edita vizual vizualizarea aplicației.

De la stânga la dreapta, Editorul de navigare este format din:

• Lista de destinații: Acesta listează toate destinațiile care alcătuiesc acest grafic de navigație particular, plus Activitatea în care este găzduit Graficul de navigare.
• Editorul de grafice: Editorul de grafic oferă o imagine de ansamblu vizuală a tuturor destinațiilor graficului și a acțiunilor care le conectează.
• Editorul Atributelor: Dacă selectați o destinație sau o acțiune în editorul de grafic, panoul „Atribute” va afișa informații despre elementul selectat în prezent.

Popularea graficului de navigare: adăugarea destinațiilor

Graficul nostru de navigare este momentan gol. Să adăugăm câteva destinații.

Puteți adăuga activități sau fragmente care există deja, dar puteți utiliza, de asemenea, graficul de navigare pentru a crea rapid și ușor fragmente noi:

• Dați clic pe butonul „Destinație nouă” și selectați „Creare destinație necompletată”.

• În câmpul „Numele fragmentului”, introduceți numele clasei fragmentului; Folosesc „FirstFragment”.
• Asigurați-vă că este bifată caseta de selectare „Creare aspect XML”.
• Completați câmpul „Nume aspect fragment”; Folosesc „fragment_first”.
• Faceți clic pe „Finalizare”.

O subclase FirstFragment și fișierul de resurse „fragment_first.xml” corespunzător vor fi acum adăugate proiectului tău. FirstFragment va apărea, de asemenea, ca destinație în Graficul de navigare.

Dacă selectați FirstFragment în Editorul de navigare, atunci panoul „Atribute” va afișa câteva informații despre această destinație, cum ar fi numele clasei și ID-ul pe care îl veți folosi pentru a face referire la această destinație în altă parte a codului dvs.

Clătiți și repetați pentru a adăuga un proiect SecondFragment și ThirdFragment la proiectul dvs.

Treceți la fila „Text” și veți vedea că XML a fost actualizat pentru a reflecta aceste modificări.

Fiecare grafic de navigare are o destinație de pornire, care este ecranul afișat atunci când utilizatorul lansează aplicația. În codul de mai sus, folosim FirstFragment ca destinație de pornire a aplicației noastre. Dacă treceți la fila „Design”, veți observa o pictogramă de casă, care de asemenea marchează FirstFragment ca destinație de pornire a graficului.

Dacă preferați să utilizați un alt punct de plecare, selectați Activitatea sau fragmentul în cauză, apoi selectați „Setați destinația de pornire” din panoul „Atribute”.

Alternativ, puteți efectua această modificare la nivel de cod:

Actualizarea machetei fragmentului

Acum avem destinațiile noastre, să adăugăm câteva elemente de interfață de utilizator, astfel încât să fie întotdeauna clar ce fragment vizionăm în prezent.

Voi adăuga următoarele în fiecare fragment:

• Un textView care conține titlul fragmentului
• Un buton care va permite utilizatorului să navigheze de la un fragment la altul

Iată codul pentru fiecare fișier de resurse de aspect:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Conectarea destinațiilor dvs. cu acțiuni

Următorul pas este legarea destinațiilor noastre prin acțiuni.

Puteți crea o acțiune în Editorul de navigare folosind drag and drop simplu:

• Asigurați-vă că a fost selectată fila „Design” a editorului.
• Treceți cursorul în partea dreaptă a destinației pe care doriți să o navigați din, care în acest caz este FirstFragment. Ar trebui să apară un cerc.
• Faceți clic și trageți cursorul la destinația pe care doriți să o navigați la, care este SecondFragment. Ar trebui să apară o linie albastră. Când SecondFragment este evidențiat albastru, eliberați cursorul pentru a crea o legătură între aceste destinații.

Ar trebui să existe acum o săgeată de acțiune care leagă FirstFragment la SecondFragment. Faceți clic pentru a selecta această săgeată, iar panoul „Atribut” se va actualiza pentru a afișa unele informații despre această acțiune, inclusiv ID-ul alocat sistemului.

Această modificare este reflectată și în XML-ul graficului de navigare:

… … …

Clătiți și repetați pentru a crea o acțiune care leagă SecondFragment de ThirdFragment și o acțiune care leagă ThirdFragment de FirstFragment.

Gazduirea graficului de navigare

Graficul de navigare oferă o reprezentare vizuală a destinațiilor și acțiunilor aplicației dvs., dar invocarea acestor acțiuni necesită un cod suplimentar.

După ce ați creat un grafic de navigare, trebuie să îl găzduiți în cadrul unei activități adăugând un NavHostFragment la fișierul de dispunere al respectivei activități. Acest NavHostFragment oferă un container în care se poate produce navigația și va fi, de asemenea, responsabil pentru schimbarea fragmentelor în și în timp ce utilizatorul navighează în jurul aplicației.

Deschideți fișierul „Activity_main.xml” al proiectului și adăugați un NavHostFragment.

<? xml version = "1.0" coding = "utf-8"?> // Creați un fragment care va acționa ca NavHostFragment //

În codul de mai sus, aplicația: defaultNavHost = „adevărat” permite gazdei de navigare să intercepteze ori de câte ori este apăsat butonul „Înapoi” al sistemului, astfel încât aplicația respectă întotdeauna navigarea descrisă în graficul dvs. de navigare.

Declanșarea tranzițiilor cu NavController

În continuare, trebuie să implementăm un NavController, care este o componentă nouă care este responsabilă de gestionarea procesului de navigație în cadrul unui NavHostFragment.

Pentru a naviga la un nou ecran, trebuie să regăsiți un NavController folosind Navigation.findNavController, să apelați la metoda navigare (), apoi să treceți fie ID-ul destinației pe care o navigați, fie acțiunea pe care doriți să o invocați. De exemplu, invoc „action_firstFragment_to_secondFragment”, care va transporta utilizatorul de la FirstFragment la SecondFragment:

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

Utilizatorul va trece la un ecran nou făcând clic pe un buton, de aceea trebuie să implementăm și OnClickListener.

După efectuarea acestor modificări, FirstFragment ar trebui să arate așa:

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 extinde Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (salvatInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @ Supraveghează public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Buton buton = (Buton) view.findViewById (R.id.button); button.setOnClickListener (noua View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navement_contrager. }}); }}

Apoi, deschideți MainActivity și adăugați următoarele:

• NavigationView.OnNavigationItemSelectedListener: Un ascultător pentru gestionarea evenimentelor pe articole de navigație
• SecondFragment.OnFragmentInteractionListener: Interfață care a fost generată atunci când ați creat SecondFragment prin intermediul Navigator Editor

MainActivity trebuie, de asemenea, să implementeze metoda onFragmentInteraction (), care permite comunicarea între fragment și Activitate.

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; public class MainActivity extinde AppCompatActivity implementează NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (salvatInstanceState); setContentView (R.layout.activity_main); } @ Supraveghează publicul boolean onNavigationItemSelected (articolul @NonNull MenuItem) {return false; } @Se anulează public void onFragmentInteraction (Uri uri) {}}

Adăugarea mai multă navigare

Pentru a implementa restul de navigare al aplicației noastre, trebuie doar să copiem / lipim blocul onViewCreated și să facem câteva modificări, astfel încât să facem referință la widget-urile și acțiunile de navigare corecte.

Deschideți SecondFragment și adăugați următoarele:

@ Supraveghează public void onViewCreated (@NonNull View view, @Nullable Bundle salvatInstanceState) {Buton buton = (Buton) view.findViewById (R.id.button2); button.setOnClickListener (noua View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigment_contrager. }}); }

Apoi, actualizați blocul de la ThirdFragment pe bloculViewCreated:

@ Supraveghează public void onViewCreated (@NonNull View view, @Nullable Bundle salvatInstanceState) {Buton buton = (Buton) view.findViewById (R.id.button3); button.setOnClickListener (noua View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navement_tragmentare }}); }

În cele din urmă, nu uitați să adăugați interfața ThirdFragment.OnFragmentInteractionListener la MainActivity:

public class MainActivity extinde AppCompatActivity implementează NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Rulați acest proiect pe dispozitivul Android sau pe dispozitivul virtual Android (AVD) și testați navigarea. Ar trebui să puteți naviga între cele trei fragmente făcând clic pe butoanele diferite.

Crearea de animații de tranziție personalizate

În acest moment, utilizatorul se poate deplasa în jurul aplicației dvs., dar tranziția dintre fiecare fragment este destul de bruscă. În această secțiune finală, vom folosi componenta Navigare pentru a adăuga o animație diferită la fiecare tranziție, astfel încât acestea să se întâmple mai bine.

Fiecare animație pe care doriți să o utilizați trebuie definită în propriul fișier de resurse de animație, în cadrul unui director „res / anim”. Dacă proiectul dvs. nu conține deja un director „res / anim”, va trebui să creați unul:

• Faceți clic pe folderul „res” al proiectului dvs. și selectați „Nou> Director de resurse Android”.
• Dați acestui director numele „anim”.
• Deschideți meniul derulant „Tip resurse” și alegeți „anim”.
• Faceți clic pe „OK”.

Să începem prin definirea unei animații decolorate:

• Faceți clic pe directorul „res / anim” al proiectului dvs.
• Selectați „Nou> fișier resursă animație.”
• Dați acestui fișier numele „fade_out”.
• Deschideți fișierul „fade_out” și adăugați următoarele:

Repetați pașii de mai sus pentru a crea un al doilea fișier de resurse de animație, denumit „slide_out_left”, apoi adăugați următoarele:

Creați un al treilea fișier, numit „slide_out_right” și adăugați următoarele:

Acum puteți atribui aceste animații acțiunilor dvs. prin intermediul Editorului de navigare.Pentru a reda animația fade-out de fiecare dată când utilizatorul navighează de la FirstFragment la SecondFragment:

• Deschideți-vă Graficul de navigare și asigurați-vă că a fost selectată fila „Design”.
• Faceți clic pentru a selecta acțiunea care leagă FirstFragment la SecondFragment.
• În panoul „Atribute”, faceți clic pentru a extinde secțiunea „Tranziții”. În mod implicit, fiecare dropdown din această secțiune ar trebui să fie setat pe „None”.
• Deschideți funcția verticală „Enter”, care controlează animația care se redă ori de câte ori SecondFragment trece la partea superioară a stivei din spate. Selectați animația „fade_out”.

Dacă treceți la fila „Design”, veți vedea că această animație a fost adăugată la „action_firstFragment_to_secondFragment”.

Rulați proiectul actualizat pe dispozitivul Android sau pe AVD. Acum ar trebui să întâlniți un efect de estompare ori de câte ori navigați de la FirstFragment la SecondFragment.

Dacă aruncați o altă privire la panoul „Atribute”, veți vedea că „Enter” nu este singura parte a tranziției în care puteți aplica o animație. Puteți alege, de asemenea:

• Ieșire: Animația care se redă atunci când un fragment iese din stivă
• Pop Enter: Animația care se redă atunci când un fragment populează partea de sus a stivei
• Ieșire pop: Animația care se redă atunci când un fragment trece în partea de jos a stivei

Încercați să experimentați aplicând diferite animații în diferite părți ale tranzițiilor. De asemenea, puteți descărca proiectul finalizat de pe GitHub.

Înveliți

În acest articol, am analizat cum puteți utiliza componenta Arhitectură de navigare pentru a crea o aplicație cu o singură activitate, cu mai multe fragmente, completată cu animații de tranziție personalizate. Componenta de navigare v-a convins să migrați proiectele către acest tip de structură de aplicație? Spuneți-ne în comentariile de mai jos!