Programme éducatif sur le composant de navigation: pour ceux qui ont sauté tous les tutoriels

Cette histoire s'adresse à ceux qui ne connaissent toujours pas le composant de navigation. Ici, nous allons passer en revue les principaux éléments de la bibliothèque et voir à quoi tout cela ressemble.

Vous êtes maintenant dans la première partie d'un grand article sur le composant de navigation dans un projet multi-module. Si vous connaissez déjà les bases, je vous recommande d'aller plus loin dans les parties:

• Comment fonctionne le plugin Safe Args et ce qu'il fait .

  
  
  
  
  

• Utilisation du composant de navigation dans un projet multi-module avec SafeArgs .

  
  
  
  
  

• Solution pour la navigation multipiste de type iOS

  
  
  
  
  

TL; DR.:

Pour organiser la navigation dans l'application à l'aide du composant de navigation, vous avez besoin:

1. Créez un graphique;

   
   
   
   
   

2. Ajoutez-y des écrans;

   
   
   
   
   

3. Ajoutez des transitions entre eux;

   
   
   
   
   

4. Ajoutez des graphiques imbriqués si nécessaire;

   
   
   
   
   

5. Mettre tout ce désordre dans NavHost;

   
   
   
   
   

6. Indiquez les transitions dans le code.

   
   
   
   
   

Composants de navigation de base

1. Le graphique de navigation est l'unité fondamentale de navigation. C'est un graphe dans lequel les sommets sont des écrans et les arêtes sont des transitions entre eux. Le graphique est créé dans un fichier xml séparé dans le dossier res / navigation. Afin de ne pas induire en erreur le navController, vous devez spécifier son point de départ dans le graphe (startDestination)

2. La destination représente l'unité d'interface utilisateur sur le graphique (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- .

Transitions entre les écrans

Les transitions entre les écrans peuvent être effectuées via Action ou via DeepLink.

Transition avec action

À quoi il ressemble:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Appel de la transition:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtenir des arguments à «l'autre extrémité»:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Naviguer avec un lien profond

À quoi il ressemble:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Appel de la transition:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Obtenir des arguments à «l'autre extrémité»:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

C'est tout! C'est assez simple et direct - c'est ce que le composant de navigation gagne. Voyons maintenant comment fonctionne le plug-in Safe Args et ce qu'il fait et commençons à travailler avec le composant de navigation dans un projet multi-module avec SafeArgs et la navigation multipiste de type iOS .