Bildungsprogramm zur Navigationskomponente: für diejenigen, die alle Tutorials übersprungen haben

Diese Geschichte ist für diejenigen gedacht, die die Navigationskomponente noch nicht kennen. Hier werden wir die Hauptelemente der Bibliothek durchgehen und sehen, wie alles aussieht.

Sie befinden sich jetzt im ersten Teil eines großen Artikels über Navigationskomponenten in einem Projekt mit mehreren Modulen. Wenn Sie bereits mit den Grundlagen vertraut sind, empfehle ich, weiter zu den Teilen zu gehen:

• Wie das Safe Args Plugin funktioniert und was es tut .

  
  
  
  
  

• Arbeiten mit der Navigationskomponente in einem Projekt mit mehreren Modulen mit SafeArgs .

  
  
  
  
  

• Lösung für die iOS-ähnliche Multistack-Navigation

  
  
  
  
  

TL; DR .:

Um die Navigation in der Anwendung mithilfe der Navigationskomponente zu organisieren, benötigen Sie:

1. Erstellen Sie ein Diagramm.

   
   
   
   
   

2. Fügen Sie Bildschirme hinzu;

   
   
   
   
   

3. Übergänge zwischen ihnen hinzufügen;

   
   
   
   
   

4. Fügen Sie bei Bedarf verschachtelte Diagramme hinzu.

   
   
   
   
   

5. Das ganze Chaos in NavHost stecken;

   
   
   
   
   

6. Geben Sie Übergänge im Code an.

   
   
   
   
   

Grundlegende Navigationskomponenten

1. Das Navigationsdiagramm ist die grundlegende Navigationseinheit. Es ist ein Diagramm, in dem Scheitelpunkte Bildschirme und Kanten Übergänge zwischen ihnen sind. Das Diagramm wird in einer separaten XML-Datei im Ordner res / navigation erstellt. Um den navController nicht irrezuführen, müssen Sie seinen Startpunkt im Diagramm angeben (startDestination).

2. Das Ziel repräsentiert die UI-Einheit im Diagramm (Fragment / Aktivität / 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- .

Übergänge zwischen Bildschirmen

Übergänge zwischen Bildschirmen können über Action oder DeepLink erfolgen.

Übergang mit Aktion

Wie es aussieht:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Aufruf des Übergangs:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Argumente am "anderen Ende" erhalten:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Navigieren mit Deep Link

Wie es aussieht:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Aufruf des Übergangs:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Argumente am "anderen Ende" erhalten:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Das ist alles! Einfach und unkompliziert genug - das überzeugt die Navigationskomponente. Lassen Sie uns nun untersuchen, wie das Safe Args-Plugin funktioniert und was es tut, und uns mit der Navigationskomponente in einem Multimodulprojekt mit SafeArgs und iOS-ähnlicher Multistack-Navigation befassen .