Anmeldeabläufe, Assistenten oder andere untergeordnete Abläufe innerhalb deiner App eignen sich in der Regel am besten
die als verschachtelte Navigationsdiagramme dargestellt werden. Durch das Verschachteln in eigenständiger
Subnavigationsflüsse lässt sich der Hauptablauf der App-Benutzeroberfläche einfacher
zu verstehen und zu verwalten.
Darüber hinaus sind verschachtelte Grafiken wiederverwendbar. Sie bieten auch ein Maß an
Kapselung: Ziele außerhalb des verschachtelten Graphen haben keinen direkten Zugriff.
zu einem beliebigen Ziel
in der verschachtelten Grafik hinzugefügt. Stattdessen sollten sie
navigate() zum verschachtelten Graphen selbst hinzu, sodass die interne Logik
ohne Auswirkungen auf den Rest der Grafik zu haben.
Beispiel
Die oberste Navigationsgrafik Ihrer App sollte mit dem
Ziel, das der Nutzer beim Starten der App sieht, und sollte die
und Ziele, die sie sehen, wenn sie sich in Ihrer App bewegen.
<ph type="x-smartling-placeholder"></ph>
Abbildung 1: Ein Navigationsdiagramm der obersten Ebene.
Nehmen wir als Beispiel das Navigationsdiagramm der obersten Ebene aus Abbildung 1: Angenommen, Sie
wollte, dass Nutzer die Bildschirme title_screen und register sehen müssen.
wenn die App zum ersten Mal gestartet wird. Danach geben die Nutzenden
gespeichert ist. Bei späteren App-Starts sollten Sie diese direkt
zur Seite Übereinstimmung.
Als Best Practice sollte der Bildschirm Übereinstimmung als Startziel des
Navigationsdiagramm der obersten Ebene erstellt und die Titel- und Anmeldebildschirme in ein verschachteltes
wie in Abbildung 1 dargestellt:
<ph type="x-smartling-placeholder"></ph>
Abbildung 2: Das Navigationsdiagramm der obersten Ebene enthält jetzt ein verschachteltes Diagramm.
Prüfen Sie nach dem Start des Abgleichsbildschirms, ob ein registrierter Nutzer vorhanden ist. Wenn
wenn der Nutzer nicht registriert ist, navigieren Sie zum Anmeldebildschirm.
Der Hauptunterschied besteht darin, dass navigation einen verschachtelten Graphen und keinen
neuen Ziel. Anschließend rufen Sie composable() und dialog() innerhalb von
Lambda von navigation(), um dem verschachtelten Graph Ziele hinzuzufügen.
Stellen Sie sich vor, wie das folgende Snippet die Grafik in Abbildung 2 mithilfe von
Schreiben:
// Routes@SerializableobjectTitle@SerializableobjectRegister// Route for nested graph@SerializableobjectGame// Routes inside nested graph@SerializableobjectMatch@SerializableobjectInGame@SerializableobjectResultsWinner@SerializableobjectGameOverNavHost(navController,startDestination=Title){composable<Title>{TitleScreen(onPlayClicked={navController.navigate(route=Register)},onLeaderboardsClicked={/* Navigate to leaderboards */})}composable<Register>{RegisterScreen(onSignUpComplete={navController.navigate(route=Game)})}navigation<Game>(startDestination=Match){composable<Match>{MatchScreen(onStartGame={navController.navigate(route=InGame)})}composable<InGame>{InGameScreen(onGameWin={navController.navigate(route=ResultsWinner)},onGameLose={navController.navigate(route=GameOver)})}composable<ResultsWinner>{ResultsWinnerScreen(onNextMatchClicked={navController.navigate(route=Match){popUpTo(route=Match){inclusive=true}}},onLeaderboardsClicked={/* Navigate to leaderboards */})}composable<GameOver>{GameOverScreen(onTryAgainClicked={navController.navigate(route=Match){popUpTo(route=Match){inclusive=true}}})}}}
Wenn Sie ein verschachteltes Ziel direkt navigieren möchten, verwenden Sie wie gewohnt einen Routentyp.
zu jedem anderen Ziel. Das liegt daran, dass Routen ein globales Konzept sind,
Ziele zu identifizieren, zu denen jeder Bildschirm navigieren kann:
navController.navigate(route=Match)
XML
Wenn Sie XML verwenden, können Sie den Navigationseditor verwenden, um Ihre verschachtelte Grafik zu erstellen.
Gehen Sie dazu folgendermaßen vor:
Halten Sie im Navigationseditor die Umschalttaste gedrückt und klicken Sie auf das
Ziele, die in der verschachtelten Grafik enthalten sein sollen.
Klicken Sie mit der rechten Maustaste, um das Kontextmenü zu öffnen, und wählen Sie Move to Nested Graph (Zur verschachtelten Grafik verschieben) aus.
Neues Diagramm: Die Ziele sind in einer verschachtelten Grafik eingeschlossen. Abbildung 2
zeigt ein verschachteltes Diagramm im Navigationseditor an:
<ph type="x-smartling-placeholder"></ph>
Abbildung 2. Verschachteltes Diagramm im Navigationseditor
Klicken Sie auf das verschachtelte Diagramm. Die folgenden Attribute erscheinen in der
Bereich Attribute:
Typ, der „Verschachtelte Grafik“ enthält
ID: Enthält eine vom System zugewiesene ID für die verschachtelte Grafik. Dieses
Die ID wird verwendet, um in Ihrem Code auf die verschachtelte Grafik zu verweisen.
Doppelklicken Sie auf die verschachtelte Grafik, um die Ziele anzuzeigen.
Klicken Sie auf den Tab Text, um zur XML-Ansicht zu wechseln. Ein verschachteltes Navigationsdiagramm
wurde der Grafik hinzugefügt. Diese Navigationsgrafik hat eine eigene navigation
zusammen mit einer eigenen ID und einem startDestination-Attribut,
verweist auf das erste Ziel in der verschachtelten Grafik:
Kehren Sie auf dem Tab Design zur Stammgrafik zurück, indem Sie auf
Root:
Verweisen Sie auf andere Navigationsdiagramme mit Einschließen
Eine andere Möglichkeit zur Modularisierung besteht darin, ein Diagramm in ein Diagramm einzubeziehen
weitere mithilfe eines <include>-Elements im übergeordneten Navigationsdiagramm. Dieses
ermöglicht es, die enthaltene Grafik in einem separaten Modul oder Projekt zu definieren
und somit die Wiederverwendbarkeit maximieren.
Das folgende Snippet veranschaulicht, wie Sie <include> verwenden können:
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.