Content

• Què és el component d’arquitectura de navegació?
• Afegir l’editor de navegació a Android Studio
• Dependències del projecte: Fragment de navegació i interfície d'interès de navegació
• Obteniu una visió general de la navegació de l'aplicació
• Desplegar el gràfic de navegació: afegir destinacions
• Actualitzant els dissenys de fragments
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Connexió de les vostres destinacions amb accions
• Allotjament del gràfic de navegació
• Activar transicions amb NavController
• Afegint més navegació
• Creació d’animacions de transició personalitzades
• Embalatge

Durant la conferència d'E / S del 2018, Google va anunciar un nou enfocament per al desenvolupament d'aplicacions d'Android.

La recomanació oficial de Google és crear una única activitat que serveixi com a punt d’entrada principal de l’aplicació i, a continuació, lliurar la resta del contingut de l’aplicació com a fragments.

Si bé la idea de fer malabars a totes aquelles transaccions de fragments i cicles de vida diferents pot semblar un malson, a I / O 2018 Google també va llançar el component d'arquitectura de navegació dissenyat per ajudar-vos a adoptar aquest tipus d'estructura única.

En aquest article, us mostrarem com afegir el component de navegació al vostre projecte i com podeu utilitzar-lo per crear de forma ràpida i senzilla una aplicació amb una sola activitat, de diversos fragments, amb una mica d'ajuda del nou editor de navegació d'Android Studio. Un cop hàgiu creat i connectat els fragments, millorarem les transicions de fragments estàndard d’Android mitjançant l’ús del component de navegació i l’Editor per crear una gamma d’animacions de transició totalment personalitzables.

Què és el component d’arquitectura de navegació?

Com a part de Android JetPack, el component de l'arquitectura de navegació us ajuda a visualitzar les diferents rutes a través de l'aplicació i simplifica el procés d'implementació d'aquestes rutes, especialment quan es tracta de gestionar transaccions amb fragments.

Per utilitzar el component de navegació, haureu de crear un gràfic de navegació, que és un fitxer XML que descriu com es relacionen les activitats i fragments de la vostra aplicació.

Un gràfic de navegació consta de:

• Destinacions: Les pantalles individuals a les quals pot navegar l'usuari
• Accions: Les rutes que l’usuari pot fer entre les destinacions de l’aplicació

Podeu visualitzar una representació visual del gràfic de navegació del vostre projecte a l'editor de navegació d'Android Studio. A continuació, trobareu un gràfic de navegació format per tres destinacions i tres accions tal com apareix a l'Editor de navegació.

El component de navegació està dissenyat per ajudar-vos a implementar la nova estructura d’aplicació recomanada de Google, on una única activitat “allotja” el gràfic de navegació i totes les vostres destinacions s’implementen com a fragments. En aquest article, seguirem aquest enfocament recomanat i crearem una aplicació que consta d’una MainActivity i tres destinacions de fragments.

Tanmateix, el component de navegació no només s'aplica a les aplicacions que tinguin aquesta estructura recomanada. Un projecte pot tenir diversos gràfics de navegació i podeu utilitzar fragments i activitats com a destins dins d'aquests gràfics de navegació. Si migreu un projecte gran i madur cap al component de navegació, potser us serà més fàcil separar els fluxos de navegació de la vostra aplicació en grups, on cada grup consta d'una activitat "principal", alguns fragments relacionats i el seu propi gràfic de navegació.

Afegir l’editor de navegació a Android Studio

Per obtenir el màxim rendiment del component de navegació, Android Studio 3.2 Canary i versions posteriors inclouen un nou editor de navegació.

Per habilitar aquest editor:

• Seleccioneu "Android Studio> Preferències ..." a la barra de menús d'Android Studio.
• Al menú de l’esquerra, trieu “Experimental”.
• Si encara no heu seleccionat, seleccioneu la casella de selecció "Activa l'editor de navegació".

• Feu clic a "D'acord".
• Reinicia Android Studio.

Dependències del projecte: Fragment de navegació i interfície d'interès de navegació

Creeu un projecte nou amb la configuració que escolliu, obriu el fitxer build.gradle i afegiu-hi fragment de navegació i navegació-ui com a dependències del projecte:

dependencies {implement fileTree (dir: libs, include:) implementació com.android.support:appcompat-v7:28.0.0 implementació com.android.support.constraint: constraint-layout: 1.1.3 // Afegiu la següent // implementació "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI proporciona accés a algunes funcions auxiliars // implementació "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementació 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 }

Obteniu una visió general de la navegació de l'aplicació

Per crear un gràfic de navegació:

• Feu clic amb el botó de control al directori "res" del vostre projecte i seleccioneu "Nou> Directori de recursos d'Android".
• Obriu el menú desplegable "Tipus de recurs" i trieu "navegació".
• Seleccioneu "D'acord".
• Feu clic amb el control al vostre nou directori "res / navigation" i seleccioneu "Nou> Fitxer de recursos de navegació."
• Obriu el menú desplegable "Tipus de recurs" i seleccioneu "Navegació".

• Donar aquest nom al fitxer; Estic fent servir "nav_graph".
• Feu clic a "D'acord".

Obriu el fitxer "res / navigation / nav_graph" i l'Editor de navegació es llançarà automàticament. De manera similar a l'editor de disseny, l'Editor de navegació es divideix en pestanyes "Disseny" i "Text".

Si seleccioneu la pestanya "Text", veureu la XML següent:

<? xml version = "1.0" coding = "utf-8"?> // Navegació "és el node arrel de tots els gràfics de navegació //

La pestanya "Disseny" és la que podeu crear i editar visualment la navegació de l'aplicació.

D'esquerra a dreta, l'Editor de navegació consta de:

• Llista de destinacions: Llista totes les destinacions que formen aquest gràfic de navegació concret, a més de l'activitat on s'allotja el gràfic de navegació.
• L’editor de gràfics: L'Editor de gràfics ofereix una visió general de totes les destinacions del gràfic i de les accions per connectar-les.
• L’editor d’atributs: Si seleccioneu una destinació o una acció a l'Editor de gràfics, el tauler "Atributs" mostrarà informació sobre l'element seleccionat actualment.

Desplegar el gràfic de navegació: afegir destinacions

El nostre gràfic de navegació actualment està buit. Afegim algunes destinacions.

Podeu afegir Activitats o fragments que ja existeixen, però també podeu utilitzar el gràfic de navegació per crear fragments nous de forma ràpida i senzilla:

• Feu un clic al botó "Nova destinació" i seleccioneu "Crea una destinació en blanc".

• Al camp "Nom del fragment", introduïu el nom de classe del fragment; Estic fent servir "FirstFragment".
• Assegureu-vos que s'ha seleccionat la casella de selecció "Crear disseny XML".
• Completa el camp "Nom de la composició del fragment"; Estic fent servir "fragment_first".
• Feu clic a "Finalitzar".

Al vostre projecte s’afegirà una subclasse FirstFragment i el fitxer de recurs de fragment “fragment_first.xml” corresponent. FirstFragment també apareixerà com a destinació al gràfic de navegació.

Si seleccioneu FirstFragment a l'Editor de navegació, el tauler "Atributs" mostrarà informació sobre aquesta destinació, com el nom de classe i l'identificador que fareu servir per referir aquesta destinació a un altre lloc del vostre codi.

Esbandiu i repeteixi per afegir un SecondFragment i un ThirdFragment al vostre projecte.

Canvia a la pestanya "Text" i veuràs que l'XML s'ha actualitzat per reflectir aquests canvis.

Cada gràfic de navegació té una destinació d'inici, que és la pantalla que es mostra quan l'usuari llança l'aplicació. Al codi anterior, estem utilitzant FirstFragment com a destinació inicial de l'aplicació. Si canvieu a la pestanya "Disseny", notareu una icona de casa, que també marca FirstFragment com a destinació inicial del gràfic.

Si preferiu utilitzar un punt de partida diferent, seleccioneu l'Activitat o fragment en qüestió i, a continuació, seleccioneu "Estableix la destinació d'inici" del tauler "Atributs".

També podeu fer aquest canvi a nivell de codi:

Actualitzant els dissenys de fragments

Ara tenim les nostres destinacions, afegim alguns elements de la interfície d’usuari per tal de tenir sempre clar quin fragment estem veient actualment.

Afegiré el següent a cada fragment:

• Una TextView que conté el títol del fragment
• Un botó que permetrà a l'usuari navegar d'un fragment a l'altre

Aquí hi ha el codi de cada fitxer de recursos de disseny:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Connexió de les vostres destinacions amb accions

El següent pas és vincular les nostres destinacions mitjançant accions.

Podeu crear una acció a l'Editor de navegació mitjançant arrossegament i solc simple:

• Assegureu-vos que s'ha seleccionat la pestanya "Disseny" de l'editor.
• Passa el cursor a la dreta de la destinació per la qual vols navegar des de, que en aquest cas és FirstFragment. Hauria d'aparèixer un cercle.
• Feu clic i arrossegueu el cursor fins a la destinació que voleu navegar a, que és SecondFragment. Hauria d'aparèixer una línia blava. Si es ressalti SecondFragment de color blau, allibereu el cursor per crear un enllaç entre aquestes destinacions.

Hauria d’haver una fletxa d’acció que enllaci FirstFragment amb SecondFragment. Feu clic per seleccionar aquesta fletxa i el tauler "Atribut" s'actualitzarà per mostrar informació sobre aquesta acció, inclòs el seu ID assignat al sistema.

Aquest canvi també es reflecteix a l’XML del gràfic de navegació:

… … …

Esbandiu i repetiu per crear una acció que enllaci SecondFragment a ThirdFragment i una acció que enllaci ThirdFragment a FirstFragment.

Allotjament del gràfic de navegació

El gràfic de navegació proporciona una representació visual de les destinacions i les accions de l’aplicació, però per invocar aquestes accions cal tenir un codi addicional.

Un cop hàgiu creat un gràfic de navegació, haureu d’allotjar-lo dins d’una activitat afegint un NavHostFragment al fitxer de disseny d’aquesta activitat. Aquest NavHostFragment proporciona un contenidor on es pot produir la navegació i també serà responsable de canviar fragments dins i fora a mesura que l’usuari navegui per la vostra aplicació.

Obre el fitxer "Activity_main.xml" del teu projecte i afegeix un NavHostFragment.

<? xml version = "1.0" coding = "utf-8"?> // Creeu un fragment que actuï com a NavHostFragment //

Al codi anterior, app: defaultNavHost = "true" permet al Host de navegació interceptar sempre que es prem el botó "Enrere" del sistema, de manera que l'aplicació sempre fa honor a la navegació descrita al gràfic de navegació.

Activar transicions amb NavController

A continuació, hem d’implementar un NavController, que és un component nou que s’encarrega de gestionar el procés de navegació dins d’un NavHostFragment.

Per navegar a una nova pantalla, haureu de recuperar un NavController mitjançant Navigation.findNavController, truqueu al mètode navegar () i, a continuació, passeu l'ID de la destinació a la qual navegueu o l'acció que voleu invocar. Per exemple, invoco a "action_firstFragment_to_secondFragment", que transportarà a l'usuari des de FirstFragment, a SecondFragment:

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

L’usuari passarà a una nova pantalla fent clic sobre un botó, per la qual cosa també cal implementar OnClickListener.

Després de fer aquests canvis, FirstFragment hauria de semblar una cosa així:

importa android.os.Bundle; importa android.support.annotation.NonNull; importa android.support.annotation.Nullable; importa android.support.v4.app.Fragment; importa android.view.LayoutInflater; importa android.view.View; importa android.view.ViewGroup; importa android.widget.Button; importar androidx.navigation.NavController; importa androidx.navigation.Navigation; public class FirstFragment estén Fragment {public FirstFragment () {} @Override public void onCreate (Paquet guardatInstanceState) {super.onCreate (guardatInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (inflador LayoutInflater, contenidor ViewGroup, paquet salvatInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Botó Button = (Botó) view.findViewById (R.id.button); button.setOnClickListener (nou View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.france }}); }}

A continuació, obriu el vostre MainActivity i afegiu el següent:

• NavigationView.OnNavigationItemSelectedListener: Un oient per a la gestió d’esdeveniments d’articles de navegació
• SecondFragment.OnFragmentInteractionListener: Una interfície que es va generar quan es va crear SecondFragment mitjançant l'Editor de navegació

MainActivity també necessita implementar el mètode onFragmentInteraction (), que permet la comunicació entre el fragment i l'activitat.

importa android.support.v7.app.AppCompatActivity; importa android.os.Bundle; importa android.net.Uri; importa android.view.MenuItem; importa android.support.design.widget.NavigationView; importa android.support.annotation.NonNull; public class MainActivity estén AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (guardatInstanceState); setContentView (R.layout.activity_main); } @Substitueix el boolean públic onNavigationItemSelected (ítem @NonNull MenuItem) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Afegint més navegació

Per implementar la resta de la navegació de l’aplicació, només hem de copiar / enganxar el bloc onViewCreated i fer uns quants ajustaments de manera que ens referim als widgets i a les accions de navegació correctes.

Obre el SecondFragment i afegeix el següent:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Botó Button = (Botó) view.findViewById (R.id.button2); button.setOnClickListener (nou View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.france }}); }

A continuació, actualitzeu el bloc onViewCreated de ThirdFragment:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Botó Button = (Botó) view.findViewById (R.id.button3); button.setOnClickListener (nou View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.france.trag. }}); }

Finalment, no oblideu afegir la interfície de ThirdFragment.OnFragmentInteractionListener a la vostra MainActivity:

la classe pública MainActivity estén les aplicacions AppCompatActivity que implementen NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Executa aquest projecte al dispositiu Android o al dispositiu virtual Android (AVD) i prova la navegació. Hauríeu de navegar entre els tres fragments fent clic als diferents botons.

Creació d’animacions de transició personalitzades

En aquest moment, l'usuari pot moure's per l'aplicació, però la transició entre cada fragment és força brusca. En aquesta secció final, farem servir el component de navegació per afegir una animació diferent a cada transició, de manera que es produeixin amb més fluïdesa.

Totes les animacions que voleu utilitzar s'han de definir al fitxer de recursos d'animació propi dins d'un directori "res / anim". Si el vostre projecte ja no conté un directori "res / anim", haureu de crear-ne un:

• Feu clic amb el botó de control a la carpeta "res" del vostre projecte i seleccioneu "Nou> Directori de recursos d'Android".
• Dóna-li a aquest directori el nom de “anim”.
• Obriu el menú desplegable "Tipus de recurs" i trieu "anim".
• Feu clic a "D'acord".

Comencem per definir una animació esvaïda:

• Feu clic amb el control al directori "res / anim" del vostre projecte.
• Seleccioneu "Nou> Fitxer de recursos d'animació."
• Poseu aquest nom al fitxer "fade_out".
• Obriu el fitxer "fade_out" i afegiu el següent:

Repetiu els passos anteriors per crear un segon fitxer de recursos d'animació, anomenat "diapositiva_lucina", i després afegiu el següent:

Creeu un tercer fitxer, anomenat "slide_out_right" i afegiu el següent:

Ara podeu assignar aquestes animacions a les vostres accions mitjançant l'Editor de navegació.Per reproduir l'animació esvaïda quan l'usuari navega des de FirstFragment a SecondFragment:

• Obriu el vostre gràfic de navegació i assegureu-vos que està seleccionada la pestanya "Disseny".
• Feu clic per seleccionar l’acció que enllaça FirstFragment amb SecondFragment.
• Al tauler "Atributs", feu clic per ampliar la secció "Transicions". De manera predeterminada, cada menú desplegable d'aquesta secció s'hauria de definir a "Cap".
• Obriu el menú desplegable “Enter”, que controla l’animació que es reprodueix sempre que SecondFragment passa a la part superior de la pila posterior. Seleccioneu l’animació “fade_out”.

Si canvieu a la pestanya "Disseny", veureu que aquesta animació s'ha afegit a "action_firstFragment_to_secondFragment".

Executeu el projecte actualitzat al dispositiu Android o AVD. Ara hauríeu de tenir un efecte esvaït quan navegueu de FirstFragment a SecondFragment.

Si feu una altra ullada al tauler "Atributs", veureu que "Enter" no és l'única part de la transició on podeu aplicar una animació. També podeu triar entre:

• Surt: L’animació que es reprodueix quan un fragment surt de la pila
• Pop Enter: L’animació que es reprodueix quan un fragment està poblant la part superior de la pila
• Sortida pop: L’animació que es reprodueix quan un fragment passa a la part inferior de la pila

Proveu d’experimentar aplicant animacions diferents a diferents parts de les vostres transicions. També podeu descarregar el projecte completat de GitHub.

Embalatge

En aquest article, vam analitzar com podeu utilitzar el component Arquitectura de navegació per crear una aplicació amb un sol fragment de múltiples activitats, completa amb animacions de transició personalitzades. El component Navegació us ha convençut per migrar els vostres projectes cap a aquest tipus d'estructures d'aplicacions? Feu-nos-ho saber als comentaris a continuació!