Push Presentation no desenvolvimento móvel: o que é, pilha de ecrãs

O que é Push Presentation?

Push Presentation é um mecanismo de navegação onde cada novo ecrã é colocado no topo da pilha, enquanto o ecrã anterior permanece em memória por baixo. O utilizador aprofunda-se no conteúdo abrindo sequencialmente ecrãs detalhados, e o botão de retrocesso volta ao passo anterior.

A arquitetura da navegação Push baseia-se na estrutura de dados LIFO (Last In, First Out). Um novo ecrã é sempre adicionado ao final da pilha, e a remoção ocorre apenas do topo. Isto garante um comportamento previsível: o utilizador sabe sempre que o botão de retrocesso o levará exatamente um passo atrás. A pilha de navegação pode conter de 2 a 10+ ecrãs dependendo da complexidade da aplicação.

Push Presentation é o padrão principal em aplicações com conteúdo hierárquico: feeds de notícias, catálogos de produtos, menus multinível e documentação. De acordo com Material Design, a navegação por pilha é adequada para cenários onde o utilizador explora conteúdo do geral para o específico, e cada ecrã subsequente aprofunda a compreensão do tópico.

Pilha de navegação: princípio de funcionamento

A pilha de navegação é um conjunto ordenado de ecrãs onde cada elemento armazena o estado do seu ViewController ou Fragment. Durante uma operação Push, um novo ecrã é adicionado à pilha, a sua aparência é animada (deslize da direita no iOS, deslize de baixo ou Fade no Android), e torna-se ativo.

Durante uma operação Pop (pressionar retrocesso), o ecrã do topo é removido da pilha, destruído ou movido para memória, e o ecrã anterior torna-se ativo. iOS por padrão destrói o ViewController removido, libertando memória. Android pode guardar o Fragment na pilha de retrocesso com capacidade de restauro sem recriação.

A profundidade da pilha afeta o desempenho: cada ecrã na pilha consome memória. Recomenda-se não manter mais de 10 ecrãs na pilha. Para navegação profunda, use PopToRoot ou reinicie a pilha com um novo ecrã raiz. O Navigation Component no Android gere automaticamente o estado da pilha através de SavedStateHandle.

Navegação Push no iOS: UINavigationController

UINavigationController é um controlador contentor iOS que gere uma pilha de UIViewControllers. Exibe automaticamente uma barra de navegação com o título do ecrã atual e um botão de retrocesso. A animação push padrão é um deslize da direita para a esquerda, criando uma sensação de imersão no conteúdo para o utilizador.

Gestão da pilha

Adicionar um ecrã é feito através de pushViewController(_:animated:). A remoção é feita através de popViewController(animated:). Para voltar ao ecrã raiz, use popToRootViewController(animated:). O UINavigationController também suporta gestão programática da pilha através da propriedade viewControllers — uma matriz de todos os controladores na pilha.

Barra de navegação e Large Titles

A barra de navegação contém o título do ecrã, um botão de retrocesso e botões de ação opcionais. A partir do iOS 11, Large Titles (prefersLargeTitles) permitem exibir o título num tipo de letra ampliado que anima e encolhe durante a rolagem. Isto melhora a hierarquia de navegação e informa o utilizador sobre a secção atual.

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

// Voltar ao ecrã anterior
navigationController?.popViewController(animated: true)

// Voltar à raiz
navigationController?.popToRootViewController(animated: true)

Navegação Push no Android: Navigation Component

Navigation Component é uma biblioteca Android Jetpack para navegação declarativa. Fornece NavController, que gere fragmentos ou ecrãs Compose através de um grafo de navegação (nav_graph). Push no Android é semelhante ao iOS: cada novo Fragment é adicionado à pilha de retrocesso, e o botão de retrocesso volta ao anterior.

NavHost e NavGraph

NavHost é um contentor que exibe o destino atual do NavGraph. NavGraph é um ficheiro XML que descreve todos os ecrãs da aplicação e conexões entre eles. As transições são definidas através de actions especificando o destino e argumentos opcionais. O Navigation Component gere automaticamente o retrocesso do sistema, animações e preservação de estado.

Argumentos e Safe Args

Para passar dados entre ecrãs, o Navigation Component suporta Safe Args — geração de código de classes de argumentos type-safe. Em vez de colocar dados manualmente num Bundle, o programador declara argumentos no NavGraph e recebe-os através das classes Directions e Args geradas. Safe Args elimina erros de incompatibilidade de tipos e simplifica a refatoração.

// Definição NavGraph em 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 programaticamente
navController.navigate("detail/42")

BottomNavigation com pilha Push

Combinar Bottom Navigation e navegação Push é um padrão comum em aplicações móveis. Cada separador Bottom Navigation tem a sua própria pilha de ecrãs. Navigation Component suporta isto através de NavHost por separador ou um único NavHost com grafos separados para cada separador. Mudar de separador não reinicia o estado das pilhas push.

Push Presentation vs Modal Presentation

Push Presentation e Modal Presentation resolvem diferentes tarefas de navegação. Push é projetado para visualização sequencial de conteúdo, onde cada novo ecrã aprofunda o contexto. Modal é para tarefas focadas que requerem conclusão. Na prática, é importante escolher o padrão correto para o cenário específico.

Os critérios principais de seleção: se o utilizador deve ser capaz de voltar livremente sem perder contexto — escolha Push. Se a tarefa é temporária e bloqueia o conteúdo principal (formulário, autorização) — use Modal. Misturar padrões no mesmo ecrã (Push dentro de Modal) é aceitável mas requer uma hierarquia visual clara.

Um erro comum é usar Modal para sequências de ecrãs que são logicamente parte do fluxo principal. Por exemplo, um assistente de criação de encomenda (Passo 1 → Passo 2 → Passo 3) é melhor implementado através de Push dentro de um contentor modal, em vez de uma cadeia de janelas modais. Isto preserva a hierarquia de navegação e a previsibilidade do retorno.

Exemplos de implementação em Swift e Kotlin

Vamos examinar uma implementação completa da navegação Push em ambas as plataformas. O exemplo Swift demonstra UINavigationController com gestão programática da pilha e manipulação de ligações profundas. O exemplo Kotlin mostra Navigation Component com NavHost, argumentos e animações.

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

Os exemplos mostram navegação Push básica: lista → detalhes. iOS usa storyboards e UINavigationController com passagem manual de dados. Android usa NavHost com argumentos type-safe e gestão automática da pilha de retrocesso. Ambas as abordagens suportam ligações profundas, animações personalizadas e preservação de estado na rotação.