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

Gezinme Compose API'si, Compose uygulamasındaki composable'lar arasında gezinmenize olanak tanırken Jetpack Navigation'ın bileşeni, altyapısı ve özelliklerinden faydalanır.

Bu sayfada, Jetpack-Compose'a daha geniş kapsamlı, View tabanlı kullanıcı arayüzü taşıma işleminin bir parçası olarak Fragment tabanlı Jetpack Navigation'tan Navigation Compose'a nasıl geçiş yapılacağı açıklanmaktadır.

Taşıma ön koşulları

Tüm Parçalarınızı ilgili ekran composable'larıyla değiştirebildiğinizde Gezinme Yazma'ya geçebilirsiniz. Ekran composable'ları, Oluşturma ve Görüntüleme içeriğinin bir karışımını içerebilir ancak Navigation Compose taşıma işlemini etkinleştirmek için tüm gezinme hedefleri composable olmalıdır. O zamana 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 edinmek için gezinme birlikte çalışabilirlik belgelerine göz atın.

Yalnızca Compose'da kullanılan bir uygulamada Gezinme Yazma'yı kullanmak 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 izleyin ister farklı bir yaklaşım benimseyin, tüm gezinme hedeflerinin "screen composable"lar olduğu bir noktaya ulaşırsınız. Parçalar yalnızca composable container olarak işlem görür. Bu aşamada, Gezinme Yazma'ya geçebilirsiniz.

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

Gezinme Yazma'ya 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 Görünüm düzeninin ayarlarını değiştirerek bu composable'ı Activity öğenize Oluşturma giriş noktanız olarak ekleyin:

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

  3. NavController özelliğini, referans vermesi gereken tüm composable'ların erişebildiği bir yere kurun (bu genellikle Appcomposable'ınızın içindedir). Bu yaklaşım, durum kaldırma ilkelerini izler ve composable ekranlar arasında gezinmek ve arka yığını korumak için bilgi kaynağı olarak NavController kullanmanızı sağlar:

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

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

    @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 Oluşturma'ya taşındıysa bu adım yalnızca bu ekran composable'larının Fragment'larınızdan composable hedeflerine çıkarılmasından oluşur:

    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. Compose kullanıcı arayüzünüzü tasarlama, özellikle de ViewModel'lerin ve gezinme etkinliklerinin composable'lara nasıl aktarılması gerektiğiyle ilgili yönergeleri izlediyseniz sonraki adım, ViewModel öğelerini composable'ların her birine sağlama şeklinizi değiştirmektir. Hilt ekleme işlemini 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 navController öğesinin tamamını iletmek yerine bunları gezinme etkinlikleri olarak her bir composable ekrana iletin. Bu yaklaşım, etkinliklerin composable işlevlerden arayanlara gösterilmesiyle ilgili en iyi uygulamaları izler ve navController sonucunun tek doğru kaynak olmasını sağlar.

    1. Daha önce gezinme tarifleri ve işlemleri oluşturmak için Safe Args eklentisini kullandıysanız bunu bir route (composable'ınıza giden ve her hedef için benzersiz olan bir dize yolu) ile değiştirin.
    2. Veri iletirken Güvenli Bağımsız Değişkenleri değiştirmek için Bağımsız değişkenlerle gezinme bölümüne bakın.
    3. Gezinme Yazma'da tür güvenliği için aşağıdaki Güvenli Aramalar 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üzenleri, gereksiz gezinme ile diğer kaynaklar ile eski Fragment ve Jetpack Navigation bağımlılıklarını kaldırın.

Gezinme sırasında ileti yazma ile ilgili diğer ayrıntılar için aynı adımları Kurulum belgelerinde bulabilirsiniz.

Yaygın kullanım alanları

Hangi Gezinme bileşenini kullanırsanız kullanın, aynı gezinme ilkeleri geçerlidir.

Taşıma işleminin yaygın kullanım alanları arasında şunlar bulunur:

Bu kullanım alanları hakkında daha ayrıntılı bilgi için Oluşturma ile gezinme başlıklı makaleye bakın.

Safe Args

Jetpack Navigasyon'un aksine Navigation Compose kod oluşturmak için SafeArgs eklentisinin kullanılmasını desteklemez. Bunun yerine, kodunuzu çalışma zamanında tür güvenli olacak şekilde yapılandırarak Gezinme Yazma ile tür güvenliği elde edebilirsiniz.

Gezinirken karmaşık verileri alma

Gezinme Oluşturma, Dize rotasını temel alır ve Jetpack Navigation'tan farklı olarak, özel Parselebilir Öğelerin ve Serileştirilebilir Öğelerin bağımsız değişken olarak aktarılmasını desteklemez.

Gezinme sırasında karmaşık veri nesnelerini iletmemenizi ö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şken olarak iletin. Karmaşık nesneleri veri katmanı gibi tek bir doğru kaynakta veri olarak depolamanız gerekir. Daha fazla bilgi için Gezinme sırasında karmaşık veriler alma bölümüne bakın.

Parçalarınız karmaşık nesneleri bağımsız değişken olarak iletiyorsa önce kodunuzu, bu nesnelerin veri katmanından saklanıp getirilmesine olanak tanıyacak şekilde yeniden düzenlemeyi düşünün. Örnekler için Now in Android deposuna bakın.

Sınırlamalar

Bu bölümde, Gezinmeyi Oluşturma ile ilgili mevcut sınırlamalar açıklanmaktadır.

Gezinme Yazma'ya artımlı taşıma

Şu anda, kodunuzda Hedef olarak Parçalar kullanırken Gezinmede Yazma özelliğini kullanamazsınız. Gezinmede Yazma özelliğini kullanmaya başlamak için tüm hedeflerinizin composable olması gerekir. Bu özellik isteğini Sorun İzleyici'de takip edebilirsiniz.

Geçiş animasyonları

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

Daha fazla bilgi

Navigation Compose'a geçiş hakkında daha fazla bilgi için aşağıdaki kaynaklara bakın:

  • Gezinme Oluşturma codelab'i: Uygulamalı bir codelab ile Gezinme Yazma işleviyle ilgili temel bilgileri öğrenin.
  • Artık Android kod deposunda: Tamamen Kotlin ve Jetpack Compose ile oluşturulmuş, Android tasarım ve geliştirmeyle ilgili en iyi uygulamaları izleyen, Navigation Compose'u da içeren tam işlevsel bir Android uygulaması.
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower örnek uygulamasının Look'ten Compose'a geçiş yolculuğunu anlatan ve Navigation Compose'a geçiş de içeren bir blog yayını.
  • Her ekran için Jetnews: Jetpack Compose ve Navigation Compose ile tüm ekranları desteklemek için Jetnews örneğinin yeniden düzenlenmesini ve taşınmasını belgeleyen bir blog yayını.