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

Navigation Compose API, Jetpack Navigation'ın bileşeninden, altyapısından ve özelliklerinden yararlanırken 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ı ilgili 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 navigation interop 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 mimari kılavuzumuzu 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'ınıza 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'ı, referans vermesi gereken tüm composable'ların erişebileceği bir yere ayarlayın (bu genellikle App composable'ınızın içindedir). Bu yaklaşım, durum yükseltme ilkelerine uyar ve NavController öğesini, composable 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 ibarettir:

    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 entegrasyon noktasını genellikle hiltViewModel aracılığıyla 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 ViewModel kullanılarak SavedStateHandle.toRoute() 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 gezinme 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 belgelerinde bulabilirsiniz.

Yaygın kullanım alanları

Hangi Navigation bileşenini kullanırsanız kullanın, aynı navigasyon 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 bir 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 veri katmanından 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, 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 Issue Tracker'da takip edebilirsiniz.

Geçiş animasyonları

Navigation 2.7.0-alpha01'den itibaren, daha önce AnimatedNavHost'den ayarlanan özel geçişler artık doğrudan NavHost'de 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 Views'dan Compose'a taşıma sürecini belgeleyen bir blog yayınıdır. Bu yayında, Navigation Compose'a taşıma da ele alınmaktadı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ı.