Navigační komponenta, návrh navigačního grafu

(9. září 2020)

V tomto blogu bych vám chtěl přinést vnořený graf a diskusi o tom, jak předávat data mezi dvěma cíli.

Vnořený navigační graf

Navigační graf lze použít ke seskupení řady cílů dohromady a jejich opětovnému použití. Například používáte pohled, který lze v aplikaci použít na více místech. Takže vytvoříte samostatný soubor rozložení a zahrnete jej, kamkoli jej budete chtít znovu použít. Totéž platí pro navigační graf. Běžný tok lze zahrnout na více místech jeho oddělením v souboru XML diff.

Vysvětlení s příkladem: Vlastní jídlo

Funkce Vlastní jídlo v aplikaci Healthify by uživateli pomohla vytvářet komba jídla. Pokud má uživatel rád k snídani ovoce a toast, nemusí přidávat obojí, každý den. Mohl vytvořit kombinovaný pokrm z těchto dvou položek a zkontrolovat konkrétní kombinaci. To je obrovské plus v úspoře času.

Vlastní tok jídla @ (eyepoppper)

Nahoře je ukázán vlastní průběh jídla; uživatel může pojmenovat své jídlo a přidat položky do svého jídla, aby vytvořil kombinaci. Pokud jednoduché jídlo není k dispozici, může přidat ingredience.

Tlačítko přidání by uživatele přivedlo na obrazovku vyhledávání a hledané jídlo lze přidat do seznamu a nakonec jej uložit kliknutím na tlačítku uložení a uživateli se zobrazí obrazovka úspěchu a pak se přesuneme zpět na obrazovku, odkud tento tok začal.

Vytvořme navigační graf pro Vytvořit kombinovaný tok.



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

Takže tady máme CreateMealFragment se 2 akcemi:

  1. action\_createMealFragment\_to\_save -> když uživatel po zadání názvu a ingrediencí klikne na uložit, přesune se na ProcessMealFragment Cíl této akce je tedy processMealFragment.
  2. action\_createMealFragment\_to\_add -> Když uživatel klikne na ikonu plus a přidá do komba další přísady, přesuneme se na obrazovku vyhledávání, kde můžete vyhledejte jídlo a přidejte ho, takže cílem této akce je searchFoodFragment.

Tento tok má 3 různé háčky.

Vytvořte háčky na jídlo

Uživatel může vstoupit do tohoto toku kliknutím na tlačítko VYTVOŘIT KOMBO na obrazovce sledování jídla (obr. 1) nebo VYTVOŘIT tlačítko COMBO z kombinované obrazovky Jídlo (obr. 2) nebo tlačítka PŘIDAT JÍDLO v průběhu vyhledávání (obr. 3).

HÁČEK 1 : Obrazovka sledování jídla



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

Tady máme MealTrackerFragment a zahrnuli jsme vytvoření graf jídla. Po kliknutí na tlačítko VYTVOŘIT KOMBO uživatel vstoupí do procesu vytváření jídla.

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

HÁČEK 2 : Kombinovaná obrazovka jídla



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

Tady máme MyMealFragment a máme zahrnuto create\_meal\_graph. Po kliknutí na VYTVOŘIT tlačítko COMBO uživatel vstoupí do procesu vytváření jídla.

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

Hook 3 : Průběh vyhledávání, zde budeme rozumět vnořenému grafu i způsobu předávání dat mezi dvěma cíli

Navigace umožňuje připojit data k navigační operaci definováním argumentů pro cíl. Například v tomto případě můžeme předat typ jídla (snídaně, oběd, večeře) jako argument ve Vytvoření fragmentu jídla.

Obecně byste měli silně upřednostňovat předávání pouze minimálního množství dat mezi cíli . Například byste měli předat klíč k načtení objektu, nikoli předat samotný objekt, protože celkový prostor pro všechny uložené stavy je v systému Android omezený. Pokud potřebujete předat velké množství dat, zvažte použití ViewModel.

Chcete-li předat data, musíte definovat argument v cílovém fragmentu, kam chcete přijímat data.

V tomto příkladu posíláme typ jídla ze 3 různých háčků a bude přijímán CreateMealFragment. Takže musíme definovat arg v 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="" />

Pokud typ argumentu podporuje nulové hodnoty, můžete deklarovat výchozí hodnotu null pomocí android:defaultValue="@null".

Všechny podporované typy argumentů můžete zkontrolovat ZDE .

Argumenty můžeme předat také prostřednictvím funkce „Deeplink“.

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

Z fragmentu odesílatele vytvořte balíček argumentů a předejte jej ovladači nav.



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)

Jednalo se o malou diskusi o vnořených grafech, o tom, jak používat navigační graf a jak předávat data mezi dvěma cíli.

Doufám, že článek byl pro vás informativní. Pokud máte jakoukoli zpětnou vazbu nebo dotaz, napište mi prosím.

Až do šťastného učení!

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *