1. Antes de começar
Parabéns! Você criou seu primeiro app no Jetpack Compose com navegação entre várias telas. Agora está na hora de colocar em prática o que você aprendeu.
Este exercício tem como foco a criação dos componentes necessários para adicionar navegação a um app com vários elementos de composição de tela. O conteúdo apresentado usa como base o que você aprendeu no codelab Navegar entre telas com o Compose e permite aplicar esse conhecimento para adicionar navegação a um app já existente.
O código da solução está disponível no final deste codelab, mas tente resolver os exercícios antes de conferir as respostas. Considere a solução como uma das maneiras de implementar o app.
Pré-requisitos
- Curso sobre Noções básicas do Android no Compose com o codelab Navegar entre telas com o Compose
O que é necessário
- Um computador com acesso à Internet e o Android Studio instalado
- O código inicial do app Lunch Tray
O que você vai criar
Nestes exercícios, você vai adicionar navegação ao app Lunch Tray para concluir o desenvolvimento dele. O Lunch Tray é um app interativo de pedidos de comida com três telas. Cada tela representa um dos três tipos de itens do menu que podem ser selecionados: prato principal, acompanhamento e guarnição.
Os exercícios estão divididos em seções em que você vai fazer o seguinte:
- Criar uma referência de navegação para o usuário em cada tela.
- Inicializar um controlador de navegação.
- Criar uma barra superior para exibir o título da tela e os botões de navegação, se adequado.
- Configurar um host de navegação que determina o roteamento de uma tela para outra.
O fluxo final do app vai ficar assim:
2. Começar a configuração
Faça o download do código inicial
- No Android Studio, abra a pasta
basic-android-kotlin-compose-training-lunch-tray. - Abra o código do app Lunch Tray no Android Studio.
3. Enumeração de telas
Nesta seção, você vai criar uma classe enum para manter constantes de cada uma das seguintes telas do app Lunch Tray:
- Início
- Menu de pratos principais
- Menu de acompanhamentos
- Menu de guarnições
- Finalizar compra
Cada tela precisa ter um título associado na forma de uma string. As strings estão disponíveis no código inicial como recursos.
4. Inicialização e controlador de navegação
Nesta seção, você vai criar o controlador de navegação. Você também vai inicializar a entrada e o nome da backstack da tela atual.
O nome da tela atual precisa ser o nome da tela inicial ou da tela de destino, se houver.
5. AppBar
Crie um elemento combinável para a AppBar do elemento combinável Scaffold. Ela vai exibir o título da tela atual. Se for possível, adicione o botão de navegação "Voltar" às telas, mas não à tela Start.
Captura de tela final
As capturas de tela abaixo mostram dois exemplos de AppBar: uma sem o botão de cima e outra com ele.
Especificações da interface
Use o ícone Icons.Filled.ArrowBack no botão de navegação "Voltar".
6. Host de navegação
Neste exercício, você vai criar o roteamento de navegação para o app Lunch Tray usando o host de navegação.
Este diagrama mostra o fluxo de navegação do app Lunch Tray:
- O botão Start Order na tela Start abre a tela Entree menu.
- O botão Next na tela Entree menu navega para a tela Side dish menu.
- O botão Next na tela Side dish menu navega para a tela Accompaniment menu.
- O botão Next na tela Accompaniment menu navega para a tela Checkout.
- O botão Submit na tela Checkout navega para a tela Start.
- Em qualquer tela, o botão Cancel navega de volta para a tela Start.
Resultado final
Depois de concluir a implementação, o fluxo de navegação do app vai ficar assim:
