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üm tabanlı 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. O zamana 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 gezinme birlikte çalışabilirliği belgelerini inceleyin.

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, Gezinme Oluştur'a 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ş, kullanıcı arayüzü katmanı dışındaki uygulama katmanlarınızın büyük çaplı yeniden yapılandırılmasını gerektirmez.

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

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

  2. Bir App-level bileşeni oluşturun ve Görüntüleme düzeninin ayarlarını değiştirerek Oluştur 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(/* ... */)
        }
    }
}
    MigrationCommonScenariosSnippets.kt

  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

    MigrationCommonScenariosSnippets.kt

  4. NavController öğesini, referans vermesi gereken tüm bileşenlerin erişebileceği bir yerde ayarlayın (bu genellikle Appbileşeninizin içindedir). Bu yaklaşım, durum kaldırma ilkelerini takip eder ve derlenebilir ekranlar arasında gezinmek ve arka yığını korumak için NavController'yi gerçek kaynak olarak kullanmanıza olanak tanır:

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

  5. App bileşeninde 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 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(/* ... */)
        }
        // ...
    }
}
    MigrationCommonScenariosSnippets.kt

  7. Oluşturma kullanıcı arayüzünüzü tasarlama ile ilgili talimatları, özellikle de ViewModel'lerin ve gezinme etkinliklerinin bileşenlere nasıl iletileceğiyle ilgili talimatları uyguladıysanız sonraki adım, her ekran bileşenine ViewModel'yi sağlama şeklinizi değiştirmektir. Hilt enjeksiyonunu ve hiltViewModel aracılığıyla Compose ve Navigation ile entegrasyon noktasını sıklıkla kullanabilirsiniz:

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

  8. Tüm findNavController() gezinme çağrılarını navController çağrılarıyla değiştirin ve navController'un tamamını iletmek yerine bunları her bir derlenebilir ekrana gezinme etkinlikleri olarak 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. Ardından, doğrudan hedefteki arka yığın girişinden veya SavedStateHandle.toRoute() kullanılarak bir ViewModel'ten 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 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 işleminde yaygın olarak kullanı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.

Gezerken karmaşık verileri alma

Gezerken karmaşık veri nesneleri iletmemenizi ö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 bilgileri bağımsız değişken olarak iletin. Karmaşık nesneleri veri katmanı 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.

Fragment'leriniz karmaşık nesneleri bağımsız değişken olarak iletiyorsa önce kodunuzu, bu nesnelerin veri katmanında depolanmasına ve alınmasına olanak tanıyacak şekilde yeniden yapılandırmayı düşünün. Örnekler için Now in Android deposuna göz atın.

Sınırlamalar

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

Gezinme Compose'a artımlı taşıma

Şu anda, kodunuzda varış noktası olarak Fragment'leri kullanmaya devam ederken Gezinme Oluşturma'yı 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ı

Navigation 2.7.0-alpha01 sürümünden itibaren, daha önce AnimatedNavHost'te bulunan özel geçişleri ayarlama desteği artık doğrudan NavHost'te 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: Android tasarım ve geliştirmeyle ilgili en iyi uygulamaları izleyen, tamamen Kotlin ve Jetpack Compose ile oluşturulmuş, tam işlevli bir Android uygulaması. Bu uygulamada Navigation Compose da yer alıyor.
  • 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: Jetnews örneğinin Jetpack Compose ve Navigation Compose ile tüm ekranları desteklemek için yeniden yapılandırılmasını ve taşınmasını belgeleyen bir blog yayını.