Push Presentation in mobiele ontwikkeling: wat is het, schermstack

Wat is Push Presentation?

Push Presentation — is een navigatiemechanisme waarbij elk nieuw scherm bovenop de stack wordt geplaatst, terwijl het vorige scherm in het geheugen eronder blijft. De gebruiker navigeert dieper in de inhoud door achtereenvolgens detailschermen te openen, en de terugknop brengt hem terug naar de vorige stap.

De architectuur van Push-navigatie is gebaseerd op de LIFO-gegevensstructuur (Last In, First Out). Een nieuw scherm wordt altijd aan het einde van de stack toegevoegd en verwijdering vindt alleen van bovenaf plaats. Dit garandeert voorspelbaar gedrag: de gebruiker weet altijd dat de terugknop hem precies één stap terugbrengt. De navigatiestack kan 2 tot 10+ schermen bevatten, afhankelijk van de complexiteit van de app.

Push Presentation is het primaire patroon in apps met hiërarchische inhoud: nieuwsfeeds, productcatalogi, menu's met meerdere niveaus en documentatie. Volgens Material Design is stacknavigatie geschikt voor scenario's waarin de gebruiker inhoud van algemeen naar specifiek verkent en elk volgend scherm het begrip van het onderwerp verdiept.

Navigatiestack: werkingsprincipe

De navigatiestack — is een geordende set schermen, waarbij elk element de status van zijn ViewController of Fragment opslaat. Tijdens een Push-operatie wordt een nieuw scherm aan de stack toegevoegd, de weergave ervan wordt geanimeerd (slide van rechts in iOS, slide van onderen of Fade in Android) en wordt actief.

Tijdens een Pop-operatie (terugdrukken) wordt het bovenste scherm uit de stack verwijderd, vernietigd of naar het geheugen verplaatst, en wordt het vorige scherm actief. iOS vernietigt standaard de popped ViewController en maakt geheugen vrij. Android kan de Fragment in de back stack bewaren met de mogelijkheid om te herstellen zonder opnieuw te creëren.

De diepte van de stack beïnvloedt de prestaties: elk scherm in de stack verbruikt geheugen. Het wordt aanbevolen niet meer dan 10 schermen in de stack te bewaren. Voor diepe navigatie gebruikt u PopToRoot of herstart u de stack met een nieuw root-scherm. Navigation Component in Android beheert automatisch de stackstatus via SavedStateHandle.

Push-navigatie in iOS: UINavigationController

UINavigationController — een containercontroller in iOS die de stack van UIViewController beheert. Het toont automatisch de navigatiebalk (navigation bar) met de titel van het huidige scherm en een terugknop. De standaard Push-animatie — slide van rechts naar links, die bij de gebruiker het gevoel van onderdompeling in de inhoud creëert.

Stackbeheer

Toevoegen van een scherm gebeurt via pushViewController(_:animated:). Verwijderen — via popViewController(animated:). Om terug te keren naar het root-scherm wordt popToRootViewController(animated:) gebruikt. UINavigationController ondersteunt ook programmatisch stackbeheer via de eigenschap viewControllers — een array van alle controllers in de stack.

Navigation Bar en Large Titles

De navigatiebalk bevat de schermtitel (title), een terugknop en optionele actieknoppen. Vanaf iOS 11 maken Large Titles (prefersLargeTitles) het mogelijk de titel in een vergroot lettertype weer te geven, dat bij scrollen geanimeerd krimpt. Dit verbetert de navigatiehiërarchie en informeert de gebruiker over de huidige sectie.

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

// Terug naar vorig scherm
navigationController?.popViewController(animated: true)

// Terug naar rootscherm
navigationController?.popToRootViewController(animated: true)

Push-navigatie in Android: Navigation Component

Navigation Component — een Android Jetpack-bibliotheek voor declaratieve navigatie. Het biedt NavController die fragmenten of compose-schermen beheert via een navigatiegraaf (nav_graph). Push in Android is analoog aan iOS: elke nieuwe Fragment wordt aan de back stack toegevoegd en de terugknop herstelt de vorige.

NavHost en NavGraph

NavHost — een container die de huidige bestemming uit NavGraph toont. NavGraph — een XML-bestand dat alle schermen van de app en de verbindingen ertussen beschrijft. Transities worden gedefinieerd via actions met specificatie van destination en optionele argumenten. Navigation Component verwerkt automatisch de systeem-terugknop, animaties en statusopslag.

Argumenten en Safe Args

Voor gegevensoverdracht tussen schermen ondersteunt Navigation Component Safe Args — codegeneratie van type-safe argumentklassen. In plaats van handmatig gegevens in Bundle te plaatsen, declareert de ontwikkelaar argumenten in NavGraph en ontvangt ze via gegenereerde Directions- en Args-klassen. Safe Args elimineert type-mismatchfouten en vereenvoudigt refactoring.

// NavGraph-definitie 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) }
    }
}

// Programmatisch navigeren
navController.navigate("detail/42")

BottomNavigation met Push-stack

Combinatie van Bottom Navigation en Push-navigatie — een veelvoorkomend patroon in mobiele apps. Elk tabblad van Bottom Navigation heeft zijn eigen schermstack. Navigation Component ondersteunt dit via NavHost per tab of een enkele NavHost met aparte grafen voor elk tabblad. Het wisselen van tabbladen reset de status van Push-stacks niet.

Push Presentation vs Modal Presentation

Push Presentation en Modal Presentation lossen verschillende navigatietaken op. Push is bedoeld voor sequentiële inhoudsweergave, waarbij elk nieuw scherm de context verdiept. Modal — voor focustaken die voltooiing vereisen. In de praktijk is het belangrijk het juiste patroon voor het specifieke scenario te kiezen.

Belangrijkste selectiecriteria: als de gebruiker vrij moet kunnen terugkeren zonder contextverlies — kies Push. Als de taak tijdelijk is en de hoofdinhoud blokkeert (formulier, authenticatie) — gebruik Modal. Het mengen van patronen op één scherm (Push binnen Modal) is toegestaan, maar vereist een duidelijke visuele hiërarchie.

Het is een fout om Modal te gebruiken voor schermsequenties die logisch deel uitmaken van de hoofdstroom. Bijvoorbeeld, de ordercreatie-assistent (Stap 1 → Stap 2 → Stap 3) kan beter worden geïmplementeerd via Push binnen een modale container dan via een keten van modale vensters. Dit behoudt de navigatiehiërarchie en de voorspelbaarheid van terugkeer.

Implementatievoorbeelden in Swift en Kotlin

Laten we de volledige implementatie van Push-navigatie op beide platforms bekijken. Het Swift-voorbeeld demonstreert UINavigationController met programmatisch stackbeheer en verwerking van diepe links. Het Kotlin-voorbeeld toont Navigation Component met NavHost, argumenten en animaties.

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() })
        }
    }
}

De voorbeelden tonen basis Push-navigatie: lijst → details. iOS gebruikt storyboards en UINavigationController met handmatige gegevensoverdracht. Android gebruikt NavHost met type-safe argumenten en automatisch back stack-beheer. Beide benaderingen ondersteunen diepe links, aangepaste animaties en statusopslag bij rotatie.