Grafici nidificati

Flussi di accesso, procedure guidate o altri flussi secondari all'interno dell'app sono in genere rappresentati al meglio come grafici di navigazione nidificati. Nidificando in questo modo flussi di navigazione secondaria indipendenti, il flusso principale dell'interfaccia utente dell'app risulta più semplice da comprendere e gestire.

Inoltre, i grafici nidificati sono riutilizzabili. Forniscono inoltre un livello di incapsulamento: le destinazioni al di fuori del grafico nidificato non hanno accesso diretto a nessuna delle destinazioni all'interno del grafico nidificato. Dovrebbero invece navigate() passare al grafico nidificato, dove la logica interna può cambiare senza influire sul resto del grafico.

Esempio

Il grafico di navigazione di primo livello dell'app deve iniziare con la destinazione iniziale che l'utente vede quando avvia l'app e deve includere le destinazioni che visualizza mentre si sposta sull'app.

Utilizzando il grafico di navigazione di primo livello della Figura 1 come esempio, supponiamo che tu voglia richiedere all'utente di visualizzare le schermate title_screen e registra solo al primo avvio dell'app. In seguito, le informazioni dell'utente vengono archiviate e, nei lanci successivi dell'app, devi portarle direttamente alla schermata di corrispondenza.

Come best practice, imposta la schermata match come destinazione iniziale del grafico di navigazione di primo livello e sposta le schermate di titolo e registrazione in un grafico nidificato, come mostrato nella figura 1:

Quando viene avviata la schermata di corrispondenza, controlla se esiste un utente registrato. Se l'utente non è registrato, vai alla schermata di registrazione.

Per ulteriori informazioni sugli scenari di navigazione condizionale, consulta Navigazione condizionale.

Scrittura

Per creare un grafico di navigazione nidificato utilizzando Compose, utilizza la funzione NavGraphBuilder.navigation(). Utilizzi navigation() come le funzioni NavGraphBuilder.composable() e NavGraphBuilder.dialog() quando aggiungi destinazioni a un grafico.

La differenza principale è che navigation crea un grafico nidificato anziché una nuova destinazione. Quindi chiami composable() e dialog() all'interno della funzione lambda di navigation() per aggiungere destinazioni al grafico nidificato.

Considera in che modo il seguente snippet implementa il grafico di Figura 2 utilizzando Scrivi:

// 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 }
                   }
               }
           )
       }
   }
}

Per navigare direttamente verso una destinazione nidificata, utilizza un tipo di route come per qualsiasi altra destinazione. Questo perché le route sono un concetto globale utilizzato per identificare le destinazioni a cui può accedere qualsiasi schermata:

navController.navigate(route = Match)

.

XML

Quando utilizzi XML, puoi utilizzare l'editor di navigazione per creare il grafico nidificato. Per farlo, segui questi passaggi:

1. Nell'Editor di navigazione, tieni premuto il tasto Maiusc e fai clic sulle destinazioni da includere nel grafico nidificato.

2. Fai clic con il tasto destro del mouse per aprire il menu contestuale e seleziona Sposta nel grafico nidificato > Nuovo grafico. Le destinazioni sono racchiuse in un grafico nidificato. La Figura 2 mostra un grafico nidificato nell'Editor di navigazione:

   

3. Fai clic sul grafico nidificato. Nel riquadro Attributi vengono visualizzati i seguenti attributi:

   • Tipo, che contiene "Grafico nidificato"
   • ID, che contiene un ID assegnato dal sistema per il grafico nidificato. Questo ID viene utilizzato per fare riferimento al grafico nidificato dal codice.

4. Fai doppio clic sul grafico nidificato per visualizzare le relative destinazioni.

5. Fai clic sulla scheda Testo per passare alla visualizzazione XML. È stato aggiunto un grafico di navigazione nidificato al grafico. Questo grafico di navigazione ha i propri elementi navigation, oltre al proprio ID e un attributo startDestination che rimanda alla prima destinazione nel grafico nidificato:

   <?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>
   

6. Nel codice, passa l'ID risorsa dell'azione che collega il grafico principale al grafico nidificato:

   Kotlin

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

   java

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

7. Torna alla scheda Design e torna al grafico principale facendo clic su Root.

Fai riferimento ad altri grafici di navigazione con include

Un altro modo per modularizzare la struttura del grafico è includere un grafico in un altro utilizzando un elemento <include> nel grafico di navigazione padre. Ciò consente di definire il grafico incluso in un modulo o progetto separato insieme, massimizzando così la riusabilità.

Lo snippet seguente mostra come utilizzare <include>:

<!-- (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>

Risorse aggiuntive

Per saperne di più sulla navigazione, consulta le seguenti risorse aggiuntive.

Campioni

• NavigazioneBasicSample

Codelab

• Impara a utilizzare Jetpack Navigation

Video

• Android Jetpack: Gestire la navigazione nell'interfaccia utente con il controller di navigazione (Google I/O '18)