Generalidades

Introducción a los componentes de navegación | por Bhoomi shah | Simform Engineering | Junio ​​de 2021

Bomishah
0*bwDQlMRS6hDR0EnS

Android Jetpack se lanzó en Google I / O en 2018, con el objetivo de crear mejores aplicaciones utilizando las mejores prácticas y arquitecturas recomendadas. Jetpack trae varios componentes y navegación Es uno de ellos. Nunca es demasiado tarde para aprender y adaptarse a cosas nuevas.

navegación Se refiere a las interacciones que permiten a los usuarios navegar, ingresar y salir entre diferentes partes de contenido en su aplicación. Usualmente usamos actividades y fragmentos para la navegación.

Sin embargo, Google recomienda avanzar en una arquitectura de actividad única cuando se usa Jetpack.

Primero, ¿por qué la fragmentación excede la actividad?

Fragmento es un componente reutilizable, construido dentro de la Actividad, con su propia interfaz de diseño y ciclo de vida. Pasar datos entre fragmentos es más fácil que las actividades. El fragmento también se utiliza para la interfaz de usuario de varios paneles, como el visor y la navegación inferior.

Navegar entre clips de forma tradicional

Hemos estado usando Fragment Transaction and Manager para la navegación, solo para pasar de una pantalla a otra.

Aquí, los desarrolladores necesitan escribir código complejo para navegar a través de fragmentos. Es hora de pasar al uso de dichos componentes para permitir que los desarrolladores reduzcan sin problemas las complejas prácticas de codificación.

¿Por qué es el componente de navegación?

La arquitectura de navegación elimina la complejidad Transacción de fragmento Navegue entre fragmentos proporcionando su propio conjunto de clases.

Fácil de usar y con menos líneas de código para brindar funcionalidad todo en uno:

  • Procesamiento automático de transacciones de fragmentos.
  • La acción de procesamiento de contrapresión predeterminada.
  • Escriba seguridad al pasar información mientras navega.
  • Maneje fácilmente el flujo de navegación para la visualización y edición de fragmentos.
  • Implemente animaciones y enlaces profundos fácilmente.

3 conceptos clave:

El componente de navegación consta de tres partes clave, como se describe a continuación:

  • Mapa de navegación
  • Host de navegación
  • Controlador de navegación

¡Empecemos!

Primero, necesitamos incluir soporte de navegación en el proyecto. Agrega las siguientes dependencias al archivo build.gradle de tu aplicación:

Mapa de navegación

Incluye conexiones a segmentos y actividades con representación visual.

Una especie Mapa de navegación Es un archivo de recursos que contiene todos los objetivos y operaciones. El diagrama representa todas las rutas de navegación de su aplicación.

Es un archivo XML que se puede crear en la carpeta res. Primero establezca el título del archivo y luego seleccione la navegación en la lista desplegable del tipo de recurso.Ahora tenemos un vacio Mapa de navegación.xml File, necesitamos crear dos fragmentos, los usaremos para navegar entre ellos, a saber, FragmentOne y FragmentTwo.

Como se muestra en la imagen de arriba, necesitamos agregar un destino en el mapa de navegación, y navegaremos en él.

Como se muestra arriba, podemos agregar directamente fragmentos al gráfico a través del diseño y conectar el primer fragmento al segundo fragmento arrastrando la línea.Después de agregar estos destinos, nuestro Mapa de navegación.xml El archivo se verá así:

El código anterior también se puede escribir directamente sin diseñar un editor.

Dentro de la etiqueta XML del mapa de navegación, debe especificar aplicación: startDestination = «@ id / fragmentOne»Allí comienza la aplicación.

Navegar por el fragmento de host

¿Recuerdas cuando solíamos usar contenedores para llenar fragmentos en la Actividad? Bueno, la función del fragmento de host de navegación es la misma que definimos en el archivo activity_main.xml, como se muestra a continuación:

aquí Aplicación: Mapa de navegación: Determina qué mapa de navegación se asociará con el host de navegación, y aplicación: defaultNavHost = «true» Asegúrese de que el host de navegación intercepte el botón de retroceso del sistema cuando lo presione.

Ahora que hemos preparado el gráfico y su destino, hablemos de cómo navegar a otros segmentos.Con este fin, estamos en nuestro Mapa de navegación.xml El archivo es el siguiente, pero para usar esta operación en nuestro fragmento, necesitamos Controlador de navegación.

<action
android:id="@+id/action_fragmentOne_to_fragmentTwo"
app:destination="@id/fragmentTwo" />

Controlador de navegación

Tenemos diferentes formas de navegar a los fragmentos mediante el uso de id de operación o id de fragmento de destino, como se describe a continuación:

1. Utilice el ID del fragmento de destino:

Aquí podemos importar androidx.navigation.fragment.findNavController y pasa la identificación del fragmento de destino directamente desde el fragmento actual cuando se presiona el botón.

button.setOnClickListener 
findNavController().navigate(R.id.fragmentTwo)

También podemos pasar la identificación de destino de manera similar utilizando el método de clase de navegación findNavController para navegar, como se muestra a continuación:

button.setOnClickListener 
Navigation.findNavController(requireActivity(), R.id.fragmentTwo)

2. Usar ID de acción

La identificación de la operación se refiere a la identificación creada por su mapa de navegación.Aquí action_fragmentOne_to_fragmentTwo Se puede utilizar directamente para la navegación.

<action
android:id="@+id/action_fragmentOne_to_fragmentTwo"
app:destination="@id/fragmentTwo" />

Aquí podemos pasar directamente el «id de acción« En lugar del ID de destino durante la navegación, como se muestra a continuación:

3. Utilice createNavigateOnClickListener:

La clase de navegación tiene el método createNavigateOnClickListener, Es compatible con la navegación mediante «id de acción»« Y «ID de fragmento de destino» como primer parámetro. El segundo parámetro es opcional para pasar los parámetros del paquete (si los hay).

¡estupendo! Ahora sabemos cómo navegar a diferentes fragmentos, pero necesitamos una cosa más, ¿cómo pasar parámetros a otros fragmentos? ¿Como lo hicimos antes? Bueno, el componente de navegación ahora tiene un método incorporado para pasar parámetros directamente a través de XML.

Si, en nosotros Mapa de navegación.xml Pestaña de propiedades del editor de diseño, podemos agregar parámetros haciendo clic en + sobre el fragmento seleccionado, allí se puede ver el cuadro de diálogo, luego de agregar el valor, podemos ver la actualización XML similar a la siguiente:

<argument
android:name="title_name"
app:argType="string"
android:defaultValue="Two" />

También podemos usar el paquete para pasar más parámetros directamente desde el fragmento, incluso si no se agrega al xml

val bundle=Bundle()
bundle.putBoolean(IS_FROM_FIRST,true)
Navigation.createNavigateOnClickListener(R.id.fragmentTwo,bundle)

El componente de navegación también proporciona seguridad de tipo para pasar parámetros.

Se recomienda encarecidamente utilizar Safe Args para navegar y transferir datos, ya que puede garantizar la seguridad de los tipos. Es un complemento de Gradle para componentes de navegación, creado para generar objetos simples y métodos de construcción para simplificar el uso del código. Para integrarlo, debemos agregar lo siguiente a su archivo gradle de nivel superior:

classpath "androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version"

Y agregue la siguiente línea al archivo gradle de nivel de módulo:

apply plugin: "androidx.navigation.safeargs.kotlin"

Después de sincronizar con éxito y agregar parámetros a su archivo xml, podrá ver el archivo generado automáticamente con el nombre de su fragmentOne FragmentOneDirections

De manera similar, para recuperar los parámetros pasados ​​por el extremo receptor, el segundo fragmento tiene un nombre generado automáticamente Parámetros del segundo segmento

Aquí no necesitamos verificar el tipo y convertir los parámetros, porque nos aseguramos de que los parámetros pasados ​​sean seguros para los tipos. Para nuestro ejemplo, el primer parámetro es una cadena y el segundo parámetro es un booleano.

LEER  Compatibilidad con versiones anteriores: Cómo no romper su aplicación en el futuro | Autor: Nick Confree | Agosto de 2021

Publicaciones relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba