Navigatiecomponent, navigatiegrafiek ontwerpen

(9 september 2020)

In deze blog wil ik u een geneste grafiek brengen en een discussie over het uitwisselen van gegevens tussen twee bestemmingen.

Geneste navigatiegrafiek

Een navigatiegrafiek kan worden gebruikt om een ​​reeks bestemmingen te groeperen en ze opnieuw te gebruiken. Zo gebruik je een view die op meerdere plekken in je applicatie gebruikt kan worden. U maakt dus een afzonderlijk lay-outbestand en voegt dat gewoon toe waar u het opnieuw wilt gebruiken. Hetzelfde geldt voor de nav-grafiek. Een gemeenschappelijke stroom kan op meerdere plaatsen worden opgenomen door deze te scheiden in een diff XML-bestand.

Uitleg met een voorbeeld: The Custom Meal

De functie van de aangepaste maaltijd in de Healthify-app zou de gebruiker helpen maaltijdcombinaties te maken. Als een gebruiker van fruit en toast houdt bij het ontbijt, hoeft hij niet elke dag beide toe te voegen. Hij zou een combinatiemaaltijd van deze twee items kunnen maken en de specifieke combo kunnen controleren. Dit is een enorm pluspunt in tijdbesparing.

Aangepaste maaltijdstroom @ (eyepoppper)

Hierboven wordt de aangepaste maaltijdstroom weergegeven; de gebruiker kan zijn maaltijd een naam geven en de items aan zijn maaltijd toevoegen om de combo te maken. Als het eenvoudige gerecht niet beschikbaar is, kan hij de ingrediënten toevoegen.

De toevoegknop brengt de gebruiker naar een zoekscherm en het gezochte voedsel kan aan de lijst worden toegevoegd en tot slot opslaan door te klikken op op de knop Opslaan, en de gebruiker ziet een successcherm en dan gaan we terug naar het scherm waar deze stroom begon.

Laten we een navigatiegrafiek maken voor Combo-stroom maken.



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

Dus hier hebben we CreateMealFragment met 2 acties:

  1. action\_createMealFragment\_to\_save -> wanneer de gebruiker op Opslaan klikt nadat hij de maaltijdnaam en ingrediënten heeft ingevoerd, gaat hij naar ProcessMealFragment Dus de bestemming voor die actie is processMealFragment.
  2. action\_createMealFragment\_to\_add -> Wanneer de gebruiker op het pluspictogram klikt om meer ingrediënten in de combo toe te voegen, gaan we naar het zoekscherm waar je kunt zoek naar voedsel en voeg het toe, dus de bestemming voor deze actie is searchFoodFragment.

Deze stroom heeft 3 diff-hooks.

Maaltijdhaken aanmaken

Een gebruiker kan deze flow betreden door op de CREATE COMBO-knop op het maaltijdtracker-scherm te klikken (fig 1) of CREATE A COMBO-knop van het Maaltijdcombinatiescherm (fig. 2) of de VOEDSEL TOEVOEGEN-knop in de zoekstroom (fig. 3).

HAAK 1 : Maaltijd tracker scherm



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

Hier hebben we MealTrackerFragment en we hebben een maaltijd grafiek. Door op de knop COMBO MAKEN te klikken, komt de gebruiker in de stroom voor het maken van maaltijden.

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

HAAK 2 : Maaltijdcombinatiescherm



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

Hier hebben we MyMealFragment en we hebben inbegrepen create\_meal\_graph. Door op CREATE A COMBO-knop te klikken, komt de gebruiker in de create meal flow.

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

Hook 3 : zoekstroom, hier zullen we geneste grafieken begrijpen en hoe gegevens tussen twee bestemmingen kunnen worden doorgegeven

Met navigatie kunt u gegevens aan een navigatiebewerking koppelen door argumenten voor een bestemming te definiëren. In dit geval kunnen we bijvoorbeeld maaltijdtype (ontbijt, lunch, diner) als argument doorgeven in Maaltijdfragment maken.

In het algemeen zou u er sterk de voorkeur aan moeten geven om alleen de minimale hoeveelheid gegevens tussen bestemmingen door te geven. . U moet bijvoorbeeld een sleutel doorgeven om een ​​object op te halen in plaats van het object zelf door te geven, aangezien de totale ruimte voor alle opgeslagen toestanden beperkt is op Android. Als u grote hoeveelheden gegevens moet doorgeven, overweeg dan om een ​​ViewModel te gebruiken.

Om gegevens door te geven, moet u een argument in het bestemmingsfragment definiëren waar u wilt gegevens ontvangen.

In dit voorbeeld sturen we het maaltijdtype van 3 verschillende haken, en het zal worden ontvangen door CreateMealFragment. Dus we moeten arg definiëren in 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="" />

Als een argumenttype null-waarden ondersteunt, kunt u de standaardwaarde null declareren door android:defaultValue="@null" te gebruiken.

U kunt alle ondersteunde argumenttypen controleren vanaf HIER .

We kunnen ook argumenten doorgeven via “Deeplink”.

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

Maak van het afzenderfragment een bundel argumenten en geef deze door aan de nav-controller.



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)

Dit was een kleine discussie over geneste grafieken, hoe je een nav-grafiek gebruikt en hoe je gegevens tussen twee bestemmingen doorgeeft.

Ik hoop het artikel was informatief voor jou. Als je feedback of vragen hebt, schrijf me dan alstublieft terug.

Till Happy Learning!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *