Navigációs komponens, Navigációs grafikon tervezése

(2020.09.09.)

Ebben a blogban beágyazott grafikont és egy beszélgetést szeretnék bemutatni arról, hogyan lehet két célállomás között továbbítani az adatokat.

Beágyazott navigációs grafikon

A navigációs grafikon segítségével rendeltetési helyek sorozatát csoportosíthatja és felhasználhatja újra. Például olyan nézetet használ, amely az alkalmazás több helyén is használható. Tehát külön elrendezési fájlt hoz létre, és egyszerűen csak beilleszti azt, bárhová szeretné újrafelhasználni. Ugyanez vonatkozik a nav gráfra is. Egy közös folyamat több helyen is elhelyezhető, ha elválasztja azt egy diff XML fájlban.

Magyarázat egy példával: Az egyéni étkezés

Az Egészséges alkalmazás Egyéni étkezés funkciója segítené a felhasználót étkezési kombók létrehozásában. Ha a felhasználó reggelire szereti a gyümölcsöket és a pirítóst, nem kell mindennap hozzáadnia mindkettőt. Létrehozhat egy kombinált ételt ebből a két tételből, és ellenőrizheti az adott kombót. Ez óriási plusz az időmegtakarításban.

Egyéni étkezési folyamat @ (szempilla)

A fent látható az Egyéni étkezési folyamat; a felhasználó megnevezheti az étkezését, és hozzáadhatja az étkezéséhez szükséges elemeket a kombináció létrehozásához. Ha az egyszerű étel nem áll rendelkezésre, hozzáadhatja az összetevőket.

A Hozzáadás gomb a felhasználót egy keresési képernyőre irányítja, és a keresett étel hozzáadható a listához, végül pedig rákattintva tárolja a mentés gombra kattintva a felhasználó meglátja a sikeres képernyőt, majd visszalépünk arra a képernyőre, ahonnan ez a folyamat elindult.

Hozzunk létre egy navigációs grafikont a kombinált folyamat létrehozásához.



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

Tehát itt van CreateMealFragment 2 művelettel:

  1. action\_createMealFragment\_to\_save -> amikor a felhasználó az étkezés nevének és összetevőinek megadása után a mentésre kattint, a ProcessMealFragment helyre lép. Tehát az adott művelet rendeltetési helye: processMealFragment.
  2. action\_createMealFragment\_to\_add -> Amikor a felhasználó a plusz ikonra kattintva további összetevőket ad hozzá a kombinációban, a kereső képernyőre lépünk, ahol keressen ennivalót és adja hozzá, így ennek a műveletnek a célja a következő: searchFoodFragment.

Ennek a folyamatnak 3 különbözõ kampója van.

Étkezési horgok létrehozása

A felhasználó beléphet ebbe a folyamatba úgy, hogy rákattint a CREATE COMBO gombra az étkezéskövető képernyőn (1. ábra) vagy CREATE A COMBO gombra az Étkezés kombinált képernyőről (2. ábra) vagy az ADD FOOD gombra a keresési folyamatban (3. ábra).

HOOK 1 : Étkezéskövető képernyő



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

Itt van MealTrackerFragment és létrehoztunk egy étkezési grafikon. A COMBO létrehozása gombra kattintva a felhasználó belép az étkezési folyamat létrehozásába.

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

HOOK 2 : Étkezési kombinált képernyő



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

Itt van MyMealFragment, és van tartalmazza: create\_meal\_graph. A CREATE gombra kattintva a felhasználó belép az étkezési folyamat létrehozásába.

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

Hook 3 : Keresési folyamat, itt meg fogjuk érteni a beágyazott grafikont, valamint hogyan továbbítunk adatokat két célállomás között

A navigáció lehetővé teszi adatok csatolását egy navigációs művelethez azáltal, hogy argumentumokat határoz meg a célállomáshoz. Például ebben az esetben az étkezés típusát (reggeli, ebéd, vacsora) adhatjuk át argumentumként az Étkezéstöredék létrehozása részben.

Általában erősen inkább a minimális mennyiségű adat továbbítását célozza meg a rendeltetési helyek között . Például át kell adnia egy kulcsot egy objektum letöltéséhez, nem pedig maga az objektum átadása, mivel az összes mentett állapot teljes területe korlátozott az Android rendszeren. Ha nagy mennyiségű adatot szeretne átadni, fontolja meg a ViewModel használatát.

Az adatok továbbításához meg kell határoznia egy argumentumot a célrészletben, ahová be akarja adni Adatok fogadása.

Ebben a példában ételtípust küldünk 3 különbözõ kampóból, és a CreateMealFragment fogja fogadni. Tehát meg kell határoznunk az arg-ot a CreateMealFragment-ben.

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

Ha egy argumentumtípus null értékeket támogat, az android:defaultValue="@null" paranccsal deklarálhatja az alapértelmezett null értéket.

Az összes támogatott argumentumtípust itt ellenőrizheti: ITT .

A „Deeplink” -en keresztül is átadhatunk argumentumokat.

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

A feladó töredékéből hozzon létre egy argumentumcsomagot, és adja át a navigációs vezérlőnek.



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)

Ez egy kis beszélgetés volt a beágyazott grafikonokról, a navigációs grafikon használatáról és az adatok átadásáról két célállomás között.

Remélem a cikk informatív volt számodra. Ha bármilyen visszajelzése vagy kérdése van, kérem, írjon vissza nekem.

A boldog tanulásig!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük