Program pendidikan pada Komponen Navigasi: bagi mereka yang melewatkan semua tutorial

Cerita ini untuk mereka yang masih belum mengetahui Komponen Navigasi. Di sini kita akan membahas elemen utama perpustakaan dan melihat bagaimana tampilannya.

Anda sekarang berada di bagian pertama dari artikel besar tentang Komponen Navigasi dalam proyek multi-modul. Jika Anda sudah terbiasa dengan dasar-dasarnya, saya sarankan untuk melanjutkan ke bagian:

• Bagaimana plugin Safe Args bekerja dan apa fungsinya .

  
  
  
  
  

• Bekerja dengan Komponen Navigasi dalam proyek multi-modul dengan SafeArgs .

  
  
  
  
  

• Solusi untuk navigasi multistack seperti iOS

  
  
  
  
  

TL; DR.:

Untuk mengatur navigasi dalam aplikasi menggunakan Komponen Navigasi, Anda memerlukan:

1. Buat grafik;

   
   
   
   
   

2. Tambahkan layar ke dalamnya;

   
   
   
   
   

3. Tambahkan transisi di antara mereka;

   
   
   
   
   

4. Tambahkan grafik bersarang jika perlu;

   
   
   
   
   

5. Menempatkan semua kekacauan ini di NavHost;

   
   
   
   
   

6. Tunjukkan transisi dalam kode.

   
   
   
   
   

Komponen navigasi dasar

1. Grafik Navigasi adalah unit dasar navigasi. Ini adalah grafik di mana simpul adalah layar dan tepi adalah transisi di antara keduanya. Grafik dibuat dalam file xml terpisah di folder res / navigasi. Agar tidak menyesatkan navController, Anda harus menentukan titik awalnya dalam grafik (startDestination)

2. Tujuan mewakili unit UI pada grafik (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- .

Transisi antar layar

Transisi antar layar dapat dilakukan melalui Action atau melalui DeepLink.

Transisi dengan Tindakan

Seperti apa rupanya:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Memanggil transisi:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mendapatkan argumen di "ujung lain":

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Menavigasi dengan tautan dalam

Seperti apa rupanya:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Memanggil transisi:

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Mendapatkan argumen di "ujung lain":

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Itu saja! Sederhana dan cukup mudah - inilah yang dimenangkan Komponen Navigasi. Sekarang mari selami cara kerja plugin Safe Args dan apa fungsinya dan mulai bekerja dengan Komponen Navigasi dalam proyek multi-modul dengan SafeArgs dan navigasi multistack mirip iOS .