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

Gezinme Compose API,Compose uygulamasındaki composable'lar arasında gezinmenizi sağlarken Jetpack Navigation bileşeni, altyapısı ve özelliklerinden yararlanmanıza olanak tanır.

Bu sayfada, görünüm tabanlı kullanıcı arayüzünü Jetpack Compose'a taşıma işleminin bir parçası olarak Parça tabanlı Jetpack Navigasyon'dan Gezinme Oluşturma'ya nasıl geçileceği açıklanmaktadır.

Taşıma ön koşulları

Tüm Parçalarınızı ilgili ekran composable'larla değiştirebildiğinizde Gezinme Oluşturma'ya geçebilirsiniz. Ekran composable'ları Oluşturma ve Görüntüleme içeriklerinin bir karışımını içerebilir, ancak Gezinme Oluşturma Taşıma işleminin etkinleştirilmesi için tüm gezinme hedeflerinin composable olması gerekir. Bu tarihe kadar birlikte çalışabilirlik Görünümü ve Oluşturma kod tabanınızda Parça Tabanlı Gezinme bileşenini kullanmaya devam etmelisiniz. Daha fazla bilgi için navigasyon birlikte çalışabilirlik belgelerine bakın.

Yalnızca yazma uygulamasında gezinme menüsünün kullanılması bir ön koşul değildir. Oluşturulabilir içeriğinizi barındırmak için Parçalar'ı tuttuğunuz sürece Parça tabanlı Gezinme bileşenini kullanmaya devam edebilirsiniz.

Taşıma adımları

İster önerilen taşıma stratejimizi uygulayın ister başka bir yaklaşım benimsiyor olun, tüm gezinme hedeflerinin ekran composable olduğu bir noktaya ulaşırsınız. Parçalar yalnızca composable container görevi görür. Bu aşamada "Oluşturma" bölümünde gezinme seçeneğine geçebilirsiniz.

Uygulamanız zaten bir UDF tasarım kalıbını ve mimari rehberimizi uyguluyorsa Jetpack Compose ve Navigation Compose'a geçiş yapmak kullanıcı arayüzü katmanı dışında uygulamanızın diğer katmanlarında büyük değişiklikler gerektirmemelidir.

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. Bir App-level composable'ı oluşturun ve bunu Oluşturma giriş noktanız olarak Activity'a (Görünüm düzeninin ayarlarını değiştirerek) ekleyin:

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

  3. NavController öğesini, başvuruda bulunması gereken tüm composable'ların erişebileceği bir yerde kurun (bu genellikle App composable'ınızın içindedir). Bu yaklaşım, durum kaldırma ilkelerine uyar ve derlenebilir ekranlar arasında gezinmek ve arka yığını korumak için NavController öğesini doğru kaynak olarak kullanmanıza olanak tanır:

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

  4. Uygulamanızın NavHost içindeki composable'ın içinde şu öğeyi iletin: 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 ekran daha önce Compose'a taşındıysa bu adımda yalnızca Parçalarınızdaki ekran composable'larının composable hedefine çıkarılması söz konusudur:

    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 rehberini, özellikle de ViewModel öğelerinin ve gezinme etkinliklerinin composable'lara nasıl iletilmesi gerektiğini anlatan bir sonraki adım, composable'ın her bir ekrana ViewModel sağlama biçimini değiştirmektir. Hilt yerleştirmeyi ve entegrasyon noktasını genellikle hiltViewModel üzerinden Oluşturma ve Gezinme ile kullanabilirsiniz:

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

  7. Tüm findNavController() gezinme çağrılarını navController ile değiştirin ve tüm navController öğesini iletmek yerine bunları gezinme etkinlikleri olarak her composable ekrana iletin. Bu yaklaşım, etkinlikleri composable işlevlerden çağrı yapanlara göstermeyle ilgili en iyi uygulamaları izler ve navController öğesini tek doğru kaynak olarak tutar.

    1. Gezinme yol tarifleri ve işlemleri oluşturmak için daha önce Güvenli Bağımsız Değişkenler eklentisini kullandıysanız bunu bir yönlendirme ile değiştirin. Yol, composable'ınızın her hedef için benzersiz olan bir dize yoludur.
    2. Veri iletirken Güvenli Bağımsız Değişkenleri değiştirmek için Bağımsız değişkenlerle gezinme konusuna bakın.
    3. Yazmada Gezinme'de tür güvenliği için aşağıdaki Güvenli Bağımsız Değişkenler bölümünü okuyun.

      @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 kaynakları, eski Parça ve Jetpack Navigasyon bağımlılıklarını kaldırın.

Aynı adımları Kurulum dokümanlarında ve Gezinmeyle ilgili daha fazla ayrıntıda bulabilirsiniz.

Yaygın kullanım alanları

Hangi Gezinme bileşenini kullanıyor olursanız olun gezinmenin aynı ilkeleri geçerlidir.

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şturma ile gezinme bölümüne bakın.

Safe Args

Jetpack Navigation'ın aksine, Navigation Compose, kod oluşturma için SafeArgs eklentisinin kullanılmasını desteklemez. Bunun yerine, kodunuzu çalışma zamanında güvenli hale gelecek şekilde yapılandırarak Yazma bölümünde yazma özelliği ile güvenlik türü sağlayabilirsiniz.

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

Gezinme Oluşturma, Dize rotasını temel alır ve Jetpack Navigasyon'un aksine, özel Parcelable'lerin ve Serileştirilebilir Öğelerin bağımsız değişken olarak iletilmesini desteklemez.

Gezinirken karmaşık veri nesnelerini geçmemenizi önemle tavsiye ederiz. Bunun yerine, gezinme işlemlerini gerçekleştirirken benzersiz tanımlayıcı veya başka bir kimlik biçimi gibi gerekli minimum bilgileri bağımsız değişkenler olarak iletin. Karmaşık nesneleri, veri katmanı gibi tek bir doğruluk kaynağında veri olarak depolamanız gerekir. Daha fazla bilgi için Gezinme sırasında karmaşık verileri alma konusuna bakın.

Parçalarınız karmaşık nesneleri bağımsız değişken olarak iletiyorsa öncelikle kodunuzu, bu nesneleri veri katmanından depolayıp getirmeye izin verecek şekilde yeniden düzenlemenizi öneririz. Örnekler için Now in Android deposu'na bakın.

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 anda, Parçalar'ı kodunuzda hedef olarak kullanmaya devam ederken Gezinme Yazma'yı kullanamazsınız. Gezinme Oluşturma Aracı'nı kullanmaya başlamak için tüm hedeflerinizin composable olması gerekir. Bu özellik isteğini Sorun İzleyici'den takip edebilirsiniz.

Geçiş animasyonları

Gezinme 2.7.0-alpha01 sürümünden itibaren, daha önce AnimatedNavHost ürününden özel geçiş ayarlama desteği NavHost ürününde doğrudan destekleniyor. Daha fazla bilgi için sürüm notlarını okuyun.

Daha fazla bilgi

Oluşturma Gezinme'ye geçiş hakkında daha fazla bilgi edinmek için aşağıdaki kaynaklara göz atın:

  • Gezinme Oluşturma codelab'i: Uygulamalı codelab'den yararlanarak Oluşturmada Gezinme ile ilgili temel bilgileri öğrenin.
  • Şimdi Android deposunda: Tamamen Kotlin ve Jetpack Compose ile oluşturulmuş, Android tasarımı ve geliştirmeyle ilgili en iyi uygulamaları izleyen ve Gezinme Oluşturma özelliğini içeren, tamamen işlevsel bir Android uygulaması.
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower örnek uygulamasının Görünümler'den Compose'a geçiş sürecini belgeleyen ve Gezinme Oluşturmaya Geçişi de içeren bir blog yayını.
  • Her ekran için Jetnews: Jetnews örneğinin yeniden düzenlenmesi ve taşınmasıyla ilgili bilgilerin yer aldığı bir blog yayınıdır. Bu sayede Jetpack Compose ve Gezinme Oluşturma ile tüm ekranlar desteklenebilir.