Diese Seite wurde von der Cloud Translation API übersetzt.

Verschachtelte Grafiken

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.

**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:

**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.

Weitere Informationen zu Szenarien mit bedingter Navigation finden Sie unter Bedingte Navigation Navigation.

Schreiben

Um mit der Funktion „Schreiben“ ein verschachteltes Navigationsdiagramm zu erstellen, verwenden Sie die NavGraphBuilder.navigation()-Funktion. Sie verwenden navigation() wie NavGraphBuilder.composable() und NavGraphBuilder.dialog() wenn Sie einer Grafik Ziele hinzufügen.

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
@Serializable object Title
@Serializable object Register

// Route for nested graph
@Serializable object Game

// Routes inside nested graph
@Serializable object Match
@Serializable object InGame
@Serializable object ResultsWinner
@Serializable object GameOver

NavHost(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:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/mainFragment">
   <fragment
       android:id="@+id/mainFragment"
       android:name="com.example.cashdog.cashdog.MainFragment"
       android:label="fragment_main"
       tools:layout="@layout/fragment_main" >
       <action
           android:id="@+id/action_mainFragment_to_sendMoneyGraph"
           app:destination="@id/sendMoneyGraph" />
       <action
           android:id="@+id/action_mainFragment_to_viewBalanceFragment"
           app:destination="@id/viewBalanceFragment" />
   </fragment>
   <fragment
       android:id="@+id/viewBalanceFragment"
       android:name="com.example.cashdog.cashdog.ViewBalanceFragment"
       android:label="fragment_view_balance"
       tools:layout="@layout/fragment_view_balance" />
   <navigation android:id="@+id/sendMoneyGraph" app:startDestination="@id/chooseRecipient">
       <fragment
           android:id="@+id/chooseRecipient"
           android:name="com.example.cashdog.cashdog.ChooseRecipient"
           android:label="fragment_choose_recipient"
           tools:layout="@layout/fragment_choose_recipient">
           <action
               android:id="@+id/action_chooseRecipient_to_chooseAmountFragment"
               app:destination="@id/chooseAmountFragment" />
       </fragment>
       <fragment
           android:id="@+id/chooseAmountFragment"
           android:name="com.example.cashdog.cashdog.ChooseAmountFragment"
           android:label="fragment_choose_amount"
           tools:layout="@layout/fragment_choose_amount" />
   </navigation>
</navigation>

Übergeben Sie im Code die Ressourcen-ID der Aktion, die das Stammdiagramm verbindet zum verschachtelten Graphen hinzu:

Kotlin

view.findNavController().navigate(R.id.action_mainFragment_to_sendMoneyGraph)

Java

Navigation.findNavController(view).navigate(R.id.action_mainFragment_to_sendMoneyGraph);

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:

<!-- (root) nav_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph"
    app:startDestination="@id/fragment">

    <strong><include app:graph="@navigation/included_graph" /></strong>

    <fragment
        android:id="@+id/fragment"
        android:name="com.example.myapplication.BlankFragment"
        android:label="Fragment in Root Graph"
        tools:layout="@layout/fragment_blank">
        <strong><action
            android:id="@+id/action_fragment_to_second_graph"
            app:destination="@id/second_graph" /></strong>
    </fragment>

    ...
</navigation>

<!-- included_graph.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    <strong>android:id="@+id/second_graph"</strong>
    app:startDestination="@id/includedStart">

    <fragment
        android:id="@+id/includedStart"
        android:name="com.example.myapplication.IncludedStart"
        android:label="fragment_included_start"
        tools:layout="@layout/fragment_included_start" />
</navigation>

Weitere Informationen

Weitere Informationen zur Navigation finden Sie in den folgenden zusätzlichen Ressourcen.