Jetpack Navigation'ı Navigation Compose'a taşıma

Gezinme Compose API, Jetpack Navigation bileşeninden yararlanarak uygulama oluşturun göz önünde bulundurun.

Bu sayfada, Parça tabanlı Jetpack Navigasyon'dan Görünüm tabanlı kullanıcı arayüzünü Jetpack'e taşıma işleminin bir parçası olarak Gezinme Oluşturma Oluştur'u tıklayın.

Taşıma ön koşulları

Oluşturduğunuz tüm öğeleri değiştirdiğinizde İlgili ekran composable'larını içeren parçalar. Ekran composable'ları şunları içerebilir: Oluştur ve Görüntüle içeriğinin bir karışımı, ancak tüm gezinme hedefleri composables'ı tıklayın. O zamana kadar birlikte çalışma görünümünde Parça Tabanlı Gezinme bileşenini kullanmaya devam edin ve Kod tabanı oluşturun. Daha fazla bilgi için navigasyon birlikte çalışabilirlik belgelerine bakın ekleyebilirsiniz.

Yalnızca yazma uygulamasında gezinme menüsünün kullanılması bir ön koşul değildir. Şunları yapabilirsiniz: kullanmaya devam edeceğiniz Parçaya Dayalı Gezinme bileşenini Oluşturulabilir içeriklerinizi barındırma için kullanılan parçalar.

Taşıma adımları

İster önerilen taşıma stratejimizi takip ediyor olun ister başka bir yaklaşımda, tüm navigasyon hedeflerinin mevcut olduğu bir noktaya ulaşırsınız. ekran composable'ları oluşturuyor. Burada oluşturma bölümünde gezinme bölümüne geçebilirsiniz.

Uygulamanız zaten bir UDF tasarım kalıbını izliyorsa ve Jetpack Compose ve Navigation Compose'a geçiş yaparken Uygulamanızın, kullanıcı arayüzü katmanı dışında diğer katmanlarının da önemli ölçüde yeniden düzenlenmesini gerektirir.

Oluşturma bölümünde gezinme bölümüne geçmek için şu adımları uygulayın:

  1. Gezinme Yazma bağımlılığı'nı uygulamanıza ekleyin.
  2. App-level composable'ı oluşturun, şunu ekleyin: Activity Görünüm düzeni kurulumunu değiştirerek giriş noktasını oluşturun:

    class SampleActivity : ComponentActivity() {
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample)
            setContent {
                SampleApp(/* ... */)
            }
        }
    }

  3. NavController'ı gereken tüm composable'ların olduğu bir yerde kurun. erişimi olması gerektiğini unutmayın (bu genellikle App içindedir) composable). Bu yaklaşım devlet kaldırma ilkelerine gezinme için doğru kaynak olarak NavController kullanmanıza olanak tanır arasında koordineli bir şekilde çalışıyor;

    @Composable
    fun SampleApp() {
        val navController = rememberNavController()
        // ...
    }

  4. Uygulamanızın NavHost öğesini App composable'ın içinde oluşturun ve navController:

    @Composable
    fun SampleApp() {
        val navController = rememberNavController()
    
        SampleNavHost(navController = navController)
    }
    
    @Composable
    fun SampleNavHost(
        navController: NavHostController
    ) {
        NavHost(navController = navController, startDestination = "first") {
            // ...
        }
    }

  5. Gezinme grafiğinizi oluşturmak için composable hedeflerini ekleyin. Her bir ekranı daha önce Oluştur'a taşındı. Bu adım yalnızca şunlardan oluşur: bu ekrandaki composable'ları Parçalarınızdan composable hedefine çıkarıyor. hedefler:

    class FirstFragment : Fragment() {
    
        override fun onCreateView(
            inflater: LayoutInflater,
            container: ViewGroup?,
            savedInstanceState: Bundle?
        ): View {
            return ComposeView(requireContext()).apply {
                setContent {
                    // FirstScreen(...) EXTRACT FROM HERE
                }
            }
        }
    }
    
    @Composable
    fun SampleNavHost(
        navController: NavHostController
    ) {
        NavHost(navController = navController, startDestination = "first") {
            composable("first") {
                FirstScreen(/* ... */) // EXTRACT TO HERE
            }
            composable("second") {
                SecondScreen(/* ... */)
            }
            // ...
        }
    }

  6. Oluşturma kullanıcı arayüzünüzü tasarlama konusundaki yönergeleri takip ettiyseniz özellikle ViewModel öğelerinin ve gezinme etkinliklerinin composables, sonraki adım ViewModel öğesini sağlama şeklinizi değiştirmektir. her ekranı composable'a ayırıyoruz. Hilt yerleştirmeyi ve entegrasyonunu genellikle hiltViewModel üzerinden Yazma ve Gezinme özelliğiyle işaretleyin:

    @Composable
    fun FirstScreen(
        // viewModel: FirstViewModel = viewModel(),
        viewModel: FirstViewModel = hiltViewModel(),
        onButtonClick: () -> Unit = {},
    ) {
        // ...
    }

  7. Tüm findNavController() navigasyon çağrısını navController ile değiştir oluşturmak ve bunları gezinme etkinlikleri olarak iletmek navController bölümünün tamamını geçmekten daha iyidir. Bu yaklaşım en iyi etkinlikleri composable işlevlerden arayanlara ve navController değerini tek doğru kaynak olarak tutar.

    1. Reklam oluşturmak için daha önce Güvenli Bağımsız Değişkenler yol tarifleri ve işlemleri kullanıyorsanız, bunu bir rota ile değiştirin. Her hedef için composable'ınızın benzersiz olan dize yolu.
    2. Veri aktarırken Güvenli Bağımsız Değişkenleri değiştirmek için Şununla gezinme: bağımsız değişkenler olarak tanımlanır.
    3. Yazma Sihirbazı'nda tür güvenliği için Güvenli Bağımsız Değişkenler bölümünü okuyun bölümüne göz atın.

      @Composable
      fun SampleNavHost(
          navController: NavHostController
      ) {
          NavHost(navController = navController, startDestination = "first") {
              composable("first") {
                  FirstScreen(
                      onButtonClick = {
                          // findNavController().navigate(firstScreenToSecondScreenAction)
                          navController.navigate("second_screen_route")
                      }
                  )
              }
              composable("second") {
                  SecondScreen(
                      onIconClick = {
                          // findNavController().navigate(secondScreenToThirdScreenAction)
                          navController.navigate("third_screen_route")
                      }
                  )
              }
              // ...
          }
      }

  8. Tüm Parçaları, ilgili XML düzenlerini, gereksiz gezinmeyi ve diğer öğeleri kaldırın. kaynakları ve eski Parça ve Jetpack Navigasyon bağımlılıklarını içerir.

Aynı adımları, Gezinme Yazımıyla ilgili daha fazla ayrıntı içeren Kurulum belgeleri.

Yaygın kullanım alanları

Hangi Gezinme bileşenini kullanıyor olursanız olun, aynı ilkeler, gezinme menüsü uygulanır.

Taşıma ile ilgili yaygın kullanım örnekleri aşağıdakileri içerir:

Bu kullanım alanları hakkında daha ayrıntılı bilgi için Oluştur'u tıklayın.

Safe Args

Jetpack Navigasyon'dan farklı olarak, Gezinme Yazma Sihirbazı Güvenli Arama Kod oluşturmak için Args eklentisidir. Bunun yerine, Yazma bölümünde gezinme belirler.

Navigasyon sırasında karmaşık verileri alma

Gezinme Oluşturma, Dize rotasını temel alır ve Jetpack Navigasyon'un aksine, özel ayrıştırılabilir öğelerin ve serilenebilir öğelerin bağımsız değişken olarak aktarılmasını desteklemez.

Gezinirken karmaşık veri nesnelerini geçmemenizi önemle tavsiye ederiz. Bunun yerine, benzersiz tanımlayıcı veya kullanıcı adı gibi (gezinme işlemleri gerçekleştirilirken bağımsız değişken olarak) başka bir kimlik biçimini Şunları yapmalısınız: karmaşık nesneleri tek bir doğruluk kaynağında (ör. veriler) katman. Daha fazla bilgi için Aşağıdaki durumlarda karmaşık verileri alma: gezinme başlıklı makaleyi inceleyin.

Parçalarınız karmaşık nesneleri bağımsız değişken olarak iletiyorsa yeniden düzenleme yapmayı düşünebilirsiniz ve bu nesneleri şuradan depolamanıza ve getirmeye olanak tanıyacak şekilde kodunuzu veri katmanından yararlanın. Now in Android repository (Şimdi Android deposunda) örnekler.

Sınırlamalar

Bu bölümde Gezinme Oluşturma Aracı'na ilişkin mevcut sınırlamalar açıklanmaktadır.

Gezinme menüsüne artımlı taşıma

Şu an için Parçalar'ı mevcut iletişim bilgileri olarak hedeflerin sayısını artırır. Yazmada Gezinme'yi kullanmaya başlamak için tüm hedeflerin composable olması gerekir. Bu özellik isteğini şuradan takip edebilirsiniz: Sorun İzleyici.

Geçiş animasyonları

Gezinme 2.7.0-alpha01 sürümünden itibaren, özel ayarlama desteği daha önce AnimatedNavHost'ten yapılan geçişler şimdi NavHost'te doğrudan desteklenir. Sürüm notlarını okuyun konulu videomuzu izleyin.

Daha fazla bilgi

Oluşturma bölümünde gezinme bölümüne taşıma hakkında daha fazla bilgi için aşağıdakilere bakın kaynaklar:

  • Gezinme Compose codelab: Navigasyon oluşturmak için temel bilgileri uygulamalı bir codelab'e göz atın.
  • Artık Android deposunda: Tamamen işlevsel bir Android uygulaması tamamen Android tasarımını temel alan Kotlin ve Jetpack Compose kullanılarak geliştirildi ve geliştirmeyle ilgili en iyi uygulamaları içerir ve Oluşturmada Gezinme'yi içerir.
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower örnek uygulamasının Görünümler'den Oluşturma'da gezinme seçeneği de kullanılabilir.
  • Her ekran için jet haberleri: yeniden düzenlemesi ve Jetnews örneğinin yeni sürüme geçirilmesi ve taşınması, Jetpack Compose ve Gezinme: Yazma.
ziyaret edin. ziyaret edin.