La navigazione tra diverse schermate e app è una parte fondamentale dell'esperienza utente. I seguenti principi stabiliscono una base di riferimento per un'esperienza utente coerente e intuitiva nelle app. Il componente Navigation è progettato per implementare questi principi per impostazione predefinita, garantendo che gli utenti possano applicare le stesse euristiche e gli stessi pattern di navigazione quando passano da un'app all'altra.
Destinazione di partenza fissa
Ogni app che crei ha una destinazione di partenza fissa. Questa è la prima schermata che l'utente vede quando avvia l'app da Avvio app. Questa destinazione è anche l'ultima schermata che l'utente vede quando torna alla schermata di avvio dopo aver premuto il pulsante Indietro. Prendiamo come esempio l'app Sunflower.
Figura 1. La schermata dell'elenco è la destinazione iniziale dell'app Sunflower.
Quando l'app Sunflower viene avviata dal programma di avvio, la prima schermata che un utente vede è la schermata elenco, ovvero l'elenco delle piante nel suo giardino. Questa è anche l'ultima schermata che vedono prima di uscire dall'app. Se premono il pulsante Indietro dalla schermata dell'elenco, tornano all'Avvio app.
Lo stato di navigazione è rappresentato come uno stack di destinazioni
Quando l'app viene avviata per la prima volta, viene creata una nuova attività per l'utente e l'app mostra la destinazione iniziale. Questa diventa la destinazione di base di quello che è noto come back stack ed è la base per lo stato di navigazione della tua app. La parte superiore dello stack è la schermata corrente, mentre le destinazioni precedenti nello stack rappresentano la cronologia dei luoghi visitati. Il back stack ha sempre la destinazione iniziale dell'app nella parte inferiore dello stack.
Le operazioni che modificano il back stack agiscono sempre sulla parte superiore dello stack, inserendo una nuova destinazione nella parte superiore dello stack o estraendo la destinazione più in alto dallo stack. La navigazione verso una destinazione spinge quest'ultima in cima allo stack.
Il componente Navigation gestisce tutto l'ordine del back stack per te, anche se puoi scegliere di gestirlo autonomamente.
Su e Indietro sono identici all'interno dell'attività dell'app
Figura 2. I pulsanti Su e Indietro
Il pulsante Indietro viene visualizzato nella barra di navigazione del sistema nella parte inferiore dello schermo e viene utilizzato per navigare in ordine cronologico inverso nella cronologia delle schermate con cui l'utente ha lavorato di recente. Quando premi il pulsante Indietro, la destinazione corrente viene rimossa dalla parte superiore del back stack e passi alla destinazione precedente.
Il pulsante Su viene visualizzato nella barra dell'app nella parte superiore dello schermo. All'interno dell'attività della tua app, i pulsanti Su e Indietro si comportano in modo identico.
Il pulsante Su non chiude mai l'app
Se un utente si trova nella destinazione iniziale dell'app, il pulsante Su non viene visualizzato, perché non consente mai di uscire dall'app. Il pulsante Indietro, invece, viene visualizzato e consente di uscire dall'app.
Quando la tua app viene avviata utilizzando un deep link nell'attività di un'altra app, il pulsante Su riporta gli utenti all'attività della tua app e attraverso un back stack simulato e non all'app che ha attivato il deep link. Il pulsante Indietro, invece, ti riporta all'altra app.
Il deep linking simula la navigazione manuale
Sia che utilizzi il deep linking o che navighi manualmente verso una destinazione specifica, puoi utilizzare il pulsante Su per navigare tra le destinazioni fino a tornare alla destinazione iniziale.
Quando esegui il deep linking a una destinazione all'interno dell'attività della tua app, l'eventuale back stack esistente per l'attività della tua app viene rimosso e sostituito con il back stack con deep link.
Utilizzando di nuovo l'app Sunflower come esempio, supponiamo che l'utente abbia avviato l'app dalla schermata di avvio e sia passato alla schermata dei dettagli di una mela. La schermata Recenti indica che esiste un'attività con la schermata più in alto, ovvero la schermata dei dettagli per Apple.
Figura 3. Navigazione dell'utente nell'app Sunflower e back stack risultante.
A questo punto, l'utente può toccare il pulsante Home per mettere l'app in background. Supponiamo ora che questa app abbia una funzionalità di deep link che consente agli utenti di avviare direttamente una schermata specifica dei dettagli della pianta in base al nome. L'apertura dell'app tramite questo deep link sostituisce completamente l'attuale back stack di Sunflower mostrato nella figura 3 con un nuovo back stack, come mostrato nella figura 4:
Figura 4. Se segui un deep link, il back stack esistente dell'app Sunflower viene sostituito.
Nota che il back stack di Sunflower è sostituito da un back stack sintetico con la schermata dei dettagli dell'avocado in alto. Anche la schermata My Garden, che è la destinazione iniziale, è stata aggiunta al back stack. Il back stack originale di Sunflower non è più disponibile, inclusa la conoscenza dell'app che l'utente si trovava nella schermata dei dettagli di Apple in precedenza. Tutto questo è importante perché il back stack sintetico deve essere realistico. Deve corrispondere a un back stack che potrebbe essere stato ottenuto navigando in modo organico nell'app.
Per soddisfare questa esigenza, il back stack sintetico creato è semplificato e basato su NavGraph. Per un NavGraph semplice senza nidificazione, questo sarà costituito dalla destinazione iniziale e dalla destinazione del deep link. Per i grafici di navigazione nidificati più complessi, il back stack sintetico conterrà anche le destinazioni di partenza di tutti i grafici nidificati che sono predecessori della destinazione del deep link.
Il componente Navigation supporta il deep linking e ricrea un back stack realistico quando esegui il collegamento a qualsiasi destinazione nel grafico di navigazione.