Navigasjonskomponent, utforming av navigasjonsgraf

(9. september 2020)

I denne bloggen vil jeg bringe deg nestet graf og en diskusjon om hvordan du kan sende data mellom to destinasjoner.

Nestet navigasjonsgraf

En navigasjonsgraf kan brukes til å gruppere en rekke destinasjoner sammen og gjenbruke dem. For eksempel bruker du en visning som kan brukes flere steder i applikasjonen. Så du lager en egen layoutfil og bare inkluderer den der du vil bruke den på nytt. Det samme gjelder nav-grafen. En vanlig flyt kan inkluderes flere steder ved å skille den i en diff XML-fil.

Forklare med et eksempel: The Custom Meal

Funksjonen til det tilpassede måltidet i Healthify-appen vil hjelpe brukeren med å lage måltidskombinasjoner. Hvis en bruker liker frukt og ristet brød til frokost, trenger han ikke legge til begge deler hver dag. Han kunne lage et kombinasjonsmåltid av disse to elementene og sjekke den spesifikke kombinasjonen. Dette er et stort pluss med tidsbesparelse.

Tilpasset måltidstrøm @ (eyepoppper)

Vist ovenfor er den tilpassede måltidstrømmen; brukeren kan gi navnet sitt måltid og legge til varene i måltidet for å lage kombinasjonen. Hvis den enkle retten ikke er tilgjengelig, kan han legge til ingrediensene.

Legg til-knappen vil føre brukeren til et søkeskjermbilde og den søkte maten kan legges til i listen, og til slutt lagre den ved å klikke på lagringsknappen, og brukeren vil se et suksessskjermbilde, og deretter flytter vi tilbake til skjermen der strømmen startet.

La oss lage et navigasjonsgraf for Opprett kombinasjonsflyt.

id = «4f43c583dd»>

Så her har vi CreateMealFragment med to handlinger:

  1. action\_createMealFragment\_to\_save -> når brukeren klikker på lagre etter å ha skrevet inn måltidets navn og ingredienser, vil han flytte til ProcessMealFragment Så målet for denne handlingen er processMealFragment.
  2. action\_createMealFragment\_to\_add -> Når brukeren klikker på pluss-ikonet for å legge til flere ingredienser i kombinasjonen, flytter vi til søkeskjermen der du kan søk etter mat og legg til den, så målet for denne handlingen er searchFoodFragment.

Denne strømmen har 3 forskjellige kroker.

Opprett måltidskroker

En bruker kan gå inn i denne strømmen ved å klikke på CREATE COMBO-knappen på måltidssporingsskjermen (fig 1) eller OPPRETT EN COMBO-knapp fra kombinasjonsskjermen for måltid (fig 2) eller ADD FOOD-knappen i søkeflyten (fig 3).

HOOK 1 : Måltidssporingsskjerm



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

Her har vi MealTrackerFragment og vi har tatt med lage en måltid graf. Ved å klikke på CREATE COMBO-knappen vil brukeren gå inn for å opprette måltidsflyt.

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

HOOK 2 : Kombinasjonsskjerm for måltid



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

Her har vi MyMealFragment inkludert create\_meal\_graph. Ved klikk på OPPRETTING KOMMER en KOMBO-knapp bruker for å opprette måltidstrøm.

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

Hook 3 : Søkestrøm, her vil vi forstå nestet graf så vel som hvordan du sender data mellom to destinasjoner

Navigering lar deg knytte data til en navigasjonsoperasjon ved å definere argumenter for en destinasjon. I dette tilfellet kan vi for eksempel sende måltidstype (frokost, lunsj, middag) som et argument i Lag måltidstykke.

Generelt sett bør du sterkt foretrekke å sende bare den minimale mengden data mellom destinasjoner . For eksempel bør du sende en nøkkel for å hente et objekt i stedet for å passere selve objektet, da den totale plassen for alle lagrede tilstander er begrenset på Android. Hvis du trenger å sende store mengder data, bør du vurdere å bruke en ViewModel.

For å overføre data må du definere et argument i destinasjonsfragmentet der du vil motta data.

I dette eksemplet sender vi måltidstype fra 3 diff-kroker, og den vil bli mottatt av CreateMealFragment. Så vi må definere arg i 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="" />

Hvis en argumenttype støtter nullverdier, kan du erklære en standardverdi på null ved å bruke android:defaultValue="@null".

Du kan sjekke alle støttede argumenttyper fra HER .

Vi kan også føre argumenter gjennom “Deeplink”.

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

Opprett en pakke med argument fra avsenderfragmentet og send den til nav-kontrolleren.



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)

Dette var en liten diskusjon om nestede grafer, hvordan du bruker en nav-graf og hvordan du sender data mellom to destinasjoner.

Jeg håper artikkelen var informativ for deg. Hvis du har noen tilbakemeldinger eller spørsmål, kan du skrive tilbake til meg.

Till Happy Learning!

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *