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 alla tua 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 file XML sottostante.

Figura 1. L'editor di navigazione
  1. Riquadro Destinazioni: elenca l'host di navigazione e tutte le destinazioni nell'editor grafici.
  2. Editor grafici: contiene una rappresentazione visiva del tuo 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 radice di un grafico di navigazione. Man mano che aggiungi destinazioni e colleghi azioni al grafico, puoi visualizzare gli elementi <destination> e <action> corrispondenti qui come elementi secondari. Gli eventuali grafici nidificati vengono visualizzati come elementi <navigation> secondari.

Aggiungi destinazioni

Puoi creare una destinazione da un frammento o da un'attività esistente. Puoi anche utilizzare l'editor di navigazione per creare una nuova destinazione o creare 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 e poi su Crea nuova destinazione.
  2. Nella finestra di dialogo Nuovo componente Android visualizzata, crea il frammento. Per ulteriori informazioni sui frammenti, consulta la panoramica sui frammenti.

Tornando all'editor di navigazione, vedrai che Android Studio ha aggiunto questa destinazione al grafico.

La Figura 2 mostra un esempio di una destinazione e di una destinazione segnaposto.

Figura 2. Una destinazione e un segnaposto

Per altri modi per aggiungere destinazioni al grafico di navigazione, consulta Destinazioni aggiuntive.

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

Se nell'editor di navigazione è presente un tipo di destinazione che vuoi aggiungere al grafico di navigazione, fai clic su Nuova destinazione .

Successivamente, fai clic sulla destinazione corrispondente nel menu a discesa che viene visualizzato. Ora puoi vedere un'anteprima della destinazione nella vista Struttura insieme al codice XML corrispondente nella vista Testo del grafico di navigazione.

Crea una nuova destinazione del frammento

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

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

    Successivamente, fai clic su Crea nuova destinazione.

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

Tornando all'editor di navigazione, vedrai che Android Studio ha aggiunto questa destinazione al grafico.

La Figura 3 mostra un esempio di una destinazione e di una destinazione segnaposto.

Figura 3. Una destinazione e un segnaposto

Anatomia di una destinazione

Fai clic su una destinazione per selezionarla. Tieni presente i seguenti attributi nel riquadro 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. Questo potrebbe essere visualizzato nell'interfaccia utente, ad esempio se connetti NavGraph a un Toolbar utilizzando setupWithNavController(). 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 con un altro tipo di destinazione.

Fai clic sulla scheda Testo per mostrare la visualizzazione XML del grafico di navigazione. Il file XML contiene gli stessi attributi id, name, label e layout della destinazione, come indicato 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>

Puoi anche utilizzare l'editor di layout per aggiungere un NavHostFragment a un'attività nel seguente modo:

  1. Nell'elenco dei file di progetto, fai doppio clic sul file XML di layout dell'attività per aprirlo nell'editor di layout.
  2. Nel riquadro Palette, scegli la categoria Contenitori. In alternativa, cerca "NavHostFragment".
  3. Trascina la visualizzazione NavHostFragment sulla tua attività.
  4. Nella finestra di dialogo Grafici di navigazione visualizzata, scegli il grafico di navigazione corrispondente da associare a questo NavHostFragment, quindi fai clic su OK.

Collega 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 che ti indirizzano verso una destinazione specifica da qualsiasi punto dell'app.

Con le azioni, rappresenti i diversi percorsi che gli utenti possono seguire nella tua app. Tieni presente che per accedere effettivamente alle 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 sul lato destro della destinazione da cui vuoi che gli utenti possano navigare. Sul lato destro della destinazione viene visualizzato un cerchio, come mostrato nella figura 4.

    Figura 4. Una destinazione con un cerchio di azioni correlate

  2. Trascina il cursore sulla destinazione a cui vuoi che gli utenti accedano e rilasciala. La linea risultante tra le due destinazioni rappresenta un'azione, come mostrato nella Figura 5.

    Figura 5. Collegamento delle destinazioni con un'azione

  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 per il frammento o l'attività di destinazione.

  4. Fai clic sulla scheda Testo per passare alla visualizzazione XML. Un elemento azione è stato aggiunto alla destinazione di origine. L'azione ha un ID e un attributo 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 verso cui deve essere indirizzato un utente.

Destinazioni segnaposto

Puoi utilizzare i segnaposto per rappresentare le destinazioni non implementate. Un segnaposto serve come rappresentazione visiva di una destinazione. Nell'editor di navigazione puoi utilizzare i segnaposto esattamente come faresti con qualsiasi altra destinazione.