Contente

• O que é o componente de arquitetura de navegação?
• Adicionando o Editor de Navegação ao Android Studio
• Dependências do projeto: Fragmento de Navegação e UI de Navegação
• Obtenha uma visão geral visual da navegação do seu aplicativo
• Preenchendo o Gráfico de Navegação: Adicionando Destinos
• Atualizando seus layouts de fragmento
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Conectando seus destinos com ações
• Hospedando o gráfico de navegação
• Disparando transições com o NavController
• Adicionando mais navegação
• Criando animações de transição personalizadas
• Empacotando

Durante a conferência de E / S de 2018, o Google anunciou uma nova abordagem para o desenvolvimento de aplicativos Android.

A recomendação oficial do Google é criar uma única atividade que sirva como o principal ponto de entrada do seu aplicativo e entregar o restante do conteúdo do seu aplicativo como fragmentos.

Embora a ideia de manipular todas essas transações de fragmentos e ciclos de vida possa parecer um pesadelo, na E / S 2018, o Google também lançou o Componente de Arquitetura de Navegação, projetado para ajudá-lo a adotar esse tipo de estrutura de Atividade única.

Neste artigo, mostraremos como adicionar o componente Navegação ao seu projeto e como você pode usá-lo para criar rápida e facilmente um aplicativo de atividade única e múltiplos fragmentos, com uma pequena ajuda do novo Editor de Navegação do Android Studio. Depois de criar e conectar seus fragmentos, melhoraremos as transições de fragmentos padrão do Android usando o componente Navegação e o Editor para criar uma variedade de animações de transição totalmente personalizáveis.

O que é o componente de arquitetura de navegação?

Parte do Android JetPack, o componente de arquitetura de navegação ajuda a visualizar as diferentes rotas por meio do aplicativo e simplifica o processo de implementação dessas rotas, principalmente quando se trata de gerenciar transações de fragmentos.

Para usar o componente Navegação, você precisa criar um Gráfico de Navegação, que é um arquivo XML que descreve como as Atividades e os fragmentos do seu aplicativo se relacionam.

Um gráfico de navegação consiste em:

• Destinos: As telas individuais para as quais o usuário pode navegar
• Ações: As rotas que o usuário pode percorrer entre os destinos do seu aplicativo

Você pode visualizar uma representação visual do gráfico de navegação do seu projeto no Editor de navegação do Android Studio. Abaixo, você encontrará um gráfico de navegação composto por três destinos e três ações, conforme exibido no Editor de navegação.

O componente Navegação foi desenvolvido para ajudar você a implementar a nova estrutura de aplicativos recomendada do Google, onde uma única Atividade "hospeda" o Gráfico de Navegação e todos os seus destinos são implementados como fragmentos. Neste artigo, seguiremos essa abordagem recomendada e criaremos um aplicativo que consiste em um MainActivity e três destinos de fragmento.

No entanto, o componente Navegação não é apenas para aplicativos que possuem essa estrutura recomendada. Um projeto pode ter vários gráficos de navegação e você pode usar fragmentos e atividades como destinos nesses gráficos de navegação. Se você estiver migrando um projeto grande e maduro para o componente Navegação, poderá achar mais fácil separar os fluxos de navegação do seu aplicativo em grupos, onde cada grupo consiste em uma Atividade "principal", em alguns fragmentos relacionados e em seu próprio Gráfico de Navegação.

Adicionando o Editor de Navegação ao Android Studio

Para ajudar você a tirar o máximo proveito do componente Navegação, o Android Studio 3.2 Canary e superior apresenta um novo Editor de Navegação.

Para ativar este editor:

• Selecione "Android Studio> Preferências ..." na barra de menus do Android Studio.
• No menu à esquerda, escolha "Experimental".
• Se ainda não estiver selecionado, marque a caixa de seleção "Ativar editor de navegação".

• Clique OK."
• Reinicie o Android Studio.

Dependências do projeto: Fragmento de Navegação e UI de Navegação

Crie um novo projeto com as configurações de sua escolha, abra o arquivo build.gradle e adicione fragmento de navegação e navegação-ui como dependências do projeto:

dependências {implementação fileTree (dir: libs, include:) implementação com.android.support:appcompat-v7:28.0.0 implementação com.android.support.constraint: constraint-layout: 1.1.3 // Adicione o seguinte // implementação "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI fornece acesso a algumas funções auxiliares // implementação "android.arch.navigation: navigation-ui: navigation-ui: 1.0.0-alpha05" com .android.support: support-v4: 28.0.0 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Obtenha uma visão geral visual da navegação do seu aplicativo

Para criar um gráfico de navegação:

• Clique com a tecla Control pressionada no diretório "res" do seu projeto e selecione "Novo> Diretório de Recursos do Android".
• Abra o menu suspenso "Tipo de recurso" e escolha "navegação".
• Selecione "OK".
• Clique com a tecla Control pressionada no seu novo diretório "res / navigation" e selecione "New> Navigation resource file".
• Abra o menu suspenso "Tipo de recurso" e selecione "Navegação".

• Dê este nome de arquivo; Estou usando "nav_graph".
• Clique OK."

Abra seu arquivo “res / navigation / nav_graph” e o Navigation Editor será iniciado automaticamente. Semelhante ao editor de layout, o Editor de Navegação é dividido nas guias "Design" e "Texto".

Se você selecionar a guia "Texto", verá o seguinte XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navegação 'é o nó raiz de todo gráfico de navegação //

A guia "Design" é onde você pode criar e editar visualmente a navegação do seu aplicativo.

Da esquerda para a direita, o Editor de Navegação consiste em:

• Uma lista de destinos: Isso lista todos os destinos que compõem esse gráfico de navegação específico, além da atividade em que o gráfico de navegação está hospedado.
• O editor de gráfico: O Editor de gráfico fornece uma visão geral visual de todos os destinos do gráfico e das ações que os conectam.
• O Editor de Atributos: Se você selecionar um destino ou uma ação no Editor de gráfico, o painel "Atributos" exibirá informações sobre o item atualmente selecionado.

Preenchendo o Gráfico de Navegação: Adicionando Destinos

Nosso gráfico de navegação está vazio no momento. Vamos adicionar alguns destinos.

Você pode adicionar Atividades ou fragmentos que já existem, mas também pode usar o Gráfico de Navegação para criar rápida e facilmente novos fragmentos:

• Dê um clique no botão "Novo destino" e selecione "Criar destino em branco".

• No campo "Nome do fragmento", digite o nome da classe do seu fragmento; Estou usando o "FirstFragment".
• Verifique se a caixa de seleção "Criar layout XML" está marcada.
• Preencha o campo "Nome do layout do fragmento"; Estou usando "fragment_first".
• Clique em "Finish".

Uma subclasse FirstFragment e o arquivo de recurso de layout "fragment_first.xml" correspondente serão agora adicionados ao seu projeto. O FirstFragment também aparecerá como um destino no Gráfico de Navegação.

Se você selecionar FirstFragment no Editor de navegação, o painel "Atributos" exibirá algumas informações sobre esse destino, como o nome da classe e o ID que você usará para fazer referência a esse destino em outro local do seu código.

Enxágüe e repita para adicionar um SecondFragment e ThirdFragment ao seu projeto.

Alterne para a guia "Texto" e verá que o XML foi atualizado para refletir essas alterações.

Todo gráfico de navegação tem um destino inicial, que é a tela exibida quando o usuário inicia seu aplicativo. No código acima, estamos usando o FirstFragment como destino inicial do aplicativo. Se você alternar para a guia "Design", notará um ícone de casa, que também marca FirstFragment como o destino inicial do gráfico.

Se você preferir usar um ponto de partida diferente, selecione a Atividade ou fragmento em questão e, em seguida, selecione "Definir destino inicial" no painel "Atributos".

Como alternativa, você pode fazer essa alteração no nível do código:

Atualizando seus layouts de fragmento

Agora que temos nossos destinos, vamos adicionar alguns elementos da interface do usuário para que fique sempre claro qual fragmento estamos vendo no momento.

Vou adicionar o seguinte a cada fragmento:

• Um TextView que contém o título do fragmento
• Um botão que permitirá ao usuário navegar de um fragmento para o próximo

Aqui está o código para cada arquivo de recurso de layout:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Conectando seus destinos com ações

O próximo passo é vincular nossos destinos por meio de ações.

Você pode criar uma ação no Editor de Navegação usando o simples arrastar e soltar:

• Verifique se a guia "Design" do editor está selecionada.
• Passe o mouse sobre o lado direito do destino que você deseja navegar a partir de, que nesta instância é FirstFragment. Um círculo deve aparecer.
• Clique e arraste o cursor para o destino que você deseja navegar para, que é SecondFragment. Uma linha azul deve aparecer. Quando SecondFragment estiver destacado em azul, solte o cursor para criar um link entre esses destinos.

Agora deve haver uma seta de ação que vincula o FirstFragment ao SecondFragment. Clique para selecionar esta seta e o painel "Atributo" será atualizado para exibir algumas informações sobre esta ação, incluindo seu ID atribuído pelo sistema.

Essa alteração também se reflete no XML do gráfico de navegação:

… … …

Enxágue e repita para criar uma ação vinculando o SecondFragment ao ThirdFragment e uma ação vinculando o ThirdFragment ao FirstFragment.

Hospedando o gráfico de navegação

O Gráfico de Navegação fornece uma representação visual dos destinos e ações do seu aplicativo, mas a invocação dessas ações requer algum código adicional.

Depois de criar um gráfico de navegação, você precisa hospedá-lo em uma atividade adicionando um NavHostFragment ao arquivo de layout dessa atividade. Esse NavHostFragment fornece um contêiner no qual a navegação pode ocorrer e também será responsável pela troca e retirada de fragmentos à medida que o usuário navega pelo aplicativo.

Abra o arquivo "activity_main.xml" do seu projeto e adicione um NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Crie um fragmento que funcionará como o NavHostFragment //

No código acima, app: defaultNavHost = "true" permite que o host de navegação intercepte sempre que o botão "Voltar" do sistema é pressionado, para que o aplicativo sempre respeite a navegação descrita em seu gráfico de navegação.

Disparando transições com o NavController

Em seguida, precisamos implementar um NavController, que é um novo componente responsável por gerenciar o processo de navegação em um NavHostFragment.

Para navegar para uma nova tela, você precisa recuperar um NavController usando Navigation.findNavController, chame o método navigate () e passe o ID do destino para o qual está navegando ou a ação que deseja invocar. Por exemplo, estou invocando "action_firstFragment_to_secondFragment", que transportará o usuário do FirstFragment para o SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

O usuário passará para uma nova tela clicando em um botão, portanto, também precisamos implementar um OnClickListener.

Depois de fazer essas alterações, o FirstFragment deve ficar assim:

importar android.os.Bundle; importar android.support.annotation.NonNull; importar android.support.annotation.Nullable; importar android.support.v4.app.Fragment; importar android.view.LayoutInflater; importar android.view.View; importar android.view.ViewGroup; importar android.widget.Button; importar androidx.navigation.NavController; importar androidx.navigation.Navigation; public class FirstFragment estende o Fragment {public FirstFragment () {} @Override public void onCreate (Pacote salvoInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override public View onCreateView (inflador LayoutInflater, container ViewGroup, bundle savedInstanceState) {retorne inflater.inflate (R.layout.fragment_first, container, false); } @ Substitua public void onViewCreated (exibição @NonNull View, @Nullable Bundle savedInstanceState) {Botão do botão = (Botão) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment;) }}); }}

Em seguida, abra sua MainActivity e adicione o seguinte:

• NavigationView.OnNavigationItemSelectedListener: Um ouvinte para manipular eventos em itens de navegação
• SecondFragment.OnFragmentInteractionListener: Uma interface que foi gerada quando você criou o SecondFragment por meio do Editor de Navegação

MainActivity também precisa implementar o método onFragmentInteraction (), que permite a comunicação entre o fragmento e a Atividade.

importar android.support.v7.app.AppCompatActivity; importar android.os.Bundle; importar android.net.Uri; importar android.view.MenuItem; importar android.support.design.widget.NavigationView; importar android.support.annotation.NonNull; classe pública MainActivity estende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override void protegido onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override public boolean onNavigationItemSelected (item @NonNull MenuItem) {return false; } @ Substitua public void onFragmentInteraction (Uri uri) {}}

Adicionando mais navegação

Para implementar o restante da navegação do aplicativo, basta copiar / colar o bloco onViewCreated e fazer alguns ajustes para que você faça referência aos widgets de botão e ações de navegação corretos.

Abra seu SecondFragment e adicione o seguinte:

@Override public void onViewCreated (exibição @NonNull View, @Nullable Bundle savedInstanceState) {Botão do botão = (Botão) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_secondFrirdment); }}); }

Em seguida, atualize o bloco onViewCreated do ThirdFragment:

@Override public void onViewCreated (exibição @NonNull View, @Nullable Bundle savedInstanceState) {Botão do botão = (Botão) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_thirdFrFrment;) }}); }

Por fim, não se esqueça de adicionar a interface ThirdFragment.OnFragmentInteractionListener à sua MainActivity:

classe pública MainActivity estende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Execute este projeto no seu dispositivo Android ou no Android Virtual Device (AVD) e teste a navegação. Você poderá navegar entre os três fragmentos clicando nos botões diferentes.

Criando animações de transição personalizadas

Nesse momento, o usuário pode se mover pelo seu aplicativo, mas a transição entre cada fragmento é bastante abrupta. Nesta seção final, usaremos o componente Navegação para adicionar uma animação diferente a cada transição, para que elas aconteçam mais suavemente.

Toda animação que você deseja usar deve ser definida em seu próprio arquivo de recurso de animação, dentro de um diretório "res / anim". Se seu projeto ainda não tiver um diretório "res / anim", você precisará criar um:

• Clique com a tecla Control pressionada na pasta "res" do seu projeto e selecione "Novo> Diretório de Recursos do Android".
• Dê a este diretório o nome "anim".
• Abra o menu suspenso "Tipo de recurso" e escolha "anim".
• Clique OK."

Vamos começar definindo uma animação esmaecida:

• Clique com a tecla Control pressionada no diretório "res / anim" do seu projeto.
• Selecione "Novo> Arquivo de Recurso de Animação".
• Dê a esse arquivo o nome "fade_out".
• Abra seu arquivo "fade_out" e adicione o seguinte:

Repita as etapas acima para criar um segundo arquivo de recurso de animação, chamado "slide_out_left", e adicione o seguinte:

Crie um terceiro arquivo, chamado "slide_out_right" e adicione o seguinte:

Agora você pode atribuir essas animações às suas ações pelo Editor de navegação.Para reproduzir a animação fade-out sempre que o usuário navega do FirstFragment para o SecondFragment:

• Abra o seu Gráfico de Navegação e verifique se a guia "Design" está selecionada.
• Clique para selecionar a ação que vincula FirstFragment a SecondFragment.
• No painel "Atributos", clique para expandir a seção "Transições". Por padrão, cada menu suspenso nesta seção deve ser definido como "Nenhum".
• Abra o menu suspenso “Enter”, que controla a animação que é reproduzida sempre que o SecondFragment passa para o topo da pilha traseira. Selecione a animação "fade_out".

Se você alternar para a guia "Design", verá que esta animação foi adicionada a "action_firstFragment_to_secondFragment".

Execute o projeto atualizado no seu dispositivo Android ou AVD. Agora você deve encontrar um efeito fade-out sempre que navegar do FirstFragment para o SecondFragment.

Se você der uma nova olhada no painel "Atributos", verá que "Enter" não é a única parte da transição em que você pode aplicar uma animação. Você também pode escolher entre:

• Saída: A animação que é reproduzida quando um fragmento está saindo da pilha
• Pop Enter: A animação que é reproduzida quando um fragmento está preenchendo o topo da pilha
• Saída pop: A animação que é reproduzida quando um fragmento está em transição para o final da pilha

Tente experimentar aplicando diferentes animações em diferentes partes de suas transições. Você também pode baixar o projeto concluído no GitHub.

Empacotando

Neste artigo, vimos como você pode usar o componente Navigation Architecture para criar um aplicativo de atividade única e múltiplos fragmentos, completo com animações de transição personalizadas. O componente Navegação convenceu você a migrar seus projetos para esse tipo de estrutura de aplicativo? Deixe-nos saber nos comentários abaixo!