Componenta de navigare, proiectarea graficului de navigare

(9 septembrie 2020)

În acest blog, aș dori să vă aduc un grafic imbricat și o discuție despre cum să transmiteți datele între două destinații.

Grafic de navigare imbricat

Un grafic de navigare poate fi utilizat pentru a grupa o serie de destinații împreună și a le reutiliza. De exemplu, utilizați o vizualizare care poate fi utilizată în mai multe locuri din aplicația dvs. Deci, creați un fișier de aspect separat și îl includeți oriunde doriți să îl refolosiți. Același lucru este valabil și pentru graficul de navă. Un flux comun poate fi inclus în mai multe locuri separându-l într-un fișier XML diferit.

Explicând cu un exemplu: Masa personalizată

Caracteristica Meselor personalizate din aplicația Healthify ar ajuta utilizatorul să creeze combo-uri de masă. Dacă unui utilizator îi plac fructele și pâinea prăjită la micul dejun, nu trebuie să le adauge pe ambele, în fiecare zi. El ar putea crea o masă combinată din aceste două articole și să verifice combo-ul specific. Acesta este un plus imens în ceea ce privește economisirea de timp.

Flux personalizat de masă @ (eyepoppper)

Afișat mai sus este fluxul de masă personalizat; utilizatorul își poate denumi masa și poate adăuga articolele din masa sa pentru a crea combo-ul. Dacă felul de mâncare simplu nu este disponibil, el poate adăuga ingredientele.

Butonul Adăugare va duce utilizatorul la un ecran de căutare și mâncarea căutată poate fi adăugată în listă și, în final, o stochează făcând clic pe pe butonul de salvare, iar utilizatorul va vedea un ecran de succes și apoi ne întoarcem la ecranul de unde a început acest flux.

Să creăm un grafic de navigare pentru Creare flux combinat.



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

Deci aici avem CreateMealFragment cu 2 acțiuni:

  1. action\_createMealFragment\_to\_save -> când utilizatorul dă clic pe Salvare după introducerea numelui și ingredientelor mesei, se va muta la ProcessMealFragment Deci destinația acțiunii este processMealFragment.
  2. action\_createMealFragment\_to\_add -> Când utilizatorul face clic pe pictograma plus pentru a adăuga mai multe ingrediente în combo, ne mutăm la ecranul de căutare unde puteți căutați alimente și adăugați-le, astfel încât destinația acestei acțiuni este searchFoodFragment.

Acest flux are 3 cârlige diferite.

Creați cârlige de masă

Un utilizator poate intra în acest flux făcând clic pe butonul CREARE COMBO de pe ecranul de urmărire a meselor (fig 1) sau pe butonul CREARE A COMBO din ecranul combinat Meal (fig 2) sau butonul ADD FOOD din fluxul de căutare (fig 3).

HOOK 1 : Ecranul de urmărire a meselor



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

Aici avem MealTrackerFragment și am inclus crearea unui grafic de masă. Dacă faceți clic pe butonul CREARE COMBO, utilizatorul va intra în crearea fluxului de masă.

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

HOOK 2 : Ecran combinat Meal



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

Aici avem MyMealFragment inclus create\_meal\_graph. Dacă faceți clic pe butonul CREARE, un utilizator COMBO va intra în crearea fluxului de masă.

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

Hook 3 : fluxul de căutare, aici vom înțelege graficul imbricat, precum și cum să trimiți date între două destinații

Navigarea vă permite să atașați date la o operațiune de navigare definind argumente pentru o destinație. De exemplu, în acest caz, putem trece tipul de masă (mic dejun, prânz, cină) ca argument în Creare fragment de masă.

În general, ar trebui să preferați să transmiteți doar cantitatea minimă de date între destinații . De exemplu, ar trebui să treceți o cheie pentru a prelua un obiect, mai degrabă decât să treceți obiectul în sine, deoarece spațiul total pentru toate stările salvate este limitat pe Android. Dacă trebuie să transmiteți cantități mari de date, luați în considerare utilizarea unui ViewModel.

Pentru a transmite date, trebuie să definiți un argument în fragmentul de destinație unde doriți să primiți date.

În acest exemplu, trimitem tipul de masă din 3 cârlige diferite și va fi primit de CreateMealFragment. Așadar, trebuie să definim arg în 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="" />

Dacă un tip de argument acceptă valori nule, puteți declara o valoare implicită null utilizând android:defaultValue="@null".

Puteți verifica toate tipurile de argumente acceptate din AICI .

Putem trece argumente și prin „Deeplink”.

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

Din fragmentul expeditorului creați un pachet de argumente și treceți-l către controlerul 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)

Aceasta a fost o mică discuție cu privire la graficele imbricate, cum să utilizați un graf nav și cum să transmiteți datele între două destinații.

Sper articolul a fost informativ pentru dvs. Dacă aveți feedback sau întrebări, vă rog să-mi scrieți.

Până la o învățare fericită!

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *