Editor di navigazione

Android Studio contiene una GUI che ti consente di creare e modificare un grafico di navigazione. Si tratta essenzialmente di un editor per il file di risorse XML sottostante.

Panoramica

Dopo aver aggiunto un grafico XML all'app, Android Studio apre il grafico nell'Editor di navigazione. Nell'editor di navigazione, puoi modificare visivamente i grafici di navigazione o modificare direttamente il codice XML sottostante.

1. Pannello Destinazioni: elenca l'host di navigazione e tutte le destinazioni nell'Editor grafici.
2. Editor grafici: contiene una rappresentazione visiva del grafico di navigazione. Puoi passare dalla visualizzazione Struttura alla rappresentazione XML sottostante nella visualizzazione Testo.
3. Attributi: mostra gli attributi dell'elemento selezionato nel grafico di navigazione.

Fai clic sulla scheda Testo per visualizzare il codice XML corrispondente, che dovrebbe essere simile al seguente snippet:

<?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"
            android:id="@+id/nav_graph">

</navigation>

L'elemento <navigation> è l'elemento principale di un grafico di navigazione. Man mano che aggiungi destinazioni e azioni di connessione al grafico, puoi visualizzare gli elementi <destination> e <action> qui come elementi secondari. Se hai [grafici nidificati][2], vengono visualizzati come elementi secondari <navigation>.

Aggiungere destinazioni

Puoi creare una destinazione da un frammento o un'attività esistente. Puoi anche utilizzare l'editor di navigazione per creare una nuova destinazione o un segnaposto da sostituire in un secondo momento con un frammento o un'attività.

Questo esempio mostra come creare una nuova destinazione. Per aggiungere una nuova destinazione utilizzando l'editor di navigazione:

1. Nell'editor di navigazione, fai clic sull'icona Nuova destinazione , quindi fai clic su Crea nuova destinazione.
2. Nella finestra di dialogo Nuovo componente Android visualizzata, crea il fragment. Per saperne di più sui frammenti, consulta la [panoramica dei frammenti][3].

Torna all'editor di navigazione e noterai che Android Studio ha aggiunto questa destinazione al grafico.

La figura 2 mostra un esempio di destinazione e di [destinazione segnaposto][4].

Per altri modi per aggiungere destinazioni al grafico di navigazione, vedi [Destinazioni aggiuntive][5].

Creare una destinazione da un frammento o un'attività esistente

Nell'editor di navigazione, se hai un tipo di destinazione esistente che vuoi aggiungere al grafico di navigazione, fai clic su Nuova destinazione .

Quindi, fai clic sulla destinazione corrispondente nel menu a discesa visualizzato. Ora puoi visualizzare un'anteprima della destinazione nella visualizzazione Progetto insieme al corrispondente XML nella visualizzazione Testo del grafico di navigazione.

Crea una nuova destinazione di frammento

Per aggiungere un nuovo tipo di destinazione utilizzando l'editor di navigazione:

1. Nell'editor di navigazione, fai clic sull'icona Nuova destinazione .

   Poi, fai clic su Crea nuova destinazione.

2. Nella finestra di dialogo Nuovo componente Android visualizzata, crea il fragment.

Torna all'editor di navigazione e noterai che Android Studio ha aggiunto questa destinazione al grafico.

La figura 3 mostra un esempio di destinazione e di [destinazione segnaposto][2].

Anatomia di una destinazione

Fai clic su una destinazione per selezionarla e prendi nota dei seguenti attributi nel pannello Attributi:

• Il campo Tipo indica se la destinazione è implementata come frammento, attività o altra classe personalizzata nel codice sorgente.
• Il campo Etichetta contiene il nome leggibile della destinazione. Queste informazioni potrebbero essere visualizzate nell'interfaccia utente, ad esempio se connetti [NavGraph][10] a un Toolbar utilizzando [setupWithNavController()][11]. Per questo motivo, utilizza stringhe di risorse per questo valore.
• Il campo ID contiene l'ID destinazione, che viene utilizzato per fare riferimento alla destinazione nel codice.
• Il menu a discesa Classe mostra il nome della classe associata alla destinazione. Fai clic su questo menu a discesa per modificare la classe associata in un altro tipo di destinazione.

Fai clic sulla scheda Testo per visualizzare la visualizzazione XML del grafico di navigazione. Il file XML contiene gli stessi attributi id, name, label e layout per la destinazione, come nel seguente snippet:

<?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/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

NavHostFragment

Puoi anche utilizzare l'[editor layout][1] per aggiungere un NavHostFragment a un'attività procedendo nel seguente modo:

1. Nell'elenco dei file di progetto, fai doppio clic sul file XML del layout dell'attività per aprirlo nell'editor del layout.
2. Nel riquadro Tavolozza, scegli la categoria Container; in alternativa, cerca "NavHostFragment".
3. Trascina la visualizzazione NavHostFragment sull'attività.
4. Nella finestra di dialogo Grafici di navigazione visualizzata, scegli il grafico di navigazione corrispondente da associare a questo NavHostFragment e poi fai clic su Ok.

Collegare le destinazioni

Un'azione è una connessione logica tra le destinazioni. Le azioni sono rappresentate nel grafico di navigazione come frecce. Le azioni in genere collegano una destinazione a un'altra, ma puoi anche creare [azioni globali][6] che ti portano a una destinazione specifica da qualsiasi punto dell'app.

Con le azioni, rappresenti i diversi percorsi che gli utenti possono intraprendere nella tua app. Tieni presente che per navigare effettivamente verso le destinazioni, devi comunque scrivere il codice per eseguire la navigazione.

Puoi utilizzare l'editor di navigazione per collegare due destinazioni nel seguente modo:

1. Nella scheda Design, tieni il puntatore sopra il lato destro della destinazione da cui vuoi che gli utenti navighino. Viene visualizzato un cerchio sul lato destro della destinazione, come mostrato nella figura 4.

   

2. Trascina il cursore sulla destinazione che vuoi che gli utenti raggiungano e rilascia. La linea risultante tra le due destinazioni rappresenta un'azione, come mostrato nella figura 5.

   

3. Fai clic sulla freccia per evidenziare l'azione. I seguenti attributi vengono visualizzati nel riquadro Attributi:

   • Il campo Tipo contiene "Azione".
   • Il campo ID contiene l'ID dell'azione.
   • Il campo Destinazione contiene l'ID del frammento di destinazione o dell'attività.

4. Fai clic sulla scheda Testo per passare alla visualizzazione XML. Un elemento di azione è ora aggiunto alla destinazione di origine. L'azione ha un ID e un attributo di destinazione che contiene l'ID della destinazione successiva, come mostrato nell'esempio seguente:

   <?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/blankFragment">
      <fragment
          android:id="@+id/blankFragment"
          android:name="com.example.cashdog.cashdog.BlankFragment"
          android:label="@string/label_blank"
          tools:layout="@layout/fragment_blank" >
          <action
              android:id="@+id/action_blankFragment_to_blankFragment2"
              app:destination="@id/blankFragment2" />
      </fragment>
      <fragment
          android:id="@+id/blankFragment2"
          android:name="com.example.cashdog.cashdog.BlankFragment2"
          android:label="@string/label_blank_2"
          tools:layout="@layout/fragment_blank_fragment2" />
   </navigation>
   

Nel grafico di navigazione, le azioni sono rappresentate da elementi <action>. Come minimo, un'azione contiene il proprio ID e l'ID della destinazione a cui deve essere indirizzato un utente.

Destinazioni segnaposto

Puoi utilizzare i segnaposto per rappresentare le destinazioni non implementate. Un segnaposto funge da rappresentazione visiva di una destinazione. Nell'editor di navigazione, puoi utilizzare i segnaposto come qualsiasi altra destinazione.

[1]: /studio/write/layout-editor [2]: /guide/navigation/navigation-nested-graphs [3]: /guide/components/fragments [4]: /guide/navigation/navigation-create-destinations#placeholders [5]: /guide/navigation/navigation-create-destinations [6]: /guide/navigation/navigation-global-action [10]: /reference/androidx/navigation/NavGraph [11]: /reference/androidx/navigation/ui/NavigationUI#setupWithNavController(androidx.appcompat.widget.Toolbar,%20androidx.navigation.NavController)