Navegação no Android com Jetpack Compose usando o Componente de Navegação (Navigation Component)
Entende-se por navegação no Android o acto de sair de uma “tela” para a outra, seja entre Activities ou Fragments. O Jetpack Compose permite navegar entre funções compostas usando o componente de navegação.
Neste artigo, irei ensinar em 3 passos, sobre como navegar entre diferentes funções compostas usando o componente de navegação no Jetpack Compose.
Desde já assumo, que já tenhas noções básicas do Jetpack Compose, caso não, dê uma olhada básica neste tutorial, de modo a que tenhas alguma noção sobre esta ferramenta.
Let’s go!
1. Adicione a dependência do Jetpack Compose Navigation para o Jetpack Compose ao teu projecto
Para prosseguir com a utilização do componente de navegação, adicione a dependência do Jetpack Compose Navigation ao ficheiro build.gradle a nível da app. Certifique-se que o teu projecto esta configurado para o uso do Jetpack Compose e que estás a usar uma versão do Android Studio que seja compatível com o uso do Jetpack Compose.
Depois de adicionar esta dependência, faça sync do projecto.
Primeiro passo concluído 🎉, se estiver tudo certo podes seguir para o próximo passo.
2. Crie o esquema de navegação no seu projecto
Antes de criar o esquema de navegação do teu projecto deves entender dois conceitos bastante importantes da componente navegação no android, pois serão bastante usados no decurso deste artigo.
Estes conceitos são: NavController e NavHost.
NavController é a API central do componente Navigation. É uma função com estado que acompanha a pilha de funções que podem ser compostas, as quais, por sua vez, criam as telas do app e o estado de cada tela.
Pense no NavController como sendo uma entidade que armazena o histórico de navegação que ocorreu dentro de um NavHost, e esta mesma entidade permite que seja possível navegar entre destinos que tenham sido especificados no NavHost.
É possível criar um NavController usando o método rememberNavController() na função que pode ser composta.
NavHost é a área onde a navegação vai ocorrer. Podes pensar no NavHost como sendo um container no qual a as “telas” sobre as quais pretendes navegar, serão mostradas ao utilizador durante a navegação.
Ao criar um NavHost, deve-se especificar o seu destino inicial, o seu NavController, e seu conjunto de destinos, ou seja, as telas que poderão ser navegadas a partir do NavHost.
No código acima, é criada uma função composta chamada NavigationGraph() que representa o nosso esquema de navegação. Note que tem um NavController e um NavHost.
O NavHost tem como argumentos o navController e o destino incial da navegação (startDestination) que é a “firstScreen”.
Dentro do NavHost temos os destinos que queremos que façam parte do nosso fluxo de navegação. Estes destinos são as funções compostas FirstScreen() e SecondScreen(). Destinos são identificados através de rotas e cada destino deve ter apenas uma unica rota, no exemplo acima, as rotas sao “firstScreen” e “secondScreen”.
2. Crie as funções compostas a navegar
O Jetpack Compose permite navegar entre funções compostas usando o componente de navegação.
Estas funções compostas representam a UI de cada destino do NavHost.
Iremos criar duas funções compostas: FirstScreen() e SecondScreen().
Ambas as funções devem ter como parâmetro um NavController, pois é através dele que podemos dar a instrução de navegação para um destino.
Para darmos esta esta instrução temos que chamar o método navigate() sobre o NavController outrora recebido como argumento da função composta. O método navigate, por sua vez, recebe como argumento a rota do destino para o qual se pretende navegar.
navController.navigate(“secondScreen”)A instrução no trecho acima, por exemplo, seria a dada para se navegar até a SecondScreen(), visto que “secondScreen” é a rota para este destino.
No código acima, é criada uma função composta FirstScreen() que contém um texto que quando clicado, a instrução dada na linha 14 é executada.
Desta forma, pode-se navegar a partir da FirstScreen() para a SecondScreen() quando o texto for clicado. Mas para isso, temos que criar a função composta SecondScreen().
O código da função composta SecondScreen() não se difere muito do da FirstScreen().
A instrução da linha 14 permite navegar até a FirstScreen() pois o método navigate() chamado sobre o navController, tem como argumento a rota “firstScreen”.
3. Coloque a navegação a funcionar 😎
Tendo já criado o esquema de navegação e as funções compostas que serão os destinos da navegação, chame a teu esquema de navegação (que demos o nome de NavigationGraph()), dentro do setContent no método onCreate() de da Activity.
Agora podes correr a tua app e clicar nos textos para navegar entre as funções compostas FirstScreen() e SecondScreen().
Note que depois de navegar para um destino, ao clicar no “back button” do teu device, a aplicação navega de volta para o destino anterior, e isso acontece graças ao NavController, pois este mantém guardado o histórico de navegação em uma pilha.
E este foi o último passo para navegar em funções compostas no android usando o Jetpack Compose e o Navigation Component.
…
Espero que este artigo tenha sido útil para tí!
Em caso de qualquer dúvida ou sugestão, podes deixar um comentário ou contactar-me pelo Twitter, Linkedin ou pelo email: callebmiquissene@gmail.com :)
🛺💨
