Push Presentation nello sviluppo mobile: cos'è, stack di schermate

Cos'è Push Presentation?

Push Presentation è un meccanismo di navigazione in cui ogni nuova schermata viene posta in cima allo stack, mentre la schermata precedente rimane in memoria sotto di essa. L'utente si addentra nel contenuto aprendo sequenzialmente schermate dettagliate e il pulsante indietro lo riporta al passo precedente.

L'architettura della navigazione Push si basa sulla struttura dati LIFO (Last In, First Out). Una nuova schermata viene sempre aggiunta alla fine dello stack e la rimozione avviene solo dalla cima. Questo garantisce un comportamento prevedibile: l'utente sa sempre che il pulsante indietro lo riporterà esattamente un passo indietro. Lo stack di navigazione può contenere da 2 a 10+ schermate a seconda della complessità dell'applicazione.

Push Presentation è il pattern principale nelle applicazioni con contenuto gerarchico: feed di notizie, cataloghi di prodotti, menu multilivello e documentazione. Secondo Material Design, la navigazione a stack è adatta per scenari in cui l'utente esplora il contenuto dal generale al specifico e ogni schermata successiva approfondisce la comprensione dell'argomento.

Stack di navigazione: principio di funzionamento

Lo stack di navigazione è un insieme ordinato di schermate in cui ogni elemento memorizza lo stato del proprio ViewController o Fragment. Durante un'operazione Push, una nuova schermata viene aggiunta allo stack, la sua comparsa viene animata (slide da destra in iOS, slide dal basso o Fade in Android) e diventa attiva.

Durante un'operazione Pop (pressione del pulsante indietro), la schermata superiore viene rimossa dallo stack, distrutta o spostata in memoria, e la schermata precedente diventa attiva. iOS per impostazione predefinita distrugge il ViewController rimosso, liberando memoria. Android può salvare il Fragment nello stack indietro con possibilità di ripristino senza ricreazione.

La profondità dello stack influisce sulle prestazioni: ogni schermata nello stack consuma memoria. Si raccomanda di non mantenere più di 10 schermate nello stack. Per la navigazione profonda, utilizzare PopToRoot o riavviare lo stack con una nuova schermata radice. Navigation Component in Android gestisce automaticamente lo stato dello stack tramite SavedStateHandle.

Navigazione Push in iOS: UINavigationController

UINavigationController è un controller contenitore iOS che gestisce uno stack di UIViewController. Mostra automaticamente una barra di navigazione con il titolo della schermata corrente e un pulsante indietro. L'animazione push predefinita è uno slide da destra a sinistra, creando una sensazione di immersione nel contenuto per l'utente.

Gestione dello stack

L'aggiunta di una schermata avviene tramite pushViewController(_:animated:). La rimozione avviene tramite popViewController(animated:). Per tornare alla schermata radice, utilizzare popToRootViewController(animated:). UINavigationController supporta anche la gestione programmatica dello stack tramite la proprietà viewControllers — un array di tutti i controller nello stack.

Barra di navigazione e Large Titles

La barra di navigazione contiene il titolo della schermata, un pulsante indietro e pulsanti di azione opzionali. A partire da iOS 11, Large Titles (prefersLargeTitles) consentono di visualizzare il titolo in un carattere ingrandito che si anima e si restringe durante lo scorrimento. Ciò migliora la gerarchia di navigazione e informa l'utente sulla sezione corrente.

let detailVC = DetailViewController()
detailVC.title = "Item Details"
navigationController?.pushViewController(detailVC, animated: true)

// Torna alla schermata precedente
navigationController?.popViewController(animated: true)

// Torna alla radice
navigationController?.popToRootViewController(animated: true)

Navigazione Push in Android: Navigation Component

Navigation Component è una libreria Android Jetpack per la navigazione dichiarativa. Fornisce NavController, che gestisce frammenti o schermate Compose tramite un grafo di navigazione (nav_graph). Push in Android è simile a iOS: ogni nuovo Fragment viene aggiunto allo stack indietro e il pulsante indietro torna al precedente.

NavHost e NavGraph

NavHost è un contenitore che mostra la destinazione corrente dal NavGraph. NavGraph è un file XML che descrive tutte le schermate dell'applicazione e le connessioni tra di esse. Le transizioni sono definite tramite actions specificando la destinazione e argomenti opzionali. Navigation Component gestisce automaticamente il back di sistema, le animazioni e la conservazione dello stato.

Argomenti e Safe Args

Per passare dati tra schermate, Navigation Component supporta Safe Args — generazione di codice di classi di argomenti type-safe. Invece di inserire manualmente dati in un Bundle, lo sviluppatore dichiara argomenti in NavGraph e li riceve tramite le classi Directions e Args generate. Safe Args elimina errori di disallineamento dei tipi e semplifica il refactoring.

// Definizione NavGraph in XML
<!-- res/navigation/nav_graph.xml -->
@navigation {
    NavHost(startDestination = "list") {
        composable("list") { ListScreen() }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { DetailScreen(it.arguments()?.getInt("itemId") ?: 0) }
    }
}

// Naviga programmaticamente
navController.navigate("detail/42")

BottomNavigation con stack Push

Combinare Bottom Navigation e navigazione Push è un pattern comune nelle applicazioni mobili. Ogni scheda Bottom Navigation ha il proprio stack di schermate. Navigation Component supporta questo tramite NavHost per scheda o un singolo NavHost con grafi separati per ogni scheda. Cambiare scheda non reimposta lo stato degli stack push.

Push Presentation vs Modal Presentation

Push Presentation e Modal Presentation risolvono diversi compiti di navigazione. Push è progettato per la visualizzazione sequenziale di contenuti, dove ogni nuova schermata approfondisce il contesto. Modal è per attività focalizzate che richiedono completamento. In pratica, è importante scegliere il pattern corretto per lo scenario specifico.

I criteri principali di selezione: se l'utente deve poter tornare liberamente senza perdere contesto — scegliere Push. Se l'attività è temporanea e blocca il contenuto principale (modulo, autorizzazione) — utilizzare Modal. Mescolare pattern sullo stesso schermo (Push dentro Modal) è accettabile ma richiede una chiara gerarchia visiva.

Un errore comune è utilizzare Modal per sequenze di schermate che sono logicamente parte del flusso principale. Ad esempio, una procedura guidata di creazione ordine (Passo 1 → Passo 2 → Passo 3) è meglio implementarla tramite Push all'interno di un contenitore modale piuttosto che attraverso una catena di finestre modali. Questo preserva la gerarchia di navigazione e la prevedibilità del ritorno.

Esempi di implementazione in Swift e Kotlin

Esaminiamo un'implementazione completa della navigazione Push su entrambe le piattaforme. L'esempio Swift dimostra UINavigationController con gestione programmatica dello stack e gestione dei deep link. L'esempio Kotlin mostra Navigation Component con NavHost, argomenti e animazioni.

class ListViewController: UIViewController {
    func showDetail(_ itemId: Int) {
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let detailVC = storyboard.instantiateViewController(
            withIdentifier: "DetailViewController"
        ) as! DetailViewController
        detailVC.itemId = itemId
        navigationController?.pushViewController(detailVC, animated: true)
    }
}

class DetailViewController: UIViewController {
    var itemId: Int = 0

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Item #\(itemId)"
    }
}

@Composable
fun PushNavigationApp() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "list") {
        composable("list") {
            ListScreen(
                onItemClick = { id -> navController.navigate("detail/$id") }
            )
        }
        composable(
            "detail/{itemId}",
            arguments = listOf(navArgument("itemId") { type = NavType.IntType })
        ) { backStackEntry ->
            val itemId = backStackEntry.arguments()?.getInt("itemId") ?: 0
            DetailScreen(itemId = itemId, onBack = { navController.popBackStack() })
        }
    }
}

Gli esempi mostrano la navigazione Push di base: elenco → dettagli. iOS utilizza storyboard e UINavigationController con passaggio manuale dei dati. Android utilizza NavHost con argomenti type-safe e gestione automatica dello stack indietro. Entrambi gli approcci supportano deep link, animazioni personalizzate e conservazione dello stato durante la rotazione.