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 lo apre nell'editor di navigazione. Nell'editor di navigazione, puoi modificare visivamente i grafici di navigazione o modificare direttamente l'XML sottostante.

1. Riquadro Destinazioni: elenca l'host di navigazione e tutte le destinazioni nell'editor del grafico.
2. Editor del grafico: contiene una rappresentazione visiva del grafico di navigazione. Puoi passare dalla visualizzazione Progetto 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 l'XML corrispondente, che dovrebbe essere simile allo snippet seguente:

<?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. Quando aggiungi destinazioni e azioni di collegamento al grafico, puoi visualizzare qui gli elementi <destination> e <action> corrispondenti come elementi secondari. Se hai grafici nidificati, vengono visualizzati come elementi <navigation> secondari.

Aggiungere destinazioni

Puoi creare una destinazione da un fragment 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 fragment 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 su Crea nuova destinazione.
2. Nella finestra di dialogo Nuovo componente Android che viene visualizzata, crea il fragment. Per saperne di più sui fragment, consulta la panoramica dei fragment.

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.

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

Creare una destinazione da un fragment 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 .

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

Creare una nuova destinazione fragment

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 che viene 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.

Anatomia di una destinazione

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

• Il campo Tipo indica se la destinazione è implementata come fragment, attività o altra classe personalizzata nel codice sorgente.
• Il campo Etichetta contiene il nome della destinazione leggibile dall'utente. Questo potrebbe essere visualizzato nell'interfaccia utente, ad esempio se colleghi NavGraph a una Toolbar utilizzando setupWithNavController(). Per questo motivo, utilizza le stringhe di risorse per questo valore.
• Il campo ID contiene l'ID della 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. L'XML contiene gli stessi attributi id, name, label e layout per la destinazione, come nello snippet 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" />
</navigation>

NavHostFragment

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

1. Nell'elenco dei file di progetto, fai doppio clic sul file XML di layout dell'attività per aprirlo nel Layout Editor.
2. Nel riquadro Palette , scegli la categoria Container oppure cerca "NavHostFragment".
3. Trascina la visualizzazione NavHostFragment sull'attività.
4. Nella finestra di dialogo Grafici di navigazione che viene visualizzata, scegli il grafico di navigazione corrispondente da associare a questo NavHostFragment, quindi 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 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 procedendo nel seguente modo:

1. Nella scheda Progetto, tieni il puntatore sul lato destro della destinazione da cui vuoi che gli utenti navighino. Sul lato destro della destinazione viene visualizzato un cerchio, come mostrato nella Figura 4.

   

2. Trascina il cursore sulla destinazione verso cui vuoi che gli utenti navighino 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. Nel riquadro Attributi vengono visualizzati i seguenti attributi:

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

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

   xml <?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 faresti con qualsiasi altra destinazione.