O lado Navigation da Força

7 min readOct 18, 2018

It’s a trap! (Ackbar, Gial)

Sábias palavras

Com essa singela frase começo esse artigo, mostrando que o até o Admiral Ackbar sabia que os transactions dos fragments eram uma cilada.

Então vamos lá!

Eu quando falaram do Navigation.

Um pouco de história

O Navigation faz parte do JetPack que é o conjunto de ferramentas de desenvolvimento mostrada no Google IO de 2018. Essas ferramentas foram pensadas para ajudar o desenvolvedor a montar aplicações de forma mais simples, rápidas e tentando aplicar as melhores práticas. Basicamente, é um Utils gigante … pronto falei!

Todas as ferramentas presente no **JetPack**, Glória a Deux!

Se quiserem mais informações, segue o vídeo do Google IO de 2018 mostrando a ferramenta e alguns pontos técnicos.

Anuncio da UI do Navigation no Google IO de 2018.

Brincadeiras a parte, o JetPack são um conjuntos de componentes arquiteturais do Android, tentando simplificar, o JetPack são classes/métodos/mágicas que vão moldar a arquitetura/estrutura do seu projeto Android. Levando em consideração as melhores práticas de desenvolvimento. Não é um coisa que se diga … “Nossa que SOLID!” mas dá para o gasto.

Muito bom, mas por que devo mudar?

Essa é um excelente pergunta, por que alterar o meu projeto todo pronto para inserir Navigations? E eu respondo, não mude! Se você já tem um projeto sólido, bem estruturado e com poucas alterações, não indicaria a mudança. Mas, se você tem sangue nos olhos, bebeu para ir trabalhar ou é só masoquista mesmo. Pode mudar! Você não vai se arrepender … muito.

Por que isso, jovem?

O uso do Navigation é uma mudança na forma de pensar, já que a estrutura que você está acostumado de usar: transactions para fragments ou Intents para Activitys não vai ser mais necessária. Não que elas vão parar de existir, apenas não vão fazer mais tanto sentido, dentro do contexto do Navigation.

Oi?

Mas como assim: “não faz mais sentido”?

Calma Padawan, com o decorrer do artigo vou te mostrar como funciona o Navigation dentro do seu código assim você vai entender melhor do que estou falando.

Show me the UI!

Vamos começar apresentando a ferramenta gráfica que foi lançada na versão estável do Androi Studio, a 3.2, mas que já tinha nas versões Canary do mesmo.

Vá no seu arquivo Gradle, no nível da app e insira as seguintes linhas:

implementation "android.arch.navigation:navigation-fragment-ktx:$nav_version"
implementation "android.arch.navigation:navigation-ui-ktx:$nav_version"

Salientando que essa importação é para quem está usando Kotlin, caso não esteja, basta retirar o -ktx. A versão que estou usando é a: 1.0.0-alpha06. Basta substituir a variável $nav_version pela versão citada acima.

Para que já trabalhou com iOS vai ficar muito familiarizado com essa interface, pois trata-se de uma interface de click e arrasta para que sejam criadas as relações entre as telas.

Basicamente a interface se comporta da mesma forma da UI de layouts, onde temos do lado esquerdo um painel com todos os itens mostrados, ao centro tempos a interface manipulável, onde iremos inserir os layouts e suas ligações (ou ações), do lado direito temos o painel de atributos, onde, dependendo de onde você clica vai ser mostrado os atributos do item.

A seguir irei destrinchar a interface com mais detalhes

Destinations (barra da esquerda)

Nessa parte da interface é mostrado dois itens o HOST e os GRAPHS. HOST é o item principal, é o item pai de toda a navegação, geralmente é uma Activity de onde os fragments filhos iram depender. Como eu disse antes os Intents não morreram, pois, seu projeto deve ter pelo menos uma Activity. Pois é ela que o Manifest carrega para que o SO Android possa abrir no aparelho. Os GRAPHS são os filhos do HOST.

Pense da seguinte forma, o HOST é onde fica o <fragment> que os GRAPHS vão ser transacionados, mas sem uso do transaction do <fragment>. Vale salientar que deve existir um único HOST por arquivo navigation, sim você pode ter mais de uma arquivo navigation.

Mais de um arquivo? Huru lol

Playground (centro)

Assim como nos layouts você pode manipular essa área apenas clicando e arrastando, definindo comportamentos, inserindo novos HOSTS ou GRAPHS, sem que seja necessário alterar ou manipular XML. Mas, caso você queira manipular o XML diretamente, sabe-se Deus o por que disso, mas sim, você pode. Na parte inferior, assim como nos layouts, existem as abas de Design e Text, onde você pode alterar e ser feliz, ninguém vai te julgar.

Por que fazer isso consigo?

As setas que aparecem ligando os fragments são os chamados Actions, são eles que controlam as transições entre cada fragment. Nesse caso, a tela de loginFragment vai para o menuFragment e em seguida para o sellFragment. Mas nada impede que existam outras Actions, ligando outras telas ou realizando comportamentos de back. No exemplo, vão existir várias Actions que partem do menuFragment indo para vários outros fragments, dependendo de que botão foi clicado na interface.

Um ponto importante a se destacar, é o Start Destination, simbolizado pelo ícone da Casa, no loginFragmente. O que isso quer dizer? Quer dizer que quando a Activity for iniciado, o primeiro fragment a ser carregado vai ser o que estiver com o ícone da casa sendo mostrado na UI.

A seguir irei mostrar como é o código desse navigation que mostrei na imagem inicial:

Gist que mostra o navigation.xml que representa a imagem mostrada no inicio desse tópico.

Simples, não é?

Nooooooooooooooo!

Attributes (barra da direita)

Essa parte vai ter várias formas de visualiza-la, dependendo de onde você clica. Irei começar a falar sobre quando você clica no fragment (é o painel que está no print inicial) e em seguida irei mostrar como ela fica ao clicar no Action (seta).

Na visualização tipo Fragment temos os campos Type que indica o tipo (Fragment ou Action); Label indica um nome; ID é o identificador único, é por ele que você consegue manipulado dentro do código, caso precise; Class é a qual classe esse layout está vinculado. O botão Set Start Destination define o <fragment> selecionado como o primeiro a ser renderizado. Arguments são os itens passados de um <fragment> para outro. Actions é onde se posse inserir as <actions>, que são as setas, elas controlam para onde aquela <fragment> pode ir. Por último os Deep Links, que é onde você define <deep-links> para aquele fragment.

Na visualização tipo Action vou focar nos pontos que diferem do Fragment. Começando com os Transitions, como o nome já diz, você vai definir a animação que ocorre na transição de uma <fragment> para outro, não vá exagerar. Pop Behavior define o comportamento da sua aplicação quando é feito um pop. Lauch Options define o comportamento da criação dos <fragment>, evitando que sejam criados varias instâncias do mesmo <fragment>, para mais informações veja esse artigo.

Show, mas como eu não to encontrando esse arquivo aqui no meu Android Studio! #chateado

Paciência Anakin … não pera … Luke

Primeiramente você deve entender que o Navigation é um recurso novo, e onde fica os “rescursos” no seu projeto? Exatamente, dentro da pasta res. Primeiro você deve criar uma nova pasta de recurso e na opção Resource Type selecione a opção navigation. Em seguida basta criar um .xml dentro dessa pasta e pronto, você tem seu primeiro navigation. Show?

Yes!

Now, show me the code!

Agora vamos ao que interessa, nesse ponto vou mostrar como controlar o navigation pelo código. Nos exemplos, estou utilizando a linguagem Kotlin, mas não se preocupem, o Kotlin é muito próximo ao Java, e caso tenham alguma dúvida, coloca ai nos comentários.

Vamos começar mostrando o código da nosso layout e sua Activity, respectivamente.

No nosso exemplo teremos essa única Activity (StartActivity). Veja que no seu layout estamos carregando um Frame Layout com um fragment interno, é esse fragment que vai ter todas as telas de nossa aplicação.

No nosso layout existem dois atributos do <fragment> que devem ser observador. o app:navGraph e o app:defaultNavHost.

app:navGraph: nele você deve referencia o seu arquivo navigation.xml, indicando a sua aplicação que aquele fragment vai seguir as as regras de navegação definidas no arquivo. Sem essa definição a seu activity não vai carregar nada e provavelmente vai crashar sua aplicação pois ele não vai conseguir inflar o layout inicial, então não se esqueça disso.
app:defaultNavHost: aqui você está dizendo ao Android que esse fragmente é o pai de todos — não é o Odin. Basicamente é o campo que vai carregar os layout que foram definidos no seu navigation. O default dele é false, então você deve atribuir ele como true, no fragment que vai ser o Odin … não pera … o pai de todos.

Show de bola, mas você disse que não usamos transaction e intents, então como faço a transição?

BB-8 me da uma ajuda aqui!

Bem lembrado! No caso das navegação é muito simples, mais simples do que tentar gostar dos Episódios I, II e III de Star Wars …

Como eu quero que você morra, Jar Jar Binks!

As navegações entre telas ocorrem através da classe Navigation, que implementa todas as ações inseridas no arquivo navigation.xml. Basta que você indique a classe que <action> ela deve seguir, utilizando o método navigate(). A seguir irei mostrar o código para termos um noção melhor e em seguida irei explicar melhor cada item.

Inicialmente eu criei um atributo mainview, que vai receber a view do fragment definido no onCreateView(). Mas toda a mágica ocorre no método initializeButtonActions() que inicializa as ações de cada botão.

Como estamos em um fragment, temos que usar a mainview para encontrar os itens do nosso layout, lembrando que o kotlinx não vai funcionar em fragments.

A transição ocorre na linha 14, onde eu uso o método estático findNavController(), passando a view para encontrar qual é o meu navigation, já que eu posso ter mais de um. Para que o Fragment encontre o arquivo correto ele vai recorrer ao item do layout app:navGraph que a gente colocou no nosso fragment Odin. E dentro do navigate a gente passa o id do action (definido no navigation.xml) que queremos que ocorra. Pronto somente isso.

Finalizando

Muito bem pessoal, isso foi um explicação para você saírem implementando, mas não deixem de ler a documentação e assistirem os vídeos que estão no Youtube do Google Dev, lá eles explicam com bem mais detalhes como funciona o Navigation.

Espero ter convencido vocês a darem uma chance ao Navigation. Até o próximo post. E que a Força esteja com vocês!

Eu queria usar esse gif em algum lugar.