Push Presentation dans le développement mobile : ce que c'est, pile d'écrans

Qu'est-ce que Push Presentation ?

Push Presentation est un mécanisme de navigation où chaque nouvel écran est placé au sommet de la pile, tandis que l'écran précédent reste en mémoire en dessous. L'utilisateur approfondit le contenu en ouvrant séquentiellement des écrans détaillés, et le bouton de retour le ramène à l'étape précédente.

L'architecture de la navigation Push est basée sur la structure de données LIFO (Last In, First Out). Un nouvel écran est toujours ajouté à la fin de la pile, et la suppression se fait uniquement depuis le sommet. Cela garantit un comportement prévisible : l'utilisateur sait toujours que le bouton de retour le ramènera exactement une étape en arrière. La pile de navigation peut contenir de 2 à 10+ écrans selon la complexité de l'application.

Push Presentation est le motif principal dans les applications avec contenu hiérarchique : fils d'actualités, catalogues de produits, menus multi-niveaux et documentation. Selon Material Design, la navigation par pile est adaptée aux scénarios où l'utilisateur explore le contenu du général au spécifique, et chaque écran suivant approfondit la compréhension du sujet.

Pile de navigation : principe de fonctionnement

La pile de navigation est un ensemble ordonné d'écrans où chaque élément stocke l'état de son ViewController ou Fragment. Lors d'une opération Push, un nouvel écran est ajouté à la pile, son apparition est animée (glissement depuis la droite dans iOS, glissement depuis le bas ou Fade dans Android), et il devient actif.

Lors d'une opération Pop (appui sur retour), l'écran supérieur est retiré de la pile, détruit ou déplacé en mémoire, et l'écran précédent devient actif. iOS détruit par défaut le ViewController dépilé, libérant de la mémoire. Android peut sauvegarder le Fragment dans la pile arrière avec possibilité de restauration sans recréation.

La profondeur de la pile affecte les performances : chaque écran dans la pile consomme de la mémoire. Il est recommandé de ne pas conserver plus de 10 écrans dans la pile. Pour une navigation profonde, utilisez PopToRoot ou redémarrez la pile avec un nouvel écran racine. Navigation Component sous Android gère automatiquement l'état de la pile via SavedStateHandle.

Navigation Push dans iOS : UINavigationController

UINavigationController est un contrôleur conteneur iOS qui gère une pile de UIViewControllers. Il affiche automatiquement une barre de navigation avec le titre de l'écran actuel et un bouton de retour. L'animation push par défaut est un glissement de droite à gauche, créant une sensation d'immersion dans le contenu pour l'utilisateur.

Gestion de la pile

L'ajout d'un écran se fait via pushViewController(_:animated:). La suppression se fait via popViewController(animated:). Pour revenir à l'écran racine, utilisez popToRootViewController(animated:). UINavigationController prend également en charge la gestion programmatique de la pile via la propriété viewControllers — un tableau de tous les contrôleurs dans la pile.

Barre de navigation et Large Titles

La barre de navigation contient le titre de l'écran, un bouton de retour et des boutons d'action optionnels. À partir d'iOS 11, Large Titles (prefersLargeTitles) permettent d'afficher le titre dans une police agrandie qui s'anime et se rétrécit lors du défilement. Cela améliore la hiérarchie de navigation et informe l'utilisateur de la section actuelle.

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

// Revenir à l'écran précédent
navigationController?.popViewController(animated: true)

// Revenir à la racine
navigationController?.popToRootViewController(animated: true)

Navigation Push dans Android : Navigation Component

Navigation Component est une bibliothèque Android Jetpack pour la navigation déclarative. Elle fournit NavController, qui gère les fragments ou les écrans Compose via un graphe de navigation (nav_graph). Push sous Android est similaire à iOS : chaque nouveau Fragment est ajouté à la pile arrière, et le bouton de retour revient au précédent.

NavHost et NavGraph

NavHost est un conteneur qui affiche la destination actuelle du NavGraph. NavGraph est un fichier XML décrivant tous les écrans de l'application et les connexions entre eux. Les transitions sont définies via des actions spécifiant la destination et des arguments optionnels. Navigation Component gère automatiquement le retour système, les animations et la préservation de l'état.

Arguments et Safe Args

Pour transmettre des données entre écrans, Navigation Component prend en charge Safe Args — la génération de code de classes d'arguments type-safe. Au lieu de placer manuellement des données dans un Bundle, le développeur déclare des arguments dans NavGraph et les reçoit via les classes Directions et Args générées. Safe Args élimine les erreurs d'incompatibilité de types et simplifie le refactoring.

// Définition NavGraph en 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) }
    }
}

// Naviguer programmatiquement
navController.navigate("detail/42")

BottomNavigation avec pile Push

Combiner Bottom Navigation et navigation Push est un motif courant dans les applications mobiles. Chaque onglet Bottom Navigation a sa propre pile d'écrans. Navigation Component prend en charge cela via NavHost par onglet ou un seul NavHost avec des graphes séparés pour chaque onglet. Changer d'onglet ne réinitialise pas l'état des piles push.

Push Presentation vs Modal Presentation

Push Presentation et Modal Presentation résolvent différentes tâches de navigation. Push est conçu pour la visualisation séquentielle de contenu, où chaque nouvel écran approfondit le contexte. Modal est pour les tâches ciblées qui nécessitent d'être terminées. En pratique, il est important de choisir le bon motif pour le scénario spécifique.

Les critères de sélection principaux : si l'utilisateur doit pouvoir revenir librement sans perdre le contexte — choisissez Push. Si la tâche est temporaire et bloque le contenu principal (formulaire, autorisation) — utilisez Modal. Mélanger les motifs sur un même écran (Push dans Modal) est acceptable mais nécessite une hiérarchie visuelle claire.

Une erreur courante est d'utiliser Modal pour des séquences d'écrans qui font logiquement partie du flux principal. Par exemple, un assistant de création de commande (Étape 1 → Étape 2 → Étape 3) est mieux implémenté via Push dans un conteneur modal plutôt que par une chaîne de fenêtres modales. Cela préserve la hiérarchie de navigation et la prévisibilité du retour.

Exemples d'implémentation en Swift et Kotlin

Examinons une implémentation complète de la navigation Push sur les deux plateformes. L'exemple Swift démontre UINavigationController avec gestion programmatique de la pile et traitement des liens profonds. L'exemple Kotlin montre Navigation Component avec NavHost, arguments et animations.

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

Les exemples montrent la navigation Push de base : liste → détails. iOS utilise des storyboards et UINavigationController avec passage manuel de données. Android utilise NavHost avec des arguments type-safe et une gestion automatique de la pile arrière. Les deux approches prennent en charge les liens profonds, les animations personnalisées et la préservation de l'état lors de la rotation.