Navigationskomponent, utformning av navigationsdiagram

Publicerad

(9 september 2020)

I den här bloggen vill jag ge dig kapslat diagram och en diskussion om hur du skickar data mellan två destinationer.

Nestad navigationsgraf

En navigationsgraf kan användas för att gruppera en serie destinationer och återanvända dem. Till exempel använder du en vy som kan användas på flera platser i din applikation. Så du skapar en separat layoutfil och inkluderar bara den där du vill återanvända den. Detsamma gäller nav-grafen. Ett vanligt flöde kan inkluderas på flera platser genom att separera det i en diff XML-fil.

Förklara med ett exempel: Anpassad måltid

Funktionen i Custom Meal i Healthify-appen skulle hjälpa användaren att skapa måltidskombinationer. Om en användare gillar frukt och rostat bröd till frukost behöver han inte lägga till båda, varje dag. Han kunde skapa en kombinationsmåltid av dessa två föremål och kontrollera den specifika kombinationen. Detta är ett enormt plus i tidsbesparing.

Anpassat måltidsflöde @ (eyepoppper)

Ovan visas det anpassade måltidsflödet; användaren kan namnge sin måltid och lägga till föremålen i sin måltid för att skapa kombinationen. Om den enkla skålen inte är tillgänglig kan han lägga till ingredienserna.

Lägg till-knappen tar användaren till en sökskärm och den sökta maten kan läggas till i listan och slutligen lagra den genom att klicka på spara-knappen så kommer användaren att se en framgångsskärm och sedan flyttar vi tillbaka till skärmen där flödet startade.

Låt oss skapa ett navigeringsdiagram för Skapa kombinationsflöde.



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å här har vi CreateMealFragment med två åtgärder:

  1. action\_createMealFragment\_to\_save -> när användaren klickar på spara efter att ha angett måltidsnamn och ingredienser, flyttar han till ProcessMealFragment Så mål för den åtgärden är processMealFragment.
  2. action\_createMealFragment\_to\_add -> När användaren klickar på plusikonen för att lägga till fler ingredienser i kombinationsrutan flyttar vi till sökskärmen där du kan sök efter mat och lägg till den, så målet för den här åtgärden är searchFoodFragment.

Detta flöde har tre olika krokar.

Skapa måltidskrokar

En användare kan gå in i detta flöde genom att klicka på CREATE COMBO-knappen på måltidsskärmen (fig 1) eller CREATE A COMBO-knappen från kombinationsskärmen Meal (fig 2) eller ADD FOOD-knappen i sökflödet (fig 3).

HOOK 1 : Skärmen för måltidsspårare



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

Här har vi MealTrackerFragment och vi har inkluderat skapa en måltidsdiagram. Vid klick på CREATE COMBO-knappen kommer användaren att skapa måltidsflöde.

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

HOOK 2 : Kombinationsskärm för 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" />
...

Här har vi MyMealFragment inkluderade create\_meal\_graph. Vid klick på SKAPA kommer en COMBO-knappanvändare att skapa måltidsflöde.

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

Krok 3 : Sökflöde, här förstår vi kapslad graf liksom hur man skickar data mellan två destinationer

Navigering låter dig koppla data till en navigeringsåtgärd genom att definiera argument för en destination. I det här fallet kan vi till exempel skicka måltidstyp (frukost, lunch, middag) som ett argument i Skapa målfragment.

I allmänhet bör du starkt föredra att bara skicka den minimala mängden data mellan destinationer . Till exempel bör du skicka en nyckel för att hämta ett objekt snarare än att skicka objektet i sig, eftersom det totala utrymmet för alla sparade tillstånd är begränsat på Android. Om du behöver skicka stora mängder data, överväg att använda en ViewModel.

För att skicka data måste du definiera ett argument i destinationsfragmentet där du vill ta emot data.

I det här exemplet skickar vi måltidstyp från 3 diff-krokar, och den kommer att tas emot av CreateMealFragment. SÅ måste vi definiera 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="" />

Om en argumenttyp stöder nollvärden kan du deklarera ett standardvärde som null genom att använda android:defaultValue="@null".

Du kan kontrollera alla argumenttyper som stöds från HÄR .

Vi kan också skicka argument genom ”Deeplink”.

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

Skapa en grupp av argument från avsändarfragmentet och skicka det till nav-styrenheten.



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)

Detta var en liten diskussion om kapslade grafer, hur man använder ett nav-diagram och hur man skickar data mellan två destinationer.

Jag hoppas artikeln var informativ för dig. Om du har feedback eller frågor, vänligen skriv tillbaka till mig.

Till Happy Learning!

Lämna ett svar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *