Componente de navegación, diseño de gráfico de navegación

Publicado el

(9 de septiembre de 2020)

En este blog, me gustaría presentarles un gráfico anidado y una discusión sobre cómo pasar datos entre dos destinos.

Gráfico de navegación anidado

Se puede usar un gráfico de navegación para agrupar una serie de destinos y reutilizarlos. Por ejemplo, usa una vista que se puede usar en varios lugares de su aplicación. Por lo tanto, crea un archivo de diseño separado e inclúyalo donde quiera reutilizarlo. Lo mismo ocurre con el gráfico de navegación. Se puede incluir un flujo común en varios lugares separándolo en un archivo XML diff.

Explicando con un ejemplo: La comida personalizada

La función de comida personalizada en la aplicación Healthify ayudaría al usuario a crear combinaciones de comidas. Si a un usuario le gustan las frutas y las tostadas para el desayuno, no tiene que añadir ambos todos los días. Podría crear una comida combinada de estos dos elementos y verificar la combinación específica. Esta es una gran ventaja para ahorrar tiempo.

Flujo de comida personalizado @ (eyepoppper)

Arriba se muestra el flujo de comida personalizada; el usuario puede nombrar su comida y agregar los elementos en su comida para crear el combo. Si el plato simple no está disponible, puede agregar los ingredientes.

El botón agregar llevaría al usuario a una pantalla de búsqueda y la comida buscada se puede agregar a la lista y, finalmente, almacenarla haciendo clic en en el botón guardar, y el usuario verá una pantalla de éxito y luego volvemos a la pantalla desde donde comenzó este flujo.

Creemos un gráfico de navegación para Crear flujo combinado.



xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/create\_meal\_graph"
app:startDestination="@id/createMealFragment">
android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" >
android:id="@+id/action\_createMealFragment\_to\_save"
app:destination="@id/processMealFragment" /> android:id="@+id/action\_createMealFragment\_to\_add"
app:destination="@id/searchFoodFragment" />
android:id="@+id/searchFoodFragment"
android:name="com.example.healthify.SearchFoodFragment"
android:label="search\_food"
tools:layout="@layout/fragment\_search\_food"/>

android:id="@+id/processMealFragment"
android:name="com.example.healthify.ProcessMealFragment"
android:label="done"
tools:layout="@layout/fragment\_process\_meal"/>

Así que aquí tenemos CreateMealFragment con 2 acciones:

  1. action\_createMealFragment\_to\_save -> cuando el usuario haga clic en guardar después de ingresar el nombre de la comida y los ingredientes, se moverá a ProcessMealFragment Entonces, el destino de esa acción es processMealFragment.
  2. action\_createMealFragment\_to\_add -> Cuando el usuario hace clic en el icono más para agregar más ingredientes en el combo, nos movemos a la pantalla de búsqueda donde puede busque comida y agréguela, por lo que el destino de esta acción es searchFoodFragment.

Este flujo tiene 3 ganchos de diferencia.

Crear ganchos de comida

Un usuario puede ingresar a este flujo haciendo clic en el botón CREAR COMBO en la pantalla del rastreador de comidas (fig. 1) o el botón CREAR COMBO desde la pantalla Combo Combo (figura 2) o el botón AÑADIR COMIDA en el flujo de búsqueda (figura 3).

GANCHO 1 : Pantalla de seguimiento de comidas



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/meal\_tracker\_graph"
app:startDestination="@id/mealTrackerFragment"> android:id="@+id/mealTrackerFragment"
android:name="com.example.healthify.MealTrackerFragment"
android:label="MealTrackerFragment"
tools:layout="@layout/fragment\_meal\_tracker">
android:id="@+id/action\_merge\_flow"
app:destination="@id/create\_meal\_graph" />
...

Aquí tenemos MealTrackerFragment y hemos incluido crear un gráfico de comidas. Al hacer clic en el botón CREAR COMBO, el usuario ingresará en el flujo de creación de comida.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_merge\_flow)
}

GANCHO 2 : Pantalla combinada de comidas



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/my\_meal\_graph"
app:startDestination="@id/myMealFragment"> android:id="@+id/myMealFragment"
android:name="com.example.healthify.MyMealFragment"
android:label="MyMealFragment"
tools:layout="@layout/fragment\_my\_meal">
android:id="@+id/action\_create\_meal"
app:destination="@id/create\_meal\_graph" />
...

Aquí tenemos MyMealFragment y tenemos incluido create\_meal\_graph. Al hacer clic en el botón CREAR UN COMBO, el usuario ingresará en el flujo de creación de comida.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_create\_meal)
}

Hook 3 : flujo de búsqueda, aquí entenderemos el gráfico anidado y cómo pasar datos entre dos destinos

La navegación le permite adjuntar datos a una operación de navegación definiendo argumentos para un destino. Por ejemplo, en este caso, podemos pasar el tipo de comida (desayuno, almuerzo, cena) como un argumento en Crear fragmento de comida.

En general, debería preferir encarecidamente pasar solo la cantidad mínima de datos entre destinos . Por ejemplo, debe pasar una clave para recuperar un objeto en lugar de pasar el objeto en sí, ya que el espacio total para todos los estados guardados es limitado en Android. Si necesita pasar grandes cantidades de datos, considere usar un ViewModel.

Para pasar datos, debe definir un argumento en el fragmento de destino donde desee recibir datos.

En este ejemplo, estamos enviando el tipo de comida desde 3 ganchos de diferencia y será recibido por CreateMealFragment. Entonces necesitamos definir arg en CreateMealFragment.

 android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" > android:name="mealType"
app:argType="string"
android:defaultValue="" />

Si un tipo de argumento admite valores nulos, puede declarar un valor predeterminado de nulo utilizando android:defaultValue="@null".

Puede comprobar todos los tipos de argumentos admitidos desde AQUÍ .

También podemos pasar argumentos a través de “Deeplink”.

 android:id="@+id/deepLink"
app:uri="www.example.com/createMealFragment/{mealType}"
android:autoVerify="true"/>

Desde el fragmento del remitente, cree un paquete de argumentos y páselo al controlador de navegación.



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/search\_meal\_graph"
app:startDestination="@id/searchMealFragment"> android:id="@+id/searchMealFragment"
android:name="com.example.healthify.SearchMealFragment"
android:label="SearchMealFragment"
tools:layout="@layout/fragment\_search\_meal">
android:id="@+id/action\_add\_meal"
app:destination="@id/create\_meal\_graph" />
...

companion object {
const val MEAL\_TYPE = "mealType"
// this value should be same as argument name in nav graph
}
val bundle = bundleOf(MEAL\_TYPE to "Breakfast")findNavController().navigate(R.id.action\_add\_meal,bundle)

Esta fue una pequeña discusión sobre gráficos anidados, cómo usar un gráfico de navegación y cómo pasar datos entre dos destinos.

Espero el artículo fue informativo para ti. Si tiene algún comentario o consulta, por favor escríbame.

¡Hasta feliz aprendizaje!

Deja una respuesta

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