Push Presentation en el desarrollo móvil: qué es, pila de pantallas

¿Qué es Push Presentation?

Push Presentation es un mecanismo de navegación en el que cada nueva pantalla se coloca en la cima de la pila, mientras que la pantalla anterior permanece en memoria debajo. El usuario profundiza en el contenido abriendo secuencialmente pantallas detalladas, y el botón de retroceso lo devuelve al paso anterior.

La arquitectura de la navegación Push se basa en la estructura de datos LIFO (Last In, First Out). Una nueva pantalla siempre se añade al final de la pila, y la eliminación ocurre solo desde la cima. Esto garantiza un comportamiento predecible: el usuario siempre sabe que el botón de retroceso lo devolverá exactamente un paso atrás. La pila de navegación puede contener de 2 a 10+ pantallas dependiendo de la complejidad de la aplicación.

Push Presentation es el patrón principal en aplicaciones con contenido jerárquico: feeds de noticias, catálogos de productos, menús multinivel y documentación. Según Material Design, la navegación por pila es adecuada para escenarios donde el usuario explora contenido de lo general a lo específico, y cada pantalla subsiguiente profundiza la comprensión del tema.

Pila de navegación: principio de funcionamiento

La pila de navegación es un conjunto ordenado de pantallas donde cada elemento almacena el estado de su ViewController o Fragment. Durante una operación Push, se añade una nueva pantalla a la pila, su aparición se anima (deslizamiento desde la derecha en iOS, deslizamiento desde abajo o Fade en Android), y se vuelve activa.

Durante una operación Pop (presionar retroceso), la pantalla superior se elimina de la pila, se destruye o pasa a memoria, y la pantalla anterior se vuelve activa. iOS por defecto destruye el ViewController extraído, liberando memoria. Android puede guardar el Fragment en la pila de retroceso con la posibilidad de restaurarlo sin recreación.

La profundidad de la pila afecta el rendimiento: cada pantalla en la pila consume memoria. Se recomienda no mantener más de 10 pantallas en la pila. Para navegación profunda, use PopToRoot o reinicie la pila con una nueva pantalla raíz. Navigation Component en Android gestiona automáticamente el estado de la pila a través de SavedStateHandle.

Navegación Push en iOS: UINavigationController

UINavigationController es un controlador contenedor de iOS que gestiona una pila de UIViewControllers. Muestra automáticamente una barra de navegación con el título de la pantalla actual y un botón de retroceso. La animación push predeterminada es un deslizamiento de derecha a izquierda, creando una sensación de inmersión en el contenido para el usuario.

Gestión de la pila

La adición de una pantalla se realiza mediante pushViewController(_:animated:). La eliminación se realiza mediante popViewController(animated:). Para volver a la pantalla raíz, use popToRootViewController(animated:). UINavigationController también soporta la gestión programática de la pila a través de la propiedad viewControllers — un array de todos los controladores en la pila.

Barra de navegación y Large Titles

La barra de navegación contiene el título de la pantalla, un botón de retroceso y botones de acción opcionales. A partir de iOS 11, Large Titles (prefersLargeTitles) permiten mostrar el título en una fuente ampliada que se anima y se encoge durante el desplazamiento. Esto mejora la jerarquía de navegación e informa al usuario sobre la sección actual.

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

// Volver a la pantalla anterior
navigationController?.popViewController(animated: true)

// Volver a la raíz
navigationController?.popToRootViewController(animated: true)

Navegación Push en Android: Navigation Component

Navigation Component es una biblioteca de Android Jetpack para navegación declarativa. Proporciona NavController, que gestiona fragmentos o pantallas de Compose a través de un grafo de navegación (nav_graph). Push en Android es similar a iOS: cada nuevo Fragment se añade a la pila de retroceso, y el botón de retroceso devuelve al anterior.

NavHost y NavGraph

NavHost es un contenedor que muestra el destino actual del NavGraph. NavGraph es un archivo XML que describe todas las pantallas de la aplicación y las conexiones entre ellas. Las transiciones se definen mediante actions especificando el destino y argumentos opcionales. Navigation Component maneja automáticamente el retroceso del sistema, las animaciones y la conservación del estado.

Argumentos y Safe Args

Para pasar datos entre pantallas, Navigation Component soporta Safe Args — generación de código de clases de argumentos type-safe. En lugar de colocar datos manualmente en un Bundle, el desarrollador declara argumentos en el NavGraph y los recibe a través de las clases Directions y Args generadas. Safe Args elimina errores de discrepancia de tipos y simplifica la refactorización.

// Definición de 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) }
    }
}

// Navegar programáticamente
navController.navigate("detail/42")

BottomNavigation con pila Push

Combinar Bottom Navigation y navegación Push es un patrón común en aplicaciones móviles. Cada pestaña de Bottom Navigation tiene su propia pila de pantallas. Navigation Component soporta esto mediante NavHost por pestaña o un solo NavHost con grafos separados para cada pestaña. Cambiar de pestaña no restablece el estado de las pilas push.

Push Presentation vs Modal Presentation

Push Presentation y Modal Presentation resuelven diferentes tareas de navegación. Push está diseñado para la visualización secuencial de contenido, donde cada nueva pantalla profundiza el contexto. Modal es para tareas enfocadas que requieren completarse. En la práctica, es importante elegir el patrón correcto para cada escenario específico.

Los criterios principales de selección: si el usuario debe poder retroceder libremente sin perder contexto — elija Push. Si la tarea es temporal y bloquea el contenido principal (formulario, autorización) — use Modal. Mezclar patrones en una misma pantalla (Push dentro de Modal) es aceptable pero requiere una jerarquía visual clara.

Un error común es usar Modal para secuencias de pantallas que lógicamente son parte del flujo principal. Por ejemplo, un asistente de creación de pedidos (Paso 1 → Paso 2 → Paso 3) se implementa mejor mediante Push dentro de un contenedor modal, en lugar de una cadena de ventanas modales. Esto preserva la jerarquía de navegación y la previsibilidad del retorno.

Ejemplos de implementación en Swift y Kotlin

Examinemos una implementación completa de la navegación Push en ambas plataformas. El ejemplo en Swift demuestra UINavigationController con gestión programática de la pila y manejo de enlaces profundos. El ejemplo en Kotlin muestra Navigation Component con NavHost, argumentos y animaciones.

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

Los ejemplos muestran la navegación Push básica: lista → detalles. iOS utiliza storyboards y UINavigationController con paso manual de datos. Android utiliza NavHost con argumentos type-safe y gestión automática de la pila de retroceso. Ambos enfoques soportan enlaces profundos, animaciones personalizadas y conservación del estado al rotar.