Composant de navigation, conception de graphique de navigation

(9 septembre 2020)

Dans ce blog, je voudrais vous apporter un graphe imbriqué et une discussion sur la façon de transmettre des données entre deux destinations.

Graphique de navigation imbriqué

Un graphique de navigation peut être utilisé pour regrouper une série de destinations et les réutiliser. Par exemple, vous utilisez une vue qui peut être utilisée à plusieurs endroits dans votre application. Ainsi, vous créez un fichier de mise en page séparé et lincluez simplement là où vous souhaitez le réutiliser. Il en va de même pour le graphique de navigation. Un flux commun peut être inclus à plusieurs endroits en le séparant dans un fichier XML diff.

Expliquant avec un exemple: Le repas personnalisé

La fonctionnalité du repas personnalisé dans lapplication Healthify aiderait lutilisateur à créer des combinaisons de repas. Si un utilisateur aime les fruits et les toasts pour le petit-déjeuner, il na pas à ajouter les deux, chaque jour. Il pourrait créer un repas combiné de ces deux éléments et vérifier le combo spécifique. Cest un énorme avantage en termes de gain de temps.

Flux de repas personnalisé @ (eyepoppper)

Ci-dessus, le flux de repas personnalisé; lutilisateur peut nommer son repas et ajouter les éléments à son repas pour créer le combo. Si le plat simple nest pas disponible, il peut ajouter les ingrédients.

Le bouton dajout amènerait lutilisateur à un écran de recherche et laliment recherché peut être ajouté dans la liste, et enfin, le stocker en cliquant sur le bouton Enregistrer, et lutilisateur verra un écran de réussite, puis nous revenons à lécran à partir duquel ce flux a commencé.

Créons un graphique de navigation pour Créer un flux combo.



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"/>

Nous avons donc ici CreateMealFragment avec 2 actions:

  1. action\_createMealFragment\_to\_save -> lorsque lutilisateur clique sur Enregistrer après avoir saisi le nom du repas et les ingrédients, il se déplace vers ProcessMealFragment La destination de cette action est donc processMealFragment.
  2. action\_createMealFragment\_to\_add -> Lorsque lutilisateur clique sur licône plus pour ajouter plus dingrédients dans le combo, nous passons à lécran de recherche où vous pouvez recherchez de la nourriture et ajoutez-la, la destination de cette action est donc searchFoodFragment.

Ce flux a 3 hooks de diff.

Créer des crochets de repas

Un utilisateur peut entrer dans ce flux en cliquant sur le bouton CRÉER COMBO sur lécran de suivi des repas (fig 1) ou CRÉER UN COMBO à partir de lécran combiné Repas (fig 2) ou du bouton ADD FOOD dans le flux de recherche (fig 3).

HOOK 1 : Écran de suivi des repas



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" />
...

Ici, nous avons MealTrackerFragment et nous avons inclus créer un graphique de repas. En cliquant sur le bouton CRÉER COMBO, lutilisateur entrera dans le flux de création de repas.

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

HOOK 2 : Écran combiné Repas



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" />
...

Ici, nous avons MyMealFragment et nous avons inclus create\_meal\_graph. En cliquant sur le bouton CRÉER UN COMBO, lutilisateur entrera dans le flux de création de repas.

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

Crochet 3 : Flux de recherche, ici nous allons comprendre le graphe imbriqué ainsi que comment passer des données entre deux destinations

La navigation vous permet dattacher des données à une opération de navigation en définissant des arguments pour une destination. Par exemple, dans ce cas, nous pouvons passer le type de repas (petit-déjeuner, déjeuner, dîner) comme argument dans Créer un fragment de repas.

En général, vous devriez fortement préférer ne transmettre que la quantité minimale de données entre les destinations . Par exemple, vous devez passer une clé pour récupérer un objet plutôt que de passer lobjet lui-même, car lespace total pour tous les états enregistrés est limité sur Android. Si vous avez besoin de transmettre de grandes quantités de données, pensez à utiliser un ViewModel.

Pour transmettre des données, vous devez définir un argument dans le fragment de destination où vous souhaitez recevoir des données.

Dans cet exemple, nous envoyons un type de repas à partir de 3 points de différence, et il sera reçu par CreateMealFragment. Donc, nous devons définir arg dans 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 type dargument prend en charge les valeurs nulles, vous pouvez déclarer une valeur par défaut null en utilisant android:defaultValue="@null".

Vous pouvez vérifier tous les types darguments pris en charge à partir de ICI .

Nous pouvons également passer des arguments via «Deeplink».

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

À partir du fragment de lexpéditeur, créez un ensemble darguments et passez-le au contrôleur de navigation.



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)

Cétait une petite discussion sur les graphiques imbriqués, comment utiliser un graphique de navigation et comment transmettre des données entre deux destinations.

Jespère larticle était informatif pour vous. Si vous avez des commentaires ou des questions, veuillez me répondre.

Jusquà un bon apprentissage!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *