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

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

Bu sayfada, Jetpack Compose'a yönelik daha büyük ve View tabanlı kullanıcı arayüzü geçişinin 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 parçalarınızı karşılık gelen ekran composable'larıyla değiştirebildiğinizde Navigation Compose'a geçebilirsiniz. Ekran composable'ları Compose ve View içeriklerinin bir karışımını içerebilir ancak Navigation Compose'a geçişi etkinleştirmek için tüm gezinme hedefleri composable olmalıdır. Bu tarihe kadar, birlikte çalışabilirlik görünümünüzde ve Compose kod tabanınızda Fragment tabanlı gezinme bileşenini kullanmaya devam etmeniz gerekir. Daha fazla bilgi için navigasyon birlikte çalışabilirlik belgelerini inceleyin.

Yalnızca Compose'un kullanıldığı bir uygulamada Navigation Compose'u kullanmak ön koşul değildir. Birleştirilebilir içeriğinizi barındırmak için Fragment'leri kullanmaya devam ettiğiniz sürece Fragment tabanlı gezinme bileşenini kullanmaya devam edebilirsiniz.

Taşıma adımları

Önerilen taşıma stratejimizi izliyor veya başka bir yaklaşım benimsiyor olsanız da tüm gezinme hedeflerinin ekran composable'ları olduğu ve Fragment'ların yalnızca composable kapsayıcılar olarak işlev gördüğü bir noktaya ulaşırsınız. Bu aşamada Navigation Compose'a geçebilirsiniz.

Uygulamanız zaten bir UDF tasarım kalıbını ve mimariyle ilgili rehberimizi kullanıyorsa 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 yeniden düzenlemeler gerektirmemelidir.

Navigation Compose'a geçmek için aşağıdaki adımları uygulayın:

  1. Uygulamanıza Navigation Compose bağımlılığını ekleyin.

  2. App-level composable'ı oluşturun ve Activity'nize Compose giriş noktası olarak ekleyin. View düzeninin kurulumunu değiştirin:

    class SampleActivity : ComponentActivity() {

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

  3. Her gezinme hedefi için türler 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

    MigrationCommonScenariosSnippets.kt

  4. NavController'ı, kendisine referans vermesi gereken tüm composable'ların erişebileceği bir yerde ayarlayın (bu genellikle App composable'ınızın içindedir). Bu yaklaşım, durum yükseltme ilkelerine uyar ve NavController'ı, birleştirilebilir ekranlar arasında gezinme ve geri yığını koruma için tek doğru kaynak olarak kullanmanıza olanak tanır:

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

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

    @Composable
fun SampleApp() {
    val navController = rememberNavController()

    SampleNavHost(navController = navController)
}

@Composable
fun SampleNavHost(
    navController: NavHostController
) {
    NavHost(navController = navController, startDestination = First) {
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  6. Gezinme grafiğinizi oluşturmak için composable hedeflerini ekleyin. Her ekran daha önce Compose'a taşındıysa bu adım yalnızca bu ekran composable'larını parçalarınızdan composable hedeflerine ayırmaktan 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(/* ... */)
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  7. Compose kullanıcı arayüzünüzü tasarlama ile ilgili yönergeleri, özellikle ViewModel ve gezinme etkinliklerinin composable'lara nasıl iletilmesi gerektiğini uyguladıysanız sonraki adım, ViewModel'ı her ekran composable'ına sağlama şeklinizi değiştirmektir. Hilt ekleme ve Compose ile Navigation'a entegrasyonunu genellikle hiltViewModel üzerinden kullanabilirsiniz:

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

  8. Tüm findNavController() gezinme çağrılarını navController ile değiştirin ve bunları, tüm navController'ı iletmek yerine her composable ekrana gezinme etkinlikleri olarak iletin. Bu yaklaşım, best practices (en iyi uygulamalar) kapsamında, composable işlevlerdeki etkinlikleri arayanlara sunar ve navController'ı tek doğru kaynak olarak tutar.

    Veriler, hedef için tanımlanan rota sınıfının bir örneği oluşturularak hedefe iletilebilir. Daha sonra, hedefteki geri yığın girişinden doğrudan veya SavedStateHandle.toRoute() kullanılarak ViewModel aracılığıyla 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)
                }
            )
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  9. Tüm parçaları, ilgili XML düzenlerini, gereksiz gezinmeyi ve diğer kaynakları, eski parça ve Jetpack Navigation bağımlılıklarını kaldırın.

Aynı adımları, Navigation Compose ile ilgili daha fazla ayrıntıyla birlikte kurulum dokümanlarında bulabilirsiniz.

Yaygın kullanım alanları

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

Taşıma sırasında yaygın olarak karşılaşılan kullanım alanları şunlardır:

Bu kullanım alanları hakkında daha ayrıntılı bilgi için Oluştur ile gezinme başlıklı makaleyi inceleyin.

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

Gezinirken karmaşık veri nesnelerini aktarmamanızı önemle tavsiye ederiz. Bunun yerine, gezinme işlemleri gerçekleştirirken benzersiz tanımlayıcı veya başka bir kimlik biçimi gibi gerekli minimum bilgiyi bağımsız değişken olarak iletin. Karmaşık nesneleri, dataLayer gibi tek bir doğruluk kaynağında veri olarak depolamanız gerekir. Daha fazla bilgi için Gezinirken karmaşık verileri alma başlıklı makaleyi inceleyin.

Parçalarınız bağımsız değişken olarak karmaşık nesneler iletiyorsa öncelikle kodunuzu, bu nesnelerin veri katmanında depolanmasına ve alınmasına 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, Navigation Compose ile ilgili mevcut sınırlamalar açıklanmaktadır.

Navigation Compose'a artımlı geçiş

Şu anda, kodunuzda hedef olarak Fragment'leri kullanmaya devam ederken Navigation Compose'u kullanamazsınız. Navigation Compose'u kullanmaya başlamak için tüm hedeflerinizin composable olması gerekir. Bu özellik isteğini Sorun İzleyici'de takip edebilirsiniz.

Geçiş animasyonları

Navigation 2.7.0-alpha01 sürümünden itibaren, daha önce AnimatedNavHost üzerinden yapılan özel geçişleri ayarlama desteği artık doğrudan NavHost'da 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:

  • Navigation Compose codelab'i: Uygulamalı bir codelab ile Navigation Compose'un temellerini öğrenin.
  • Now in Android deposu: Tamamen Kotlin ve Jetpack Compose ile oluşturulmuş, Android tasarımına ve geliştirme alanındaki en iyi uygulamalara uygun, Navigation Compose'u içeren, tam işlevli bir Android uygulaması.
  • Sunflower'ı Jetpack Compose'a taşıma: Sunflower örnek uygulamasının Görünümler'den Compose'a taşıma sürecini belgeleyen bir blog yayınıdır. Bu yayında, Navigation Compose'a taşıma da ele alınır.
  • Her ekran için Jetnews: Jetnews örneğinin, Jetpack Compose ve Navigation Compose ile tüm ekranları destekleyecek şekilde yeniden düzenlenmesini ve taşınmasını belgeleyen bir blog yayını.