Componente di navigazione, Progettazione del grafico di navigazione

Pubblicato il

(9 settembre 2020)

In questo blog, vorrei presentarvi il grafico annidato e una discussione su come passare i dati tra due destinazioni.

Grafico di navigazione annidato

Un grafico di navigazione può essere utilizzato per raggruppare una serie di destinazioni e riutilizzarle. Ad esempio, si utilizza una visualizzazione che può essere utilizzata in più punti dellapplicazione. Quindi, crei un file di layout separato e includilo ovunque tu voglia riutilizzarlo. Lo stesso vale per il grafico di navigazione. Un flusso comune può essere incluso in più punti separandolo in un file XML diff.

Spiegando con un esempio: The Custom Meal

La funzionalità del pasto personalizzato nellapp Healthify aiuterebbe lutente a creare combinazioni di pasti. Se a un utente piacciono frutta e pane tostato a colazione, non è tenuto a aggiungerli entrambi, ogni giorno. Potrebbe creare un pasto combinato di questi due elementi e controllare la combinazione specifica. Questo è un enorme vantaggio in termini di risparmio di tempo.

Flusso pasto personalizzato @ (eyepoppper)

Qui sopra è mostrato il flusso del pasto personalizzato; lutente può nominare il suo pasto e aggiungere gli elementi nel suo pasto per creare la combinazione. Se il piatto semplice non è disponibile, può aggiungere gli ingredienti.

Il pulsante aggiungi porta lutente a una schermata di ricerca e il cibo cercato può essere aggiunto allelenco e, infine, memorizzalo facendo clic sul pulsante di salvataggio e lutente vedrà una schermata di successo e poi torneremo alla schermata da cui è iniziato questo flusso.

Creiamo un grafico di navigazione per Crea flusso combinato.



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

Quindi qui abbiamo CreateMealFragment con 2 azioni:

  1. action\_createMealFragment\_to\_save -> quando lutente fa clic su Salva dopo aver inserito il nome del pasto e gli ingredienti, passerà a ProcessMealFragment Quindi la destinazione per quellazione è processMealFragment.
  2. action\_createMealFragment\_to\_add -> Quando lutente fa clic sullicona più per aggiungere più ingredienti nella combinazione, ci spostiamo alla schermata di ricerca dove puoi cerca cibo e aggiungilo, quindi la destinazione per questa azione è searchFoodFragment.

Questo flusso ha 3 hook diff.

Crea hook per i pasti

Un utente può entrare in questo flusso facendo clic sul pulsante CREATE COMBO nella schermata del tracker dei pasti (fig 1) o sul pulsante CREATE A COMBO dalla schermata combinata Pasto (figura 2) o dal pulsante AGGIUNGI CIBO nel flusso di ricerca (figura 3).

GANCIO 1 : schermata Meal tracker



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

Qui abbiamo MealTrackerFragment e abbiamo incluso la creazione di un grafico del pasto. Facendo clic sul pulsante CREA COMBO, lutente accederà al flusso di creazione del pasto.

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

HOOK 2 : schermata combinata pasto



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

Qui abbiamo MyMealFragment e abbiamo incluso create\_meal\_graph. Facendo clic sul pulsante CREA UN COMBO, lutente accederà al flusso di creazione del pasto.

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

Hook 3 : flusso di ricerca, qui comprendiamo il grafico nidificato e come trasferire i dati tra due destinazioni

La navigazione consente di allegare dati a unoperazione di navigazione definendo argomenti per una destinazione. Ad esempio, in questo caso, possiamo passare il tipo di pasto (colazione, pranzo, cena) come argomento in Crea frammento pasto.

In generale, dovresti fortemente preferire passare solo la quantità minima di dati tra le destinazioni . Ad esempio, dovresti passare una chiave per recuperare un oggetto piuttosto che passare loggetto stesso, poiché lo spazio totale per tutti gli stati salvati è limitato su Android. Se devi trasferire grandi quantità di dati, valuta la possibilità di utilizzare un ViewModel.

Per passare i dati devi definire un argomento nel frammento di destinazione in cui desideri ricevere dati.

In questo esempio, stiamo inviando il tipo di pasto da 3 hook diff e verrà ricevuto da CreateMealFragment. Quindi dobbiamo definire arg in 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="" />

Se un tipo di argomento supporta valori null, puoi dichiarare un valore predefinito null utilizzando android:defaultValue="@null".

Puoi controllare tutti i tipi di argomenti supportati da QUI .

Possiamo anche passare argomenti tramite “Deeplink”.

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

Dal frammento del mittente crea un pacchetto di argomenti e passalo al controller di navigazione.



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)

Questa era una piccola discussione sui grafici nidificati, su come utilizzare un grafico di navigazione e su come trasferire i dati tra due destinazioni.

Spero larticolo è stato informativo per te. Se hai commenti o domande, scrivimi.

Till Happy Learning!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *