Navigationskomponent, design af navigationsgraf

(9. september 2020)

I denne blog vil jeg gerne bringe dig indlejret graf og en diskussion om, hvordan du videregiver data mellem to destinationer.

Indlejret navigationsgraf

En navigationsgraf kan bruges til at gruppere en række destinationer sammen og genbruge dem. For eksempel bruger du en visning, der kan bruges flere steder i din applikation. Så du opretter en separat layoutfil og inkluderer den bare, hvor som helst du vil genbruge den. Det samme gælder nav-grafen. En fælles strøm kan inkluderes flere steder ved at adskille den i en diff XML-fil.

Forklaring med et eksempel: Det brugerdefinerede måltid

Funktionen ved det tilpassede måltid i Healthify-appen hjælper brugeren med at oprette måltidskombinationer. Hvis en bruger kan lide frugt og skål til morgenmad, behøver han ikke tilføje begge dele hver dag. Han kunne oprette et kombinationsmåltid af disse to ting og kontrollere den specifikke kombination. Dette er et kæmpe plus i tidsbesparelse.

Tilpasset måltidsflow @ (eyepoppper)

Vist ovenfor er den tilpassede måltidsstrøm; brugeren kan navngive sit måltid og tilføje elementerne i hans måltid for at oprette kombinationsboksen. Hvis den enkle skål ikke er tilgængelig, kan han tilføje ingredienserne.

Tilføj-knappen fører brugeren til et søgeskærm, og den søgte mad kan tilføjes på listen og til sidst gemmer den ved at klikke på gem-knappen, og brugeren vil se en successkærm, og derefter flytter vi tilbage til skærmen, hvorfra dette flow startede.

Lad os oprette en navigationsgraf til Opret kombinationsflow.



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

Så her har vi CreateMealFragment med 2 handlinger:

  1. action\_createMealFragment\_to\_save -> når brugeren klikker på gem efter at have indtastet måltidets navn og ingredienser, flyttes han til ProcessMealFragment Så destination for den handling er processMealFragment.
  2. action\_createMealFragment\_to\_add -> Når brugeren klikker på plusikonet for at tilføje flere ingredienser i kombinationsboksen, flytter vi til søgeskærmen, hvor du kan søg efter mad og tilføj den, så destinationen for denne handling er searchFoodFragment.

Denne strøm har 3 forskellige kroge.

Opret måltidskrog

En bruger kan gå ind i denne strøm ved at klikke på OPRETT KOMBO-knappen på måltidsmålerskærmen (fig 1) eller Opret EN KOMBO-knap fra kombinationsskærmen for måltider (fig 2) eller knappen TILFØJ FOOD i søgestrømmen (fig 3).

HOOK 1 : Måltidsskærmskærm



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 medtaget oprette en måltidsgraf. Ved klik på OPRET COMBO-knap vil brugeren komme ind for at oprette måltidsflow.

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

HOOK 2 : Kombinationsskærm for måltider



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 inkluderet create\_meal\_graph. Ved klik på Opret, oprettes en COMBO-knap, og opretter måltidsflow.

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

Krog 3 : Søgestrøm, her forstår vi indlejret graf samt hvordan man sender data mellem to destinationer

Navigation giver dig mulighed for at vedhæfte data til en navigationshandling ved at definere argumenter for en destination. For eksempel kan vi i dette tilfælde videregive måltidstype (morgenmad, frokost, middag) som et argument i Opret måltidsfragment.

Generelt foretrækker du stærkt at videregive kun den minimale mængde data mellem destinationer . For eksempel skal du videregive en nøgle til at hente et objekt i stedet for at passere selve objektet, da den samlede plads til alle gemte stater er begrænset på Android. Hvis du har brug for at videregive store mængder data, skal du overveje at bruge en ViewModel.

For at videregive data skal du definere et argument i destinationsfragmentet, hvor du vil modtage data.

I dette eksempel sender vi måltidstype fra 3 forskellige kroge, og den modtages af CreateMealFragment. Så vi er nødt til at 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 understøtter nulværdier, kan du erklære en standardværdi for nul ved at bruge android:defaultValue="@null".

Du kan kontrollere alle understøttede argumenttyper fra HER .

Vi kan også sende argumenter gennem “Deeplink”.

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

Fra afsenderfragmentet skal du oprette et bundt argument og sende det til 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)

Dette var en lille diskussion om indlejrede grafer, hvordan man bruger en nav-graf, og hvordan man videregiver data mellem to destinationer.

Jeg håber artiklen var informativ for dig. Hvis du har feedback eller forespørgsel, så skriv tilbage til mig.

Till Happy Learning!

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *