Contenido

• ¿Qué es el componente de arquitectura de navegación?
• Agregar el editor de navegación a Android Studio
• Dependencias del proyecto: Fragmento de navegación y UI de navegación
• Obtenga una visión general visual de la navegación de su aplicación
• Completar el gráfico de navegación: agregar destinos
• Actualizar sus diseños de fragmentos
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Conectando tus destinos con acciones
• Hospedar el gráfico de navegación
• Activación de transiciones con NavController
• Agregar más navegación
• Crear animaciones de transición personalizadas
• Terminando

Durante la conferencia de E / S de 2018, Google anunció un nuevo enfoque para desarrollar aplicaciones de Android.

La recomendación oficial de Google es crear una Actividad única que sirva como el punto de entrada principal de su aplicación, luego entregar el resto del contenido de su aplicación como fragmentos.

Si bien la idea de hacer malabares con todas esas transacciones de fragmentos y ciclos de vida diferentes puede parecer una pesadilla, en I / O 2018 Google también lanzó el Componente de Arquitectura de Navegación, que está diseñado para ayudarlo a adoptar este tipo de estructura de Actividad única.

En este artículo, le mostraremos cómo agregar el componente de Navegación a su proyecto y cómo puede usarlo para crear rápida y fácilmente una aplicación de Fragmentos múltiples de una sola Actividad, con un poco de ayuda del nuevo Editor de Navegación de Android Studio. Una vez que haya creado y conectado sus fragmentos, mejoraremos las transiciones de fragmentos estándar de Android utilizando el componente de navegación y el editor para crear una gama de animaciones de transición totalmente personalizables.

¿Qué es el componente de arquitectura de navegación?

Parte de Android JetPack, el Componente de Arquitectura de Navegación lo ayuda a visualizar las diferentes rutas a través de su aplicación y simplifica el proceso de implementación de estas rutas, particularmente cuando se trata de administrar transacciones fragmentarias.

Para utilizar el componente de navegación, deberá crear un gráfico de navegación, que es un archivo XML que describe cómo se relacionan entre sí las actividades y los fragmentos de su aplicación.

Un gráfico de navegación consta de:

• Destinos: Las pantallas individuales a las que el usuario puede navegar
• Comportamiento: Las rutas que el usuario puede tomar entre los destinos de su aplicación

Puede ver una representación visual del Gráfico de navegación de su proyecto en el Editor de navegación de Android Studio. A continuación, encontrará un Gráfico de navegación que consta de tres destinos y tres acciones tal como aparece en el Editor de navegación.

El componente de navegación está diseñado para ayudarlo a implementar la nueva estructura de aplicaciones recomendadas de Google, donde una sola actividad "aloja" el gráfico de navegación, y todos sus destinos se implementan como fragmentos. En este artículo, seguiremos este enfoque recomendado y crearemos una aplicación que consista en MainActivity y tres fragmentos de destinos.

Sin embargo, el componente de navegación no es solo para aplicaciones que tienen esta estructura recomendada. Un proyecto puede tener múltiples Gráficos de navegación, y puede usar fragmentos y Actividades como destinos dentro de esos Gráficos de navegación. Si está migrando un proyecto grande y maduro al componente de Navegación, puede que le resulte más fácil separar los flujos de navegación de su aplicación en grupos, donde cada grupo consta de una Actividad "principal", algunos fragmentos relacionados y su propio Gráfico de navegación.

Agregar el editor de navegación a Android Studio

Para ayudarlo a aprovechar al máximo el componente de navegación, Android Studio 3.2 Canary y versiones superiores cuentan con un nuevo editor de navegación.

Para habilitar este editor:

• Seleccione "Android Studio> Preferencias ..." en la barra de menú de Android Studio.
• En el menú de la izquierda, elija "Experimental".
• Si aún no está seleccionado, seleccione la casilla de verificación "Habilitar editor de navegación".

• Haga clic en Aceptar."
• Reinicia Android Studio.

Dependencias del proyecto: Fragmento de navegación y UI de navegación

Cree un nuevo proyecto con la configuración que elija, luego abra su archivo build.gradle y agregue fragmentos de navegación y navegación-ui como dependencias del proyecto:

dependencias {implementación fileTree (dir: libs, include:) implementación com.android.support:appcompat-v7:28.0.0 implementación com.android.support.constraint: restrict-layout: 1.1.3 // Agregue lo siguiente // implementación "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI proporciona acceso a algunas funciones auxiliares // implementación "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementación 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 }

Obtenga una visión general visual de la navegación de su aplicación

Para crear un gráfico de navegación:

• Mantenga presionada la tecla Control y haga clic en el directorio "res" de su proyecto y seleccione "Nuevo> Directorio de recursos de Android".
• Abra el menú desplegable "Tipo de recurso" y elija "navegación".
• Seleccione "Aceptar".
• Mantenga presionada la tecla Control y haga clic en su nuevo directorio "res / navigation" y seleccione "Nuevo> Archivo de recursos de navegación".
• Abra el menú desplegable "Tipo de recurso" y seleccione "Navegación".

• Dar este nombre de archivo; Estoy usando "nav_graph".
• Haga clic en Aceptar."

Abra su archivo "res / navigation / nav_graph", y el Editor de navegación se iniciará automáticamente. Al igual que el editor de diseño, el Editor de navegación se divide en las pestañas "Diseño" y "Texto".

Si selecciona la pestaña "Texto", verá el siguiente XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation ’es el nodo raíz de cada gráfico de navegación //

La pestaña "Diseño" es donde puedes crear y editar visualmente la navegación de tu aplicación.

De izquierda a derecha, el Editor de navegación consta de:

• Una lista de destinos: Esto enumera todos los destinos que componen este Gráfico de navegación en particular, más la Actividad donde se aloja el Gráfico de navegación.
• El editor de gráficos: El editor de gráficos proporciona una descripción visual de todos los destinos del gráfico y las acciones que los conectan.
• El editor de atributos: Si selecciona un destino o una acción en el Editor de gráficos, el panel "Atributos" mostrará información sobre el elemento seleccionado actualmente.

Completar el gráfico de navegación: agregar destinos

Nuestro gráfico de navegación está actualmente vacío. Agreguemos algunos destinos.

Puede agregar Actividades o fragmentos que ya existen, pero también puede usar el Gráfico de navegación para crear rápida y fácilmente nuevos fragmentos:

• Haga clic en el botón "Nuevo destino" y seleccione "Crear destino en blanco".

• En el campo "Nombre del fragmento", ingrese el nombre de clase de su fragmento; Estoy usando "FirstFragment".
• Asegúrese de que la casilla de verificación "Crear XML de diseño" esté seleccionada.
• Complete el campo "Nombre de diseño de fragmento"; Estoy usando "fragment_first".
• Haga clic en "Finalizar".

Ahora se agregará a su proyecto una subclase de FirstFragment y el correspondiente archivo de recursos de diseño "fragment_first.xml". FirstFragment también aparecerá como destino en el Gráfico de navegación.

Si selecciona FirstFragment en el Editor de navegación, el panel "Atributos" mostrará cierta información sobre este destino, como su nombre de clase y la ID que usará para hacer referencia a este destino en otra parte de su código.

Enjuague y repita para agregar un segundo fragmento y un tercer fragmento a su proyecto.

Cambie a la pestaña "Texto" y verá que el XML se ha actualizado para reflejar estos cambios.

Cada gráfico de navegación tiene un destino de inicio, que es la pantalla que se muestra cuando el usuario inicia su aplicación. En el código anterior, estamos usando FirstFragment como destino de inicio de nuestra aplicación. Si cambia a la pestaña "Diseño", verá un icono de la casa, que también marca FirstFragment como el destino de inicio del gráfico.

Si prefiere utilizar un punto de partida diferente, seleccione la Actividad o el fragmento en cuestión y luego seleccione "Establecer destino de inicio" en el panel "Atributos".

Alternativamente, puede hacer este cambio a nivel de código:

Actualizar sus diseños de fragmentos

Ahora que tenemos nuestros destinos, agreguemos algunos elementos de la interfaz de usuario para que siempre quede claro qué fragmento estamos viendo actualmente.

Voy a agregar lo siguiente a cada fragmento:

• Una vista de texto que contiene el título del fragmento
• Un botón que permitirá al usuario navegar de un fragmento al siguiente.

Aquí está el código para cada archivo de recursos de diseño:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Conectando tus destinos con acciones

El siguiente paso es vincular nuestros destinos a través de acciones.

Puede crear una acción en el Editor de navegación con solo arrastrar y soltar:

• Asegúrese de que la pestaña "Diseño" del editor esté seleccionada.
• Desplácese sobre el lado derecho del destino que desea navegar desde, que en este caso es FirstFragment. Debería aparecer un círculo.
• Haga clic y arrastre el cursor al destino que desea navegar. a, que es SecondFragment. Debería aparecer una línea azul. Cuando SecondFragment esté resaltado en azul, suelte el cursor para crear un enlace entre estos destinos.

Ahora debería haber una flecha de acción que vincule FirstFragment con SecondFragment. Haga clic para seleccionar esta flecha y el panel "Atributo" se actualizará para mostrar información sobre esta acción, incluida su ID asignada por el sistema.

Este cambio también se refleja en el XML del gráfico de navegación:

… … …

Enjuague y repita para crear una acción que vincule SecondFragment a ThirdFragment y una acción que vincule ThirdFragment a FirstFragment.

Hospedar el gráfico de navegación

El gráfico de navegación proporciona una representación visual de los destinos y acciones de su aplicación, pero invocar estas acciones requiere un código adicional.

Una vez que haya creado un Gráfico de navegación, debe alojarlo dentro de una Actividad agregando un NavHostFragment al archivo de diseño de esa Actividad. Este NavHostFragment proporciona un contenedor donde puede realizarse la navegación y también será responsable de intercambiar fragmentos dentro y fuera a medida que el usuario navega por su aplicación.

Abra el archivo "activity_main.xml" de su proyecto y agregue un NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Cree un fragmento que actuará como NavHostFragment //

En el código anterior, la aplicación: defaultNavHost = "true" permite que el Host de navegación intercepte cada vez que se presiona el botón "Atrás" del sistema, por lo que la aplicación siempre respeta la navegación descrita en su Gráfico de navegación.

Activación de transiciones con NavController

Luego, necesitamos implementar un NavController, que es un nuevo componente responsable de administrar el proceso de navegación dentro de un NavHostFragment.

Para navegar a una nueva pantalla, debe recuperar un NavController usando Navigation.findNavController, llamar al método de navegación (), luego pasar el ID del destino al que está navegando o la acción que desea invocar. Por ejemplo, estoy invocando "action_firstFragment_to_secondFragment", que transportará al usuario de FirstFragment a SecondFragment:

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

El usuario se moverá a una nueva pantalla haciendo clic en un botón, por lo que también debemos implementar un OnClickListener.

Después de hacer estos cambios, FirstFragment debería verse así:

importar android.os.Bundle; importar android.support.annotation.NonNull; importar android.support.annotation.Nullable; importar android.support.v4.app.Fragment; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; importar android.widget.Button; importar androidx.navigation.NavController; importar androidx.navigation.Navigation; public class FirstFragment extiende Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (LayoutInflater inflador, ViewGroup container, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.ragment_first_); }}); }}

A continuación, abra su MainActivity y agregue lo siguiente:

• NavigationView.OnNavigationItemSelectedListener: Un oyente para manejar eventos en elementos de navegación
• SecondFragment.OnFragmentInteractionListener: Una interfaz que se generó cuando creó SecondFragment a través del Editor de navegación

MainActivity también necesita implementar el método onFragmentInteraction (), que permite la comunicación entre el fragmento y la actividad.

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar android.net.Uri; importar android.view.MenuItem; importar android.support.design.widget.NavigationView; importar android.support.annotation.NonNull; La clase pública MainActivity extiende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (elemento @NonNull MenuItem) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Agregar más navegación

Para implementar el resto de la navegación de nuestra aplicación, solo necesitamos copiar / pegar el bloque onViewCreated y hacer algunos ajustes para que hagamos referencia a los widgets de botón y acciones de navegación correctos.

Abra su SecondFragment y agregue lo siguiente:

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

Luego, actualice el bloque onViewCreated de ThirdFragment:

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

Finalmente, no olvide agregar la interfaz ThirdFragment.OnFragmentInteractionListener a su MainActivity:

La clase pública MainActivity extiende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Ejecute este proyecto en su dispositivo Android o dispositivo virtual Android (AVD) y pruebe la navegación. Debería poder navegar entre los tres fragmentos haciendo clic en los diferentes botones.

Crear animaciones de transición personalizadas

En este punto, el usuario puede moverse por su aplicación, pero la transición entre cada fragmento es bastante abrupta. En esta sección final, utilizaremos el componente de Navegación para agregar una animación diferente a cada transición, para que sucedan de manera más fluida.

Cada animación que desee utilizar debe definirse en su propio archivo de recursos de animación, dentro de un directorio "res / anim". Si su proyecto aún no contiene un directorio "res / anim", deberá crear uno:

• Mantenga presionada la tecla Control y haga clic en la carpeta "res" de su proyecto y seleccione "Nuevo> Directorio de recursos de Android".
• Dé a este directorio el nombre de "anim".
• Abra el menú desplegable "Tipo de recurso" y elija "anim".
• Haga clic en Aceptar."

Comencemos por definir una animación de desvanecimiento:

• Mantenga presionada la tecla Control y haga clic en el directorio "res / anim" de su proyecto.
• Seleccione "Nuevo> Archivo de recursos de animación".
• Dé a este archivo el nombre "fade_out".
• Abra su archivo "fade_out" y agregue lo siguiente:

Repita los pasos anteriores para crear un segundo archivo de recursos de animación, llamado "slide_out_left", luego agregue lo siguiente:

Cree un tercer archivo, llamado "slide_out_right" y agregue lo siguiente:

Ahora puede asignar estas animaciones a sus acciones a través del Editor de navegación.Para reproducir la animación de desvanecimiento cada vez que el usuario navega desde FirstFragment a SecondFragment:

• Abra su Gráfico de navegación y asegúrese de que esté seleccionada la pestaña "Diseño".
• Haga clic para seleccionar la acción que vincula FirstFragment a SecondFragment.
• En el panel "Atributos", haga clic para expandir la sección "Transiciones". Por defecto, cada menú desplegable en esta sección debe establecerse en "Ninguno".
• Abra el menú desplegable "Enter", que controla la animación que se reproduce cuando SecondFragment pasa a la parte superior de la pila posterior. Seleccione la animación "fade_out".

Si cambia a la pestaña "Diseño", verá que esta animación se ha agregado a "action_firstFragment_to_secondFragment".

Ejecute el proyecto actualizado en su dispositivo Android o AVD. Ahora debería encontrar un efecto de desvanecimiento cada vez que navega desde FirstFragment a SecondFragment.

Si observa de nuevo el panel "Atributos", verá que "Entrar" no es la única parte de la transición en la que puede aplicar una animación. También puedes elegir entre:

• Salida: La animación que se reproduce cuando un fragmento abandona la pila.
• Pop Enter: La animación que se reproduce cuando un fragmento ocupa la parte superior de la pila.
• Salida pop: La animación que se reproduce cuando un fragmento está en transición al final de la pila.

Intenta experimentar aplicando diferentes animaciones a diferentes partes de tus transiciones. También puede descargar el proyecto completado desde GitHub.

Terminando

En este artículo, vimos cómo puede usar el componente Arquitectura de navegación para crear una aplicación de una sola actividad, de fragmentos múltiples, completa con animaciones de transición personalizadas. ¿El componente de navegación lo ha convencido de migrar sus proyectos a este tipo de estructura de aplicación? ¡Háganos saber en los comentarios a continuación!