Design de Navegação em Compose
Como criar uma navegação complexa aninhada com multiplos gráficos?
Situação real
Imagine que você tem que criar um aplicativo com 3 fluxos diferentes. Um fluxo de autenticação com tela de login, sign-up e esqueci senha sem barra de navegação, como vemos na imagem inicial acima. O segundo com o interior do aplicativo, tela de home, settings e profile com uma barra de navegação inferior. Já o terceiro fluxo seria um fluxo de detalhes exibindo paginas de ajuda, perguntas frequentes e uma nota sobre o uso dos dados do usuário. (aqui também sem a barra de navegação inferior) Como você faria o design de navegação para atender esse requisito e resolver a tarefa?
Esboçar a navegação
Antes de mais nada, a primeira coisa que sugiro você fazer é desenhar os fluxos como fiz na imagem inical. Isso vai ser essencial para poder isolar os fluxo nos próximos passos. Nessa fase de esboço, você tem várias opções. Vai depender de cada pessoa, mas vou deixar aqui dois exemplos que eu mesmo usei. Nesse primeiro esboço eu desenhei as telas como se elas ja existissem.
Segundo Design
Já nesse segundo design, eu optei por uma estrura em forma de arvore e desenhei/imaginei os fluxos como se fossem modulos visualmente independentes, desenhando sua representação gráfica no celular a sua direita. No final das contas vai depender muito de você, qual versão facilita melhor seu entendimento. O importante é o excercicio de destrinchar e visualizar a tarefa. Mais para frente veremos os benefícios dessa técnica.
Isolando os fluxos
Agora te temos uma representação gráfica e clara da tarefa, iremos isolar os fluxos. Olhando para as imagens, tanto na versão 1 como na versão 2 conseguimos claramente identificar os três fluxos destintos. Na primeira imagem eu separei os fluxos através das linhas pontilhadas e dei nome aos gráficos de navegação a sua direita. Já na segunda imagem, eu circulei os gráficos de navegação e dei a eles seus respectivos nomes e numerações de 1 a 3. A direita desenhei apenas a tela inicial de cada fluxo em forma de tela de aplicativo mesmo.
Visualizando os benefícios
Talvez você esteja pensando que não é necessário fazer nada disso e que você seria capaz de fazer tudo isso de cabeça. Pare apenas por um segundo para pensar no tanto de benefícios que um simples desenho desses, vai te trazer ao longo do processo e a longo prazo:
Você tem um guia mental agora para sua tarefa. Se alguém te destrair, você atender a uma chamada ou tiver que entrar em alguma reunião, ao voltar, você sabe onde parou e por onde continuar.
Você tem uma base para debater ou trocar experiência com outros membros do time para aprimorar a solução. Use para o esboço um tablet. Você tera toda flexibilidade para apagar e redesenhar detalhes extremamente rápido.
Ao finalizar o esboço, você terá uma documentação do conceito de navegação (isso vai te ajudar tanto na evolução quanto no repasse de conhecimento mais tarde) Gera uma imagem e joga na wiki do projeto.
Você tem também agora um recurso para dar manutenção quando seu aplicativo estiver em produção.
Não te leva de 10 a 30min. para desenhar e esboçar a solução (que agora pode ser aprimorada)
Partindo do esboço você enxerga de cara as rotas a serem criadas, telas envolvidas (mesmo que iniciais), enumerações e os gráficos de navegação necessários
Qual desenho/esboço eu uso?
Isso vai depender de cada pessoa/time. Eu, por exemplo, usei o primeiro, pois vejo nele as telas, as rotas e os gráficos de navegação. Também achei que a visualização da navegação (setas entre as telas) ficaram mais claras para o leitor. Mas isso é gosto pessoal. O central da questão aqui é entender que se faz necesário usar gráficos de navegação diferentes, pois o gráfico de home possui uma barra de navegação inferior, enquanto os outros dois não. Vide imagem abaixo.
Como implementar em Compose?
Veja na prárica como se faz!
Agora que você já sabe como esboçar e visualizar a navegação, veja como criar o código necessário em kotlin para resolver essa tarefa em um projeto real Android. Neste vídeo super didático, te explico todo o passo a passo:
Quer mais conteúdo assim?
Me siga, se você gosta desse tipo de conteúdo técnico didático e feito com muito carinho. ❤️
Você me encontra no 🐦twitter, 🦑 Github ou no 📺 Youtube onde tenho um curso gratuito “Do zero ao certificado Android”, outro chamado “Resoluções a problemas comuns Android” e Android Jetpack Compose disponíveis 0800 para você.
Para não perder nenhum conteúdo, inscreva-se nesse techblog clicando aqui: