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

Navigation Compose API, Jetpack Navigation'ın bileşeninden, altyapısından ve özelliklerinden yararlanırken bir Compose uygulamasındaki bileşenler arasında gezinmenize olanak tanır.

Bu sayfada, Jetpack Compose'a yapılan daha kapsamlı, görünüme dayalı kullanıcı arayüzü taşıma işleminin bir parçası olarak, Fragment tabanlı Jetpack Navigation'dan Navigation Compose'a nasıl geçiş yapılacağı açıklanmaktadır.

Taşıma ön koşulları

Tüm Fragment'lerinizi ilgili ekran bileşenleriyle değiştirebildiğinizde Navigasyon Oluşturma'ya geçebilirsiniz. Ekran bileşenleri Oluşturma ve Görüntüleme içeriğinin bir karışımını içerebilir ancak Gezinme Oluşturma taşıma işlemini etkinleştirmek için tüm gezinme hedefleri bileşen olmalıdır. 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 Oluştur uygulamasında gezinme oluşturma özelliğini kullanmak ön koşul değildir. Oluşturduğunuz içeriği barındırmak için parçaları kullanmaya devam ettiğiniz sürece Parça tabanlı gezinme bileşenini kullamaya devam edebilirsiniz.

Taşıma adımları

Önerilen taşıma stratejimizi uygular veya başka bir yaklaşım benimserseniz tüm gezinme hedeflerinin ekran bileşenleri olduğu bir noktaya ulaşırsınız. Bu noktada, Fragment'ler yalnızca bileşen kapsülü olarak çalışı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 kılavuzumuzu uyguluyorsa Jetpack Compose ve Navigation Compose'e geçiş için kullanıcı arayüzü katmanı dışındaki diğer katmanlarda büyük çaplı yeniden yapılandırmaya gerek yoktur.

Gezinme Oluştur'a geçmek için aşağıdaki adımları uygulayın:

  1. Gezinme Yazma bağımlılığı'nı uygulamanıza ekleyin.
  2. Bir App-level bileşeni oluşturun ve Görüntüleme düzeninin kurulumunu değiştirerek Oluşturma giriş noktası olarak Activity'inize ekleyin:

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

  3. Her gezinme hedefi için tür oluşturun. Veri gerektirmeyen hedefler için data object, veri gerektiren hedefler için data class veya class kullanın.

    @Serializable data object First
    @Serializable data class Second(val id: String)
    @Serializable data object Third
    

  4. NavController öğesini, başvuruda bulunması gereken tüm composable'ların erişebildiği bir yerde kurun (bu genellikle App composable'ınızın içindedir). Bu yaklaşım, devlet kaldırma ilkelerine uyar ve NavController, birleştirilebilir ekranlar arasında gezinmek ve arka yığını korumak için bilgi kaynağı olarak kullanmanızı sağlar.

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

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

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

  6. Gezinme grafiğinizi oluşturmak için composable varış noktalarını ekleyin. Her ekran daha önce Compose'a taşındıysa bu adım yalnızca bu ekran bileşenlerini Fragment'lerinizden composable hedeflerine ayıklamaktır:

    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(/* ... */)
            }
            // ...
        }
    }

  7. Oluşturma kullanıcı arayüzünüzü tasarlama ile ilgili talimatları, özellikle de ViewModel'lerin ve gezinme etkinliklerinin bileşenlere nasıl aktarılması gerektiğiyle ilgili talimatları uyguladıysanız sonraki adım, her ekran bileşenine ViewModel'yi sağlama şeklinizi 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 = {},
    ) {
        // ...
    }

  8. 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, birleştirilebilir işlevlerdeki etkinlikleri arayanlara göstermeyle ilgili en iyi uygulamaları izler ve navController'yi tek doğru kaynak olarak tutar.

    Veriler, söz konusu hedef için tanımlanan rota sınıfının bir örneği oluşturularak hedefe iletilebilir. Daha sonra, doğrudan hedefteki arka yığın girişinden veya SavedStateHandle.toRoute() kullanılarak ViewModel öğesinden elde edilebilir.

    @Composable
    fun SampleNavHost(
        navController: NavHostController
    ) {
        NavHost(navController = navController, startDestination = First) {
            composable<First> {
                FirstScreen(
                    onButtonClick = {
                        // findNavController().navigate(firstScreenToSecondScreenAction)
                        navController.navigate(Second(id = "ABC"))
                    }
                )
            }
            composable<Second> { backStackEntry ->
                val secondRoute = backStackEntry.toRoute<Second>()
                SecondScreen(
                    id = secondRoute.id,
                    onIconClick = {
                        // findNavController().navigate(secondScreenToThirdScreenAction)
                        navController.navigate(Third)
                    }
                )
            }
            // ...
        }
    }

  9. Tüm Fragment'leri, ilgili XML düzenlerini, gereksiz gezinme ve diğer kaynakları ve eski Fragment ile Jetpack Navigasyon bağımlılıkları kaldırın.

Aynı adımları, Gezinme Oluşturma ile ilgili daha fazla ayrıntıyla birlikte Kurulum dokümanlarında bulabilirsiniz.

Yaygın kullanım alanları

Hangi gezinme bileşenini kullanıyor olursanız olun aynı gezinme 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ştur ile gezinme başlıklı makaleyi inceleyin.

Gezerken karmaşık verileri alma

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üzenlemeyi düşünün. Örnekler için Now in Android deposu'na bakın.

Sınırlamalar

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

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

Şu anda, Kodda Parçalar'ı hedef olarak kullanmaya devam ederken Gezinme Oluşturmayı kullanamazsınız. Navigasyon Oluşturma'yı kullanmaya başlamak için tüm hedeflerinizin derlenebilir olması gerekir. Bu özellik isteğini Sorun Takip Aracı'nda 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 artık NavHost üzerinde doğrudan desteklenmektedir. Daha fazla bilgi için sürüm notlarını okuyun.

Daha fazla bilgi

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

  • Gezinme Oluşturma codelab'i: Uygulamalı bir codelab ile Gezinme Oluşturma'nın temellerini öğrenin.
  • Artık Android deposunda: Tamamen Kotlin ve Jetpack Compose ile oluşturulmuş, Android tasarım ve geliştirmeyle ilgili en iyi uygulamaları izleyen ve Navigation Compose'i içeren, tam işlevli bir Android uygulaması.
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower örnek uygulamasının Views'dan Compose'a geçiş yolculuğunu belgeleyen bir blog yayını. Bu yayında, Gezinme Compose'a geçiş de ele alınmaktadır.
  • Her ekran için Jetnews: Jetpack Compose ve Gezinme Oluşturma ile tüm ekranları desteklemek için Jetnews örneğinin yeniden düzenlenmesini ve taşınmasını anlatan bir blog yayını.