Programa educativo sobre el componente de navegación: para aquellos que se saltaron todos los tutoriales

Esta historia es para aquellos que aún no conocen el componente de navegación. Aquí repasaremos los elementos principales de la biblioteca y veremos cómo se ve todo.

Ahora se encuentra en la primera parte de un artículo extenso sobre el componente de navegación en un proyecto de varios módulos. Si ya está familiarizado con los conceptos básicos, le recomiendo ir más allá a las partes:

• Cómo funciona el complemento Safe Args y qué hace .

  
  
  
  
  

• Trabajar con el componente de navegación en un proyecto de varios módulos con SafeArgs .

  
  
  
  
  

• Solución para navegación multiestack similar a iOS

  
  
  
  
  

TL; DR.:

Para organizar la navegación en la aplicación utilizando el componente de navegación, necesita:

1. Crea un gráfico;

   
   
   
   
   

2. Agréguele pantallas;

   
   
   
   
   

3. Agregue transiciones entre ellos;

   
   
   
   
   

4. Agregue gráficos anidados si es necesario;

   
   
   
   
   

5. Poner todo este lío en NavHost;

   
   
   
   
   

6. Indique transiciones en código.

   
   
   
   
   

Componentes de navegación básicos

1. El gráfico de navegación es la unidad fundamental de navegación. Es un gráfico en el que los vértices son pantallas y los bordes son transiciones entre ellos. El gráfico se crea en un archivo xml separado en la carpeta res / navigation. Para no engañar al navController, debe especificar su punto de partida en el gráfico (startDestination)

2. El destino representa la unidad de la interfaz de usuario en el gráfico (Fragmento / Actividad / Diálogo / 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- .

Transiciones entre pantallas

Las transiciones entre pantallas se pueden realizar a través de Action o DeepLink.

Transición con acción

Qué aspecto tiene:

<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”>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Llamando a la transición:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtener argumentos en el "otro extremo":

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Navegando con enlace profundo

Qué aspecto tiene:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Llamando a la transición:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtener argumentos en el "otro extremo":

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

¡Eso es todo! Lo suficientemente simple y directo: esto es lo que gana el componente de navegación. Ahora profundicemos en cómo funciona el complemento Safe Args y qué hace, y empecemos a trabajar con el componente de navegación en un proyecto de varios módulos con SafeArgs y navegación de múltiples pistas similar a iOS .