Navigationskomponente, Entwerfen eines Navigationsdiagramms

Veröffentlicht

(9. September 2020)

In diesem Blog möchte ich Ihnen ein verschachteltes Diagramm und eine Diskussion zum Übertragen von Daten zwischen zwei Zielen vorstellen.

Verschachteltes Navigationsdiagramm

Ein Navigationsdiagramm kann verwendet werden, um eine Reihe von Zielen zu gruppieren und wiederzuverwenden. Sie verwenden beispielsweise eine Ansicht, die an mehreren Stellen in Ihrer Anwendung verwendet werden kann. Sie erstellen also eine separate Layoutdatei und fügen diese einfach überall dort ein, wo Sie sie wiederverwenden möchten. Gleiches gilt für das Navigationsdiagramm. Ein gemeinsamer Fluss kann an mehreren Stellen eingeschlossen werden, indem er in einer diff-XML-Datei getrennt wird.

Erklären Sie anhand eines Beispiels: Die benutzerdefinierte Mahlzeit

Die Funktion der benutzerdefinierten Mahlzeit in der Healthify-App würde dem Benutzer helfen, Mahlzeitenkombinationen zu erstellen. Wenn ein Benutzer Obst und Toast zum Frühstück mag, muss er nicht jeden Tag beides hinzufügen. Er könnte eine Kombinationsmahlzeit aus diesen beiden Elementen erstellen und die spezifische Kombination überprüfen. Dies ist ein großes Plus an Zeitersparnis.

Benutzerdefinierter Essensfluss @ (eyepoppper)

Oben ist der benutzerdefinierte Essensfluss dargestellt. Der Benutzer kann seine Mahlzeit benennen und die Elemente in seiner Mahlzeit hinzufügen, um die Kombination zu erstellen. Wenn das einfache Gericht nicht verfügbar ist, kann er die Zutaten hinzufügen.

Die Schaltfläche Hinzufügen führt den Benutzer zu einem Suchbildschirm, und das gesuchte Lebensmittel kann zur Liste hinzugefügt und schließlich durch Klicken gespeichert werden Wenn Sie auf die Schaltfläche Speichern klicken, wird dem Benutzer ein Erfolgsbildschirm angezeigt. Anschließend kehren wir zu dem Bildschirm zurück, von dem aus dieser Fluss gestartet wurde.

Erstellen Sie ein Navigationsdiagramm für den Kombinationsfluss erstellen.



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

Hier haben wir also CreateMealFragment mit 2 Aktionen:

  1. action\_createMealFragment\_to\_save -> Wenn der Benutzer nach Eingabe des Namens und der Zutaten der Mahlzeit auf Speichern klickt, wechselt er zu ProcessMealFragment Das Ziel für diese Aktion ist also processMealFragment.
  2. action\_createMealFragment\_to\_add -> Wenn der Benutzer auf das Plus-Symbol klickt, um weitere Zutaten in die Kombination aufzunehmen, wechseln wir zum Suchbildschirm, wo Sie können Suchen Sie nach Lebensmitteln und fügen Sie sie hinzu. Das Ziel für diese Aktion ist searchFoodFragment.

Dieser Fluss hat 3 verschiedene Haken.

Erstellen von Mahlzeit-Hooks

Ein Benutzer kann in diesen Ablauf eintreten, indem er auf die Schaltfläche CREATE COMBO auf dem Mahlzeit-Tracker-Bildschirm (Abb. 1) oder CREATE A COMBO klickt über den Kombinationsbildschirm Mahlzeit (Abb. 2) oder die Schaltfläche ESSEN HINZUFÜGEN im Suchablauf (Abb. 3).

HOOK 1 : Mahlzeit-Tracker-Bildschirm



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

Hier haben wir MealTrackerFragment und haben ein erstellt Mahlzeit Diagramm. Wenn Sie auf die Schaltfläche COMBO ERSTELLEN klicken, gibt der Benutzer den Menüfluss erstellen ein.

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

HOOK 2 : Mahlzeit-Kombinationsbildschirm



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

Hier haben wir MyMealFragment und wir haben enthalten create\_meal\_graph. Wenn Sie auf ERSTELLEN klicken, wird der Benutzer eine COMBO-Schaltfläche eingeben, um den Essensfluss zu erstellen.

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

Hook 3 : Suchablauf, hier verstehen wir verschachtelte Diagramme sowie wie Daten zwischen zwei Zielen übertragen werden

Mit der Navigation können Sie Daten an eine Navigationsoperation anhängen, indem Sie Argumente für ein Ziel definieren. In diesem Fall können wir beispielsweise den Mahlzeitentyp (Frühstück, Mittagessen, Abendessen) als Argument in „Mahlzeitfragment erstellen“ übergeben.

Im Allgemeinen sollten Sie es stark vorziehen, nur die minimale Datenmenge zwischen Zielen zu übergeben . Sie sollten beispielsweise einen Schlüssel zum Abrufen eines Objekts übergeben, anstatt das Objekt selbst zu übergeben, da der Gesamtspeicherplatz für alle gespeicherten Status unter Android begrenzt ist. Wenn Sie große Datenmengen übergeben müssen, sollten Sie ein ViewModel verwenden.

Um Daten zu übergeben, müssen Sie im Zielfragment ein Argument definieren, in das Sie möchten Daten empfangen.

In diesem Beispiel senden wir den Mahlzeitentyp von 3 verschiedenen Hooks und er wird von CreateMealFragment empfangen. Also müssen wir arg in CreateMealFragment definieren.

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

Wenn ein Argumenttyp Nullwerte unterstützt, können Sie mit android:defaultValue="@null" einen Standardwert von null deklarieren.

Sie können alle unterstützten Argumenttypen unter HIER überprüfen.

Wir können Argumente auch über „Deeplink“ übergeben.

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

Erstellen Sie aus dem Absenderfragment ein Bündel von Argumenten und übergeben Sie es an den Navigationscontroller.



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)

Dies war eine kleine Diskussion über verschachtelte Diagramme, die Verwendung eines Navigationsdiagramms und das Übergeben von Daten zwischen zwei Zielen.

Ich hoffe Der Artikel war informativ für Sie. Wenn Sie Feedback oder Fragen haben, schreiben Sie mir bitte zurück.

Bis zum glücklichen Lernen!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.