Vamos tentar, usando o
guia oficial e
exemplos de código , criar um sistema de navegação funcional para o futuro aplicativo de várias telas, de acordo com os padrões do Componente de Arquitetura de Navegação. O artigo inclui as seguintes seções:
Parte 1. Trabalho preparatório1.1. Criação de projeto
1.2. Dependências
1.3. Páginas: criando fragmentos
1.4. Endereços: arquivo de recursos do tipo "Navegação"
- 1,5 Quadro: Widget NavHostFragmentParte 2. Elementos de Navegação2.1. Navegação por botão
2.2. Menu lateral (Gaveta)
2.3. Barra de ferramentas: Barra de ferramentas em vez da ActionBar
2.4. Menu inferior (navegação inferior)
- 2.5 Menu pop-upResumo e link do githubParte 1. Trabalho preparatório
1.1 Criação de projeto
Precisamos de conhecimentos básicos de
Kotlin , versão IDE
Android Studio, que não seja inferior a 3,3, um smartphone ou emulador com API versão 14 ou superior.
Vamos criar um novo projeto no Android Studio chamado "Navigation2019".
O IDE criará o arquivo de atividade principal "MainActivity.kt" e seu layout (modelo) "activity_main.xml".
1.2 Dependências
Abra o arquivo "build.gradle" do módulo (não o projeto, mas o módulo) e adicione as dependências necessárias ao bloco "dependências":
def nav_version = «1.0.0» implementation «android.arch.navigation:navigation-fragment-ktx:$nav_version» implementation «android.arch.navigation:navigation-ui-ktx:$nav_version»
Usamos as bibliotecas versão 1.0.0, mas no futuro a situação poderá mudar. Verifique quais versões da biblioteca são relevantes
aqui .
1.3 Páginas: criando fragmentos
Fragmentos são as "páginas" de nossa futura aplicação. Clique com o botão direito do mouse no diretório com os arquivos de classe, usando o comando “Novo -> Fragmento -> Fragmento (em branco)” e crie “Fragmento1”.
O IDE criará um arquivo kt com uma classe de fragmento e um arquivo xml com um layout de fragmento. Da mesma forma, geraremos mais três fragmentos ("Fragmento2", "Fragmento3", "Fragmento4"). Nós os usaremos para criar quatro tipos diferentes de navegação de aplicativo.
1.4 Endereços: arquivo de recursos do tipo "Navegação"
Ao clicar com o botão direito do mouse na pasta "res", crie um arquivo de recurso do tipo "Navegação" com o nome "routes.xml" ("rotas").
Vamos abrir o arquivo criado e usar o botão "Novo destino" para adicionar nossos fragmentos ao diagrama de navegação.
"Segurando" o
mouse no meio do lado direito do fragmento, conecte os fragmentos um ao outro, como devem ser conectados no aplicativo.
De acordo com seus nomes, nossos fragmentos receberão identificadores (id) "fragmento1", "fragmento2", "fragmento3", "fragmento4". Estes são os "endereços" que serão usados ao indicar destinos nas instruções para o controlador de navegação.
Além de "id", cada tag "fragmento" contém mais três parâmetros: "nome", "rótulo" e "layout". Os parâmetros "nome" e "layout" não são do nosso interesse agora. A única coisa que vale a pena editar no arquivo "routes.xml" são os nomes ("label") dos fragmentos. Substitua-os por “Fragmento nº 1”, “Fragmento nº 2”, “Fragmento nº 3” e “Fragmento nº 4”.
1.5 Quadro: Widget NavHostFragment
Abra o arquivo de layout "res / layout / activity_main.xml" e exclua o widget de texto "Hello World!". Não precisamos disso. Na Paleta, selecione a seção "Contêineres" e arraste o widget NavHostFragment de lá para o layout da atividade (especificando nosso arquivo de "rotas" como a fonte de informações para ele). Ele cumprirá o papel de um quadro no qual vários fragmentos do aplicativo serão exibidos.
Mude a identificação do fragmento para "navFragment". O código de layout para a atividade principal agora terá a seguinte aparência:
Com isso, o trabalho preparatório está concluído, agora você pode prosseguir diretamente para a criação dos elementos de navegação.
Parte 2. Elementos de Navegação
2.1 Navegação por botão
Abra o layout do primeiro fragmento ("fragment_fragment1.xml"). Exclua o widget de texto desnecessário, altere o tipo de layout de "FrameLayout" para vertical linear e adicione três botões com os identificadores "button2", "button3", "button4" e os nomes correspondentes "Fragmento 2", "Fragmento 3", "Fragmento 4".
No método “onCreateView” do fragmento, obtemos um link para o controlador de navegação (objeto “NavController”) e programamos o comportamento quando os botões são clicados: com o comando “setOnClickListener”, para cada botão criamos um ouvinte de botão que, quando clicado no botão, transmitirá ao controlador de navegação o endereço (id) do ponto destino junto com o comando para navegar para o endereço especificado.
Vamos verificar como nossos botões funcionam.
Um botão - uma linha de código - e clicar no botão nos move para o fragmento especificado. Simples, certo?
Mas sem um menu não é muito conveniente, você deve usar o botão "Voltar" para retornar à tela inicial.
2.2 Menu lateral (gaveta)
2.2.1 Arquivo de Recurso do Menu
No diretório "res / menu", crie um arquivo de menu de recursos "drawer_menu.xml". Nós adicionamos itens de menu, cada um dos quais com a tag "item" com os parâmetros "id" (deve corresponder ao da coluna de navegação "routes.xml", "title" (título, pode ser diferente), "icon" (nós usamos a mesma imagem para todos os itens, mas, é claro, eles podem ser diferentes) etc. Nosso menu ficará assim:
2.2.2 Modelo DrawerLayout e widget NavigationView no layout da atividade
Abra o arquivo de layout de atividade "activity_main.xml".
Após a primeira tag (versão xml ...), adicione o início da tag "DrawerLayout".
No final do arquivo, adicione o widget "NavigationView" e o final da tag "DrawerLayout".
2.2.3 Conectando um Menu Lateral em uma Classe de Atividade
Abra o arquivo "MainActivity.kt" e, no método "onCreate", obtemos um link para "navController" (na atividade, isso parece um pouco mais complicado do que nos fragmentos).
Em seguida, ative o menu lateral:
O código da classe agora fica assim:
Agora o menu aparece em resposta ao deslize da borda esquerda da tela:
Seria bom adicionar um botão no canto superior esquerdo para chamar o menu lateral, certo?
2.3 Nome do botão e fragmento na barra de ferramentas
A ActionBar padrão, conforme
recomendado pelo guia oficial, é substituída pela Barra de Ferramentas.
Para desativar uma ActionBar existente, no arquivo "res / values / styles.xml", encontramos a linha
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
e substitua "DarkActionBar" por "NoActionBar".
Ótimo, desativamos o ActionBar.
Agora adicione a barra de ferramentas. Abra o arquivo "activity_main.xml", selecione a seção "Containers" na Paleta e arraste o widget "Toolbar" de lá para o layout da atividade. A barra de ferramentas foi adicionada, mas está vazia até o momento.
Vá para o arquivo de atividade "MainActivity.kt". Para exibir o botão e o nome do fragmento atual na barra de ferramentas, adicione as seguintes linhas ao método “onCreate ()”:
A barra de ferramentas agora exibe o nome do fragmento e o botão Para cima para fragmentos aninhados.
O botão para cima no android é, por algum motivo, indicado pela seta esquerda:
Para que o botão hambúrguer seja exibido na tela inicial do aplicativo, precisamos adicionar o parâmetro "drawerLayout" à configuração da barra de ferramentas, que contém o ID do widget DrawerLayout do arquivo "activity_main.xml".
Clicar neste botão exibe o menu lateral.
2.4 Menu inferior (navegação inferior)
Às vezes, é necessário focar a atenção do usuário em determinadas ações, e o menu inferior ajuda a fazer isso de forma eficaz. Adicione-o ao terceiro fragmento.
Primeiro, crie um arquivo de menu de recursos "bottom_nav_menu.xml" com alguns links. Em seguida, abra o layout do fragmento nº 3 (arquivo "fragment_fragment3.xml") e arraste o widget "BottomNavigationView" para ele, concordando simultaneamente com a proposta do IDE de adicionar a biblioteca com.android.support:design às dependências.
Se criamos o menu inferior não para um fragmento, mas para todos de uma vez, precisaríamos incluir o seguinte código no método onCreate da classe de atividade (arquivo “MainActivity.kt”):
Obviamente, o widget BottomNavigationView nesse caso teria que ser colocado no layout da atividade, não no fragmento.
Mas como precisamos desse menu apenas no fragmento nº 3, editaremos a classe de fragmento (arquivo “Fragment3.kt”) e o código parecerá um pouco mais complicado:
Como resultado, obtemos o menu inferior, que será exibido apenas no terceiro fragmento.
O mesmo, mas com outros links, faremos no quarto fragmento.
2.5 Menu pop-up
Outro tipo de menu é um menu pop-up que aparece quando você clica no botão (três pontos localizados verticalmente) no canto superior direito da tela.
Crie um arquivo de menu de recursos "top_right_menu.xml" com os links necessários.
No arquivo "MainActivity", no método "onCreate", antes de "toolBar.setupWithNavController ..." adicione a linha "setSupportActionBar (toolBar)".
E ainda na mesma classe, redefinimos dois métodos:
Pressionar o botão superior direito agora exibe um menu pop-up:
Resumo e link do github
Obviamente, o
componente de arquitetura de navegação facilita muito o trabalho do desenvolvedor. Tarefas difíceis no passado agora são resolvidas com algumas linhas de código.
Como o principal objetivo desta publicação era iluminar os algoritmos básicos para criar a navegação em um aplicativo Android, muitos detalhes da implementação foram deliberadamente deixados nos bastidores.
Meu horário de trabalho geralmente não me permite apoiar discussões, mas seus comentários, em qualquer caso, serão úteis para os visitantes do site e, portanto, sempre serão bem-vindos.
Os arquivos do projeto estão
aqui .