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ştur'a 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 belgelerine göz atı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 izliyor veya başka bir yaklaşım benimsiyor olsanız da tüm gezinme hedeflerinin ekran bileşenleri olduğu bir noktaya ulaşırsınız. Bu noktada, Fragment'ler yalnızca bileşen kapsayıcıları 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ş 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:
- Uygulamanıza Gezinme Compose bağımlılığını ekleyin.
Bir
App-level
bileşeni oluşturun ve Görüntüleme düzeninin ayarlarını değiştirerek Oluştur 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, referans vermesi gereken tüm bileşenlerin erişebileceği bir yerde ayarlayın (bu genellikleApp
bileşeninizin içindedir). Bu yaklaşım, durum kaldırma ilkelerini takip eder ve derlenebilir ekranlar arasında gezinmek ve arka yığını korumak içinNavController
'yi gerçek kaynak olarak kullanmanıza olanak tanır:@Composable fun SampleApp() { val navController = rememberNavController() // ... }
App
bileşeninde uygulamanızınNavHost
öğesini oluşturun venavController
öğesini iletin:@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 iletileceğiyle ilgili talimatları uyguladıysanız sonraki adım, her ekran bileşenineViewModel
'yi sağlama şeklinizi değiştirmektir. Hilt enjeksiyonunu vehiltViewModel
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 = {}, ) { // ... }
Tüm
findNavController()
gezinme çağrılarınınavController
çağrılarıyla değiştirin venavController
'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 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. Ardından, doğrudan hedefteki arka yığın girişinden veya
SavedStateHandle.toRoute()
kullanılarak birViewModel
'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) } ) } // ... } }
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:
- Bir bileşene gitme
- Bağımsız değişkenlerle gezinme
- Derin bağlantılar
- İç içe yerleştirilmiş gezinme
- Alt gezinme çubuğuyla entegrasyon
- Özel bir 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
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ı.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Oluştur ile gezinme
- Oluşturma ve diğer kitaplıklar
- Dikkat edilmesi gereken diğer noktalar