Navigation parte 2: novas features e reutilização de código

Aplicando a navegação condicional - Introdução

Eu sou o Alex Felipe, instrutor aqui da Alura e vou apresentar para vocês a segunda parte do curso de Architecture Components Navigation.

Isso significa que se você não fez o primeiro curso, eu recomendo que você pare o vídeo nesse momento, assista o primeiro curso, aprenda todo conteúdo que é apresentando e depois você volte para este, porque eu vou assumir que você já tenha todo o conteúdo, como também acesso ao projeto que foi feito nesse primeiro curso.

Então, agora que a gente sabe quais são os pré-requisitos, vamos começar a entender quais são os conteúdos novos e o que a gente vai fazer durante esse curso. Como a gente pode ver aqui, o projeto já modificou um pouquinho logo de cara.

A nossa lista de produtos aqui, a gente já tem aqui alguns componentes visuais diferentes, como por exemplo aqui na nossa action bar temos um menu, aqui na parte de baixo temos um bottom navigation e a gente agora também vai ter novas telas.

Então, antes mesmo de falar das técnicas, vamos entender o que que modificou do produto no geral, que é o nosso aplicativo e então a gente entende o que que a gente vai fazer, para que isso seja possível. Como a gente pode ver logo de cara, aqui no nosso bottom navigation, o que que a gente tem?

A gente tem aqui o menu que ele consegue acessar tanto a lista de produtos, como também agora, ele vai conseguir acessar a lista de pagamentos que a gente faz aqui durante o nosso aplicativo. Aqui também quando a gente tem esse menu aqui em cima, que é o ícone para identificar que a gente vai sair do aplicativo, a gente vai ter o comportamento de logout.

Então, veja que aqui, a gora a gente vai ter uma tela de login, então vamos fazer uma simulação mesmo de um aplicativo, que é comum no dia a dia, que tem uma tela de login, que acesso o fluxo principal e assim por diante, como é o caso também de acessar uma tela de cadastro.

E como a gente pode ver, cada uma dessas telas, elas vão mantendo aqui um aspecto visual diferente, enquanto aqui na nossa tela de login/cadastro, a gente não tem nenhuma app bar e nem aqui uma bottom navigation, aqui na parte de lista de produtos a gente já tem, tanto o bottom navigation, como também aqui o uma action bar.

E isso também na tela de pagamentos e se a gente entrar aqui agora, por exemplo, em um produto, a gente volta para o detalhes do pagamento, que também mentem aqui a opção de deslogar, mas ele não mantém ali a opção de bottom navigation, como é o caso também aqui do pagamento.

A gente não coloca o bottom navigation, mas a gente mantém a action para deslogar. Então, o produto, ele vai ficar dessa maneira, mas perceba que a gente vai ter que fazer bastante coisa para que isso seja possível. E agora, a gente vai então nas partes técnicas do que a gente vai utilizar aqui do curso.

Então, para começar, a gente vai ver que vai ter essa parte aqui do login, que a gente vai entender que aqui no Navigation, a gente também tem estrutura de navegação condicional, que é determinar quem vai apresentar primeiro, quem vai apresentar depois.

E que que a gente precisa fazer para que isso seja comum, como é o caso, por exemplo, no momento que a gente desloga e a gente sai do aplicativo, o que que é esperado? É esperado que, por exemplo, apareça a tela de logins, como também se você logou e de repente você vai e fecha o aplicativo, você assume aqui que logado, você vai entrar na lista de produtos.

Então, veja que a gente vai conseguir entregar esse tipo de aspecto, a gente vai aprender a fazer isso. É claro, como a gente pode ver, também a gente vai aprender como que a gente consegue adicionar os menus e esses menus façam a navegação para a gente, como que a gente faz a navegação utilizando aqui o bottom navigation, isso a partir do componente NavigationUI.

Como que a gente consegue fazer essa configuração que esconde componentes visuais, aparece, assim por diante, utilizando aqui um viewmodel para o estado do aplicativo, isso com uma técnica um pouquinho avançada, que é o viewmodel compartilhado.

E a gente vai ver... todo esse procedimento em questão de como que vai ficar o código atualmente e como que a gente pode estar aplicando também as refatorações, reutilizando o código e muitas coisas que vão ser meio que avançadas aqui durante essa parte do nosso projeto.

Então, a gente vai aprender tudo isso, com todos os pontos aqui e até mesmo algumas técnicas que são bacanas e problemas comuns que você vai ter utilizando o Navigation, até mesmo para separar alguns fluxos e assim por diante.

Eu espero que você esteja animado em relação a esse conteúdo, tanto da parte do produto, como também da parte técnica e eu conto com a sua presença. Então, bora começar.

Aplicando a navegação condicional - Adicionando a tela de login

Atualmente o nosso aplicativo já tem um fluxo fechado em relação a tudo o que a gente aprendeu de fundamentos aqui do Navigation, só que a gente sabe que é muito comum o aplicativo se estender, adicionar novas telas, (filtres) e assim por diante.

E dada essa ideia de que é comum esse tipo de abordagem, nesse momento, a gente vai adicionar uma nova tela também, que é muito comum em diversos aplicativos, que seria uma tela de login, mas por que que a gente vai estar adicionando então essa nova tela?

Primeiro porque é muito comum em diversos aplicativos e o outro detalhe, é que quando a gente faz esse tipo de adição, a gente percebe que tem algumas peculiaridades que a gente precisa ficar atentos em relação ao uso aqui do Navigation.

Então, vamos aproveitar agora esse momento e fazer essa primeira implantação e aí, durante o curso aqui, a gente vai vendo quais são os detalhes e vamos corrigindo aos poucos. Então, vamos começar aqui. Como que a gente pode fazer essa implementação?

Quando a gente fez aqui o curso anterior, a gente já tinha os nossos fragments e layouts prontos, então não foi tão difícil fazer aqui a adição dentro do nosso Navigation, bastava a gente colocar aqui, por exemplo, o destino, depois colocar o fragment e o layout, era bem tranquilo.

Só que agora, a tela de login, a gente não tem nada, então a gente meio que vai fazer uma implementação do zero. Então, vamos pegar esse momento e fazer essa implementação. Aí, coisas que eu conseguir aqui reutilizar e já agilizar, eu já passo para vocês.

Então, vamos começar, vamos aproveitar o mesmo momento, do mesmo jeito que a gente fazia antes, então vamos colocar, por exemplo aqui um placeholder como destino, dado que a gente não tem um de login, veja que ele está carregando um pouquinho aqui.

Aí, assim que ele terminar a gente coloca e agora, a gente pode preencher aqui as informações que a gente espera, a partir aqui do attributes. Então, aqui dentro, a gente vai colocar Label como login mesmo, não vai ter uma novidade, aqui no ID também só login, é bem tranquilo também.

E agora que a gente tem esse primeiro passo, o próximo seria criar o fragment ou então o nosso layout. Vamos adicionar primeiro o layout, porque o fragment, ele vai precisar do layout para poder fazer o inflate da views. Então, vamos colocar então o layout.

Considerando que a ideia não é implementar layouts ou então, consumir tempo com isso, o que que eu vou fazer? Eu vou disponibilizar para você aqui um arquivo de layout, justamente para que você consiga reutilizar e não perder tempo durante essa implementação.

É claro, se você quiser implementar, fique à vontade também, o que eu vou fazer aqui de implementação é tudo o que a gente já viu em cursos anteriores, não tem nada de novo aqui. Então, para isso, o que que a gente vai fazer?

Vai primeiro pegar esse arquivo Zip, que eu vou disponibilizar via exercício e aqui, você pode fazer uma extração. Na extração, ele vai dar aqui essa pastinha, que é o android-navigation-2-resources-1.1. Então aqui dentro, o que que temos?

Temos a estrutura na qual é o destino onde a gente tem que trocar aqui esse layout. Então, temos o app, temos o source, o main, o res, layout e aqui temos o arquivo xml que representa o nosso layout. Aqui, basta apenas você copiar, vim aqui na estrutura do projeto em res, layout e então você vai e cola.

Aqui, ele vai perguntar se é esse o nome que você quer, basta apenas clicar em ok e pronto, a gente já tem um layout adicionado, é bem tranquilo. Aqui, você pode ver o preview, para ver se está batendo com o que é esperado, que seria essa telinha aqui, uma tela super simples, nada de mais, que tem aqui o campinho para ID do usuário e senha e o botão logar.

E depois, agora que a gente tem esse layout, a gente precisa realmente criar aqui o nosso fragment, então vamos criar o fragment, para isso também é super tranquilo. Viemos aqui no nosso pacote UI, aqui em fragment e a gente faz a criação da mesma maneira que temos nos outros destinos, que é o DetalhesProdutos, ListaProdutos e Pagamento.

Então, aqui, a gente vai criar um arquivo Kotling, chamado de LoginFragment, veja que não tem tanta novidade assim, no caso, criei ali um arquivo, mas poderia já ser a classe. Então, aqui, basicamente, só vai escrever classe LoginFragment, então a gente faz uma extensão aqui para fragment.

Essa extensão, ela precisa que a gente faça o import, que seria aqui do androidx, que é o que a gente está usando no projeto e agora, basta fazer aquele procedimento simples, que seria criar aqui a nossa view com base no processo de inflate.

Sobrescrevendo então o onCreateView. Aqui, o que que eu vou fazer? Para ficar mais fácil de ler, eu vou pular aqui linhas, então vou usar aqui essa opção, que é a Put parameters on separate lines, que ele separa aqui em linhas, aqui, cada um desses parâmetros e aqui também, eu vou colocar para os argumentos.

E agora, eu vou só substituir para que faça o inflate, então, como que a gente faz isso? No momento que a gente faz o return do super, basicamente a gente vai pegar o inflater que temos ali como parâmetro e vamos fazer aqui o inflate.

Então, aqui dentro, a gente manda primeiro o layout, a partir da classe R, que seria aqui o nosso login. É claro, tem que importar primeiro a classe R, para que ele consiga identificar. Em seguida, podemos mandar aqui o container que recebemos via parâmetro e depois o último parâmetro como false, para não “atachar” ao root.

Podemos aqui também separar os argumentos em linhas e pronto, temos aqui a nossa primeira implementação. Agora que a gente tem um fragment, que ele faz aqui o nosso inflate, temos também o login, como um xml, que é o arquivo de layout, a gente vai agora fazer o vínculo com esse placeholder que a gente criou.

Para isso, como que a gente faz? A gente coloca primeiro aqui o nosso fragment, que seria o login fragment, ele apareceu aqui para a gente. Em seguida, a gente vai e modifica aqui o nosso destino no arquivo xml, para que ele tenha ali o layout como o tools, como um preview.

Então, a gente coloca o tools layout, login. Basicamente é isso e vamos ver, olha só, ele já mostra aqui para a gente a nossa telinha, eu vou estender aqui para a gente ver, olha só que bacana.

E agora que a gente tem essa tela de login, a gente precisa de alguma forma, adicionar uma ação, a gente precisa fazer com que ela consiga acessar esse fluxo que a gente já tem pronto. Qual que seria a tela que a gente iria acessar aqui?

Dado que a gente fez login, a primeira tela que a gente tem que acessar é a lista de produtos. Então, vamos colocar aqui, ele vai lá e pronto, a gente colocou uma ação. A gente sabe que para colocar uma ação, deixa até eu ajustar um pouquinho aqui essa hierarquia para ficar mais fácil de visualizar.

Vamos ver qui, colocar um pouquinho mais para baixo, deixa só eu tirar um pouquinho de zoom, agora foi. A gente precisa fazer aqui algumas modificações, a primeira modificação que a gente pode fazer é colocar aqui um nome mais atrativo para a gente, que seria ação_login_para_listaProdutos.

A gente pode deixar dessa maneira, da mesma maneira como a gente fez aqui nos outros. Então, não temos aqui uma certa novidade e agora que a gente tem aqui essa ação, a gente pode fazer algumas modificações também, a gente pode colocar, por exemplo, as animações, da mesma maneira que a gente fez para cada uma delas.

E a gente pode modificar o pop, caso a gente tenha interesse nesse momento. Para esse primeiro momento, não vamos ficar atentos com isso, primeiro vamos fazer isso funcionar e aí depois que a gente fizer funcionar, a gente fica atento aos detalhes.

Eu só coloquei aqui a parte de animação, que não tem realmente uma coisa para se analisar, é só colocar e pronto. Temos o nosso destino novo, temos a ação e agora a gente precisa realmente fazer as configurações para que isso funcione.

A primeira delas está relacionada justamente ao destino inicial, como a gente viu, o destino inicial trata justamente aqui do dentinho que vai ter o primeiro acesso, quando acessar aqui esse (gráfo). Então da maneira como está sendo feita, a gente não tem como acessar a nossa tela de login.

Sendo assim, o que que a gente vai fazer? Dado que o login, ele consegue acessar a lista de produtos e a lista de produtos consegue acessar os demais destinos, vamos tornar aqui o nosso login como o destino inicial, como que a gente pode fazer isso?

A gente pode usar aqui, por exemplo, o botão direito e aqui a gente faz, é essa opção, que é a Set as Start Destination, que aí, dessa maneira, ele vai e já modifica. A gente poderia também modificar diretamente aqui no nosso xml, fique à vontade para fazer da maneira que preferir, que aí, dessa maneira, como que a gente faz?

A gente vem aqui, no macro aqui do nosso arquivo, que seria aqui a tag navigation e modificamos aqui o start destination, que foi basicamente isso que foi feito, utilizando aquela opção. Voltando aqui, o que que a gente vai fazer agora?

Agora que a gente tem o nosso login como destino inicial, se a gente executar, a gente vai ter acesso a ele, só que a gente não vai conseguir acessa a nossa lista de produtos.

Então, dado que a gente quer fazer... ainda manter aquele fluxo, quer acessar primeiro a tela de login, acessar a lista de produtos, vamos também colocar esse comportamento em funcionamento, funcionando aqui para a gente. Então, para isso, a gente vai ter acesso ao nosso controlador.

Então, vamos colocar aqui como se fosse uma property mesmo, controlador e aqui, a gente vai fazer aqui o load via lazy. Então, a initialization lazy aqui. Então, a gente coloca aqui o findNavController, temos acesso ao controlador.

E agora, quando a gente tem, por exemplo, acesso a view, quando ela é criada, que é o onViewCreated, a gente vai pegar, por exemplo, a referência do botão logar, para a gente colocar o listener que vai navegar até a lista de produtos, isso é bem tranquilo.

A gente pega aqui, por exemplo, login, botão logar e aqui, a gente coloca o setOnClickListener, sem nenhuma novidade. E aqui, a gente vai pegar, por exemplo, o nosso directions primeiro, então primeiro a gente pode fazer aqui o “Ctrl + F9”, para ele fazer aqui a construção do projeto e gerar aquela classe para a gente com as ações e assim por diante.

E assim que ele terminar o (building), a gente já pode fazer aqui o uso do nosso navDirections. Então, vamos só concluir aqui. Ele conseguiu aqui finalizar o (build), vamos ver se ele gerou, LoginFragmentDirections e aqui a gente pega a nossa ação, açãoLoginParaListaProdutos.

Então aqui, o que que a gente tem de acesso? A gente pode fazer aqui extração de uma variável aqui que seria direção e aqui embaixo, a partir do nosso controlador, a gente vai e navega para essa direção que a gente criou, é simples assim.

Então, vamos agora testar e vamos ver se funciona esse fluxo agora, que a gente adicionou. Então, executando aqui, vamos ver agora, estou abrindo aqui o nosso emulados. Vamos só aguardar o Android Studio finalizar a execução e assim que ele finalizar, a gente vê esse resultado.

O Android Studio conseguiu executar o nosso aplicativo e apareceu aqui a nossa tela de login. Se a gente clicar em logar, ele vai lá e consegue acessar a nossa lista de produtos.

Então, para essa primeira abordagem, a gente conseguiu estender o nosso projeto e adicionar aqui uma tela de login, mas como eu havia comentado com vocês, existe alguns detalhes importantes de a gente notar nesse tipo de implementação e a seguir, a gente vai começar a analisar esse detalhes e resolvê-los.

Então, até já.

Aplicando a navegação condicional - Ajustando o fluxo de navegação

Agora que temos a nossa tela de login, podemos começar com a nossa análise para verificar se o fluxo está atendendo conforme o esperado, então qual que vai ser aqui a nossa análise? Primeiro a gente vai finalizar aqui o nosso fluxo e vamos ver se mantém o comportamento esperado.

Aqui a gente tem a nossa tela de login, clicando no botão logar, acessamos a lista de produtos, clicando em um produto, acessamos detalhes do produto, clicando em comprar, a gente acessa a tela de pagamento, preenchendo aqui os campos e depois clicando em confirmar pagamento, a gente acessa aqui a nossa lista de produtos.

Então agora, a gente precisa primeiro analisar aqui os detalhes, quando a gente (fez) aquela configuração que a gente tem aqui no nosso graph, o que que a gente esperava aqui? Na configuração da lista de pagamentos, aliás, da tela de pagamento, para a lista de produtos.

A gente faz aqui o pop do nosso graph, ou seja, do destino inicial. Então, se a gente, por exemplo, voltar aqui no nosso aplicativo, o que que a gente espera aqui... considerando essa ideia bem ampla. A gente espera, por exemplo, que apareça, sei lá, uma tela de login, mas na verdade, ele fecha o nosso aplicativo.

E o que que isso tem de impacto? O impacto que a gente tem disso é o seguinte, de repente, a gente só queria voltar para a nossa lista de produtos, mas a gente não queria fechar o nosso novo destino inicial e usando essa abordagem que a gente fez aqui, que voltava na nossa lista de produtos, que era o nosso destino inicial, ela não funciona da maneira esperada.

Por que que ela funcionava antes e não funciona agora? Ele não mantém ali a nossa tela de login, porque a nossa ação que a gente fez aqui, ela tirava o destino inicial, mas ao mesmo tempo, ela criava uma nova instância aqui para a nossa lista de produtos, porque a navegação é feita a partir dela, ela vai criar aqui essa ação.

E dado que agora, a gente não faz essa navegação para a tela de login, basicamente ela sai de toda a pilha, então perceba que essa abordagem, ela é super arriscada. Então, o primeiro passo de todos, dado que a gente tem aqui esse tipo de implementação, que é voltar para uma tela específica, é justamente fazer o pop de quem aqui a gente quer fazer o pop.

E aí, a gente pode estar usando aqui o Inclusive, que aí, ele já vai garantir o comportamento esperado, por mais que a gente tenha um novo destino, ele não vai ser comprometido com base na nossa navegação.

Então, esse é o primeiro detalhe que a gente precisa ficar atento. Vamos executar aqui e vamos ver agora como que fica essa nova abordagem que a gente fez aqui. Então, perceba que esse detalhe que eu quis mostrar para vocês, foi justamente um detalhe bem anterior que a gente fez aqui durante o curso.

Não é uma coisa que surgiu por causa da tela de login, eu só consegui mostrar isso aqui com a tela de login, porque dessa maneira, a gente tem um novo destino e a gente perceba que isso pode ser comum e que quando isso acontecer, você pode ter um problema, dada a abordagem como a gente fez anteriormente.

Então, a gente volta para a tela de lista de produtos e agora sim, a gente tem acesso a nossa tela de login. Então, veja que esse primeiro detalhe aqui, a gente precisa ficar atento. O próximo detalhe está relacionado ao fluxo do nosso aplicativo num todo.

O que eu quero dizer com isso? Perceba que quando a gente oferecer o nosso aplicativo para um usuário, qual que é a abordagem comum aqui de ser feita? A partir do momento que ele está acessando a tela de login e ele foi lá, conseguiu colocar as suas credenciais, usuário e senha, tudo bonitinho e logou.

Ele logou. A partir do momento que ele logou, qual que é o comportamento esperado? O comportamento esperado é que a gente consiga, por exemplo, no momento que a gente voltar aqui, já fechar o nosso aplicativo, porque o nosso usuário já foi logado, não faz sentido ele voltar para a tela de login.

Então, perceba que esse tipo de implementação, é uma implementação um pouquinho peculiar. Por mais que seja um destino inicial, a gente vai precisar fazer aqui algumas técnicas para evitar esse tipo de abordagem. Então, quais são as possibilidades que a gente pode considerar aqui como implementação?

A primeira delas que a gente pode considerar é fazer... que no momento que a gente conseguir fazer o login, a gente faça o pop aqui da nossa telinha de login. Então, a gente pode colocar um pop na tela de login, colocando Inclusive e dessa maneira, a gente retira aqui a nossa telinha.

Vamos ver o que acontece aqui. Então, vamos executar aqui. Executei. Vamos testar esse comportamento e vamos ver se o fluxo depois de logar, ele funciona. Então, a gente vai logar, agora eu vou voltar e ele conseguiu fechar. Então, esse é o primeiro passo que a gente precisa fazer, justamente por quê?

Se o usuário logou, não faz sentido de novo ele apresentar aqui a tela de login, só que temos um detalhe, se a gente entrar novamente, a tela de login, ela é apresentada novamente. Então, perceba que não é simples assim, basta apenas a gente tirar ali do nosso fluxo, da nossa pilha de volta.

A gente precisa colocar mais uma lógica na qual, ela vai conseguir armazenar essa informação de login e dessa maneira, ela vai ter ali algum tipo de decisão condicional, para manter, por exemplo, a tela de login ou então a tela aqui de lista de produtos.

Essa lógica, ela pode ser feita com qualquer técnica persistente, seja (run), seja com o SharedPreferences ou qualquer outra técnica que mantenha esse tipo de dados, ou seja, clicou em login, aí a gente mantém esse estado.

E aí, a partir desse estado, a gente verifica, “Olha, essa tela aqui, ela...”, aliás, esse usuário, ele foi logado ou não foi? Se ele foi, manda para uma tela, se ele não foi, manda para uma outra tela. Então, perceba que é uma abordagem aqui que a gente precisa colocar também.

E dado que é uma abordagem, que existe um pouquinho mais de implementação, a seguir, a gente vai ver como que a gente pode estar colocando, então, esse tipo de solução, como que a gente pode estar decidindo aqui, a partir dos nossos destinos e como que é feito esse tipo de implementação.

Então, até já!

Sobre o curso Navigation parte 2: novas features e reutilização de código

O curso Navigation parte 2: novas features e reutilização de código possui 160 minutos de vídeos, em um total de 46 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Aplicando a navegação condicional
• Reutilizando conexões com ações globais
• Utilizando técnicas de reaproveitamento de código
• Flexibilizando a adição de novos destinos
• Integrando componentes visuais com o Navigation UI