Programa educativo sobre o componente de navegação: para quem pulou todos os tutoriais

Esta história é para aqueles que ainda não conhecem o Componente de navegação. Aqui, examinaremos os principais elementos da biblioteca e veremos como tudo se parece.

Agora você está na primeira parte de um grande artigo sobre o Componente de navegação em um projeto de vários módulos. Se você já está familiarizado com o básico, recomendo ir mais adiante nas partes:

• Como o plugin Safe Args funciona e o que ele faz .

  
  
  
  
  

• Trabalhando com o componente de navegação em um projeto de vários módulos com SafeArgs .

  
  
  
  
  

• Solução para navegação multistack semelhante ao iOS

  
  
  
  
  

TL; DR.:

Para organizar a navegação no aplicativo usando o componente de navegação, você precisa de:

1. Crie um gráfico;

   
   
   
   
   

2. Adicione telas a ele;

   
   
   
   
   

3. Adicione transições entre eles;

   
   
   
   
   

4. Adicione gráficos aninhados, se necessário;

   
   
   
   
   

5. Colocando toda essa bagunça no NavHost;

   
   
   
   
   

6. Indique as transições no código.

   
   
   
   
   

Componentes básicos de navegação

1. O gráfico de navegação é a unidade fundamental de navegação. É um gráfico em que os vértices são telas e as arestas são as transições entre eles. O gráfico é criado em um arquivo xml separado na pasta res / navigation. Para não enganar o navController, você deve especificar seu ponto de partida no gráfico (startDestination)

2. Destino representa a unidade de IU no gráfico (Fragment / Activity / Dialog / NestedGraph).

3. Action destination- . ( ), ( , ).

4. Nested Graph —  . , <include>.

5. NavHost — , . , NavHostFragment, . :

<androidx.fragment.app.FragmentContainerView
    android:id="@+id/navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_main" />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

6. NavController — , . . NavController —  , , , , , shared- .

Transições entre telas

As transições entre telas podem ser feitas por meio do Action ou do DeepLink.

Transição com Ação

O que isso parece:

<action
    android:id=”@+id/action_to_user_details”
    app:destination=”@id/userDetailsFragment”
    app:enterAnim=”@anim/add_fragment_animation”
    app:exitAnim=”@anim/pop_fragment_animation”
    app:popEnterAnim=”@anim/pop_enter_animation”
    app:popExitAnim=”@anim/pop_exit_animation”>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Chamando a transição:

navController.navigate(
    R.id.action_to_user_details,
    Bundle().apply {putString(USER_ID, userId)}
)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtendo argumentos do "outro lado":

private val userID by lazy {
    arguments!![USER_ID]
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Navegando com link direto

O que isso parece:

<deepLink 
    app:uri=”app://customUri?parameter={parameterName}”
/>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Chamando a transição:

navController.navigate(
    Uri.parse(“app://customUri?parameter=$reason”)
)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtendo argumentos do "outro lado":

private val refundId by lazy {
    arguments?.getString(“parameter”, null)
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Isso é tudo! Simples e direto o suficiente - é isso que o Componente de navegação vence. Agora, vamos mergulhar em como o plug-in Safe Args funciona e o que ele faz e começar a trabalhar com o componente de navegação em um projeto de vários módulos com SafeArgs e navegação multistack semelhante ao iOS .