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:
- Gezinme Yazma bağımlılığı'nı uygulamanıza ekleyin.
Bir
App-level
bileşeni oluşturun ve Görüntüleme düzeninin kurulumunu değiştirerek Oluşturma giriş noktası olarakActivity
'inize ekleyin:class SampleActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // setContentView<ActivitySampleBinding>(this, R.layout.activity_sample) setContent { SampleApp(/* ... */) } } }
Her gezinme hedefi için tür oluşturun. Veri gerektirmeyen hedefler için
data object
, veri gerektiren hedefler içindata class
veyaclass
kullanın.@Serializable data object First @Serializable data class Second(val id: String) @Serializable data object Third
NavController
öğesini, başvuruda bulunması gereken tüm composable'ların erişebildiği bir yerde kurun (bu genellikleApp
composable'ınızın içindedir). Bu yaklaşım, devlet kaldırma ilkelerine uyar veNavController
, 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() // ... }
Uygulamanızın
NavHost
öğesiniApp
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) { // ... } }
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'lerinizdencomposable
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(/* ... */) } // ... } }
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şenineViewModel
'yi sağlama şeklinizi değiştirmektir. Hilt yerleştirmeyi ve entegrasyon noktasını genelliklehiltViewModel
üzerinden Oluşturma ve Gezinme ile kullanabilirsiniz:@Composable fun FirstScreen( // viewModel: FirstViewModel = viewModel(), viewModel: FirstViewModel = hiltViewModel(), onButtonClick: () -> Unit = {}, ) { // ... }
Tüm
findNavController()
gezinme çağrılarınınavController
ile değiştirin ve tümnavController
öğ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 venavController
'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ılarakViewModel
öğ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) } ) } // ... } }
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:
- Bir composable'a gitme
- Bağımsız değişkenlerle gezinme
- Derin bağlantılar
- İç içe yerleştirilmiş gezinme
- Alt gezinme çubuğuyla entegrasyon
- Özel gezinme bileşeniyle entegrasyon
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ı.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Oluştur ile gezinme
- Oluşturma ve diğer kitaplıklar
- Diğer noktalar