composable(): NavHost ve Jetpack Compose'da yönlendirme

NavHost'te composable() nedir

composable(), NavHost nesnesinin bir genişletme fonksiyonudur. Kotlin DSL, uygulamanın tüm ekranlarını bildirimsel olarak tanımlamak için NavHost bloğu içinde çağrılmasına izin verir. Her çağrı, navigasyon grafiğinde bir girdi oluşturarak bir dize rotasını composable fonksiyonuna bağlar. Bir kullanıcı belirli bir rotaya gittiğinde, NavHost önceki ekranı gizleyerek ilgili composable'ı geçerli ekran olarak görüntüler.

Navigation Compose kütüphanesi, Google tarafından 2021 yılında Jetpack Compose için Fragment tabanlı navigasyona alternatif olarak tanıtıldı. Ana avantajı, Compose paradigmasıyla tam uyumluluktur: composable(), FragmentManager veya işlemlere gerek kalmadan diğer Compose bileşenleriyle aynı yaşam döngüsünde çalışır. Bu, Fragment ve Compose yaşam döngüsü uyumsuzluğuyla ilgili bir hata sınıfını ortadan kaldırır.

Her composable(), bir dize rotası ve bir NavBackStackEntry nesnesi alıp Composable UI döndüren bir lambda fonksiyonu alır. Lambda içinde, kapsamdan navController aracılığıyla NavController'a erişilebilir ve diğer ekranlara navigasyon sağlanır. Bu mimari, navigasyonu açık ve öngörülebilir hale getirir.

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") {
            HomeScreen(
                onNavigateToProfile = {
                    navController.navigate("profile")
                }
            )
        }
        composable("profile") {
            ProfileScreen(
                onBack = { navController.popBackStack() }
            )
        }
    }
}

composable() nasıl çalışır: anahtarlar ve parametreler

composable() çağrılarının her biri, NavHost'un iç grafiğinde benzersiz bir rota tanımlayıcısına sahip bir köşe oluşturur. NavController navigate() işlemini yürüttüğünde, kütüphane istenen rotayı kayıtlı tüm composable köşelerle karşılaştırır ve bir eşleşme bulur. Eşleşmeden sonra bir NavBackStackEntry oluşturulur, navigasyon yığınına yerleştirilir ve UI kompozisyonu başlar.

composable()'ın dahili uygulaması bir geç başlatma mekanizması kullanır: ekran kompozisyonu yalnızca o rotaya ilk navigasyonda gerçekleşir. Bu, kullanıcının hiç gitmediği ekranların bellek kaplamadığı ve hiçbir kod çalıştırmadığı anlamına gelir. Bu yaklaşım, çok sayıda ekrana sahip uygulamalarda performansı önemli ölçüde artırır.

composable() içindeki key parametresi, ekranın yeniden oluşturulmasını yönetmeye olanak tanır. Varsayılan olarak, aynı rotaya tekrar tekrar gidildiğinde composable yeniden oluşturulmaz — NavHost mevcut geri yığın girdisini kullanır. Ancak, bir key iletilir ve değişirse, NavHost composable fonksiyonunun yeni bir örneğini oluşturur. Bu, yeniden açıldığında durumu zorla güncellemeniz gereken dinamik verilere sahip ekranlar için kullanışlıdır.

val NavGraphBuilder.Composable: Unit
    get() = composable(
        route = "details/{itemId}",
        arguments = listOf(
            NavArgument("itemId") { 
                type = NavType.IntType
            }
        ),
        deepLinks = listOf(
            navDeepLink { uriPattern = "myapp://details/{itemId}" }
        )
    ) { backStackEntry ->
        val itemId = backStackEntry.arguments?.getInt("itemId") ?: 0
        DetailsScreen(itemId = itemId)
    }

composable() aracılığıyla argüman aktarma

composable(), arguments parametresi aracılığıyla esnek bir argüman sistemini destekler. Her argüman, türü, varsayılan değeri ve zorunluluğu tanımlayan bir NavArgument nesnesiyle tanımlanır. Argümanlar, rota içinde yol parametreleri (süslü parantezler aracılığıyla) veya sorgu parametreleri (soru işareti aracılığıyla) olarak iletilir.

Yol parametreleri doğrudan rota şablonunda belirtilir: "profile/{userId}". "profile/42"ye gidildiğinde, NavHost otomatik olarak 42 değerini çıkarır ve backStackEntry.arguments aracılığıyla erişilebilir hale getirir. Sorgu parametreleri soru işaretinden sonra eklenir: "search?query={text}" ve kütüphane tarafından otomatik olarak ayrıştırılır.

Argümanları çıkarırken, parametrenin zorunluluğunu NavType.isNullableAllowed aracılığıyla kontrol etmek ve NavArgument defaultValue aracılığıyla varsayılan değerler sağlamak önemlidir. Zorunlu bir parametre eksikse, Navigation Compose bir IllegalArgumentException fırlatarak yanlış rotalarla ilgili ince hataları önler.

Karmaşık nesneleri aktarmak için NavType.ParcelableType veya NavType.SerializableType kullanılması önerilir. Ancak Google, aktarılan verilerin boyutunun en aza indirilmesini tavsiye eder — bir tanımlayıcı iletmek ve nesneyi ekran içinde kimliğe göre yüklemek daha iyidir. Bu, büyük serileştirilmiş verilerle ilgili sorunları önler ve yapılandırma değişikliklerinin işlenmesini basitleştirir.

data class Profile(val id: Int, val name: String) : Parcelable

            // Minimum veriyle gezin
navController.navigate("profile/42")

            // Ekrandaki argümanları al
composable(
    route = "profile/{userId}",
    arguments = listOf(
        NavArgument("userId") { type = NavType.IntType }
    )
) { backStackEntry ->
    val userId = backStackEntry.arguments?.getInt("userId") ?: 0
    ProfileDetailScreen(userId = userId)
}

composable() ile iç içe navigasyon

Gerçek uygulamalarda, genellikle iç içe navigasyon grafikleri düzenlemek gerekir — örneğin, bir BottomNavigation sekmesi içinde ayrı bir ekran yığını. composable(), iç içe NavHost'lar aracılığıyla yerleştirmeyi destekler: bir composable ekranı içinde, bağımsız bir rota yığınına sahip kendi NavHost'unuzu bildirebilirsiniz.

Her iç içe NavHost, kendi NavController ve geri yığınına sahiptir. Bu, bir sekme içindeki navigasyonun diğer sekmelerdeki navigasyonu etkilemediği anlamına gelir — kullanıcı, her birinin içindeki gezinme geçmişini kaybetmeden sekmeler arasında özgürce geçiş yapabilir. Bu mimariye Scoped Navigation denir ve Google tarafından karmaşık çok düzeyli navigasyona sahip uygulamalar için önerilir.

İç içe navigasyon uygulanırken, NavController durumunun doğru yönetilmesi önemlidir: her iç içe NavHost, composable fonksiyonunun kapsamı içinde kendi rememberNavController'ını saklamalıdır. Android Developer Summit 2024'e göre, üç veya daha fazla sekmeye sahip Jetpack Compose uygulamalarının %40'ından fazlası, modüller arasındaki navigasyonu yalıtmak için iç içe NavHost mimarisini kullanır.

// Sekmeli ana NavHost
composable("tabs") {
    MainTabsScreen { tab ->
        when (tab) {
            Tab.Home -> HomeNavGraph()
            Tab.Search -> SearchNavGraph()
        }
    }
}

// Ana Sayfa sekmesi içinde iç içe grafik
@Composable
fun HomeNavGraph() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "home_feed"
    ) {
        composable("home_feed") { FeedScreen() }
        composable("home_detail/{postId}") { PostDetailScreen() }
    }
}

composable() vs Intent navigasyonu

Jetpack Compose'dan önce, Android'de standart navigasyon yöntemi Intent ve FragmentManager kullanıyordu. Intent, yeni bir Activity başlatan bir sistem mesajıdır ve tüm View ağacının yeniden oluşturulması anlamına gelir. Buna karşılık, composable() tek bir Activity içinde çalışır ve Compose ağacının yalnızca bir bölümünü değiştirir, bu da önemli ölçüde daha hızlı ve bellek açısından daha verimlidir.

composable() ile Intent tabanlı navigasyon arasındaki temel farklar:

• Hız — composable(), Activity'yi yeniden oluşturmadan milisaniyeler içinde ekran değiştirir; Intent, Activity'nin yeniden başlatılmasını gerektirir.
• Animasyonlar — Navigation Compose'da geçiş animasyonları, overridePendingTransition gerektirmeden AnimatedNavHost aracılığıyla bildirimsel olarak tanımlanır.
• Paylaşılan durum — composable(), Intent extras olmadan ekranlar arasında veri aktarımını basitleştiren paylaşılan bir ViewModel kapsamında çalışır.

Intent'ten composable()'a geçiş, yalnızca bir API değişimi değil, mimari paradigma değişikliğidir. Hangi Activity'nin açılması gerektiğini açıkça belirtmek yerine, geliştirici tüm olası rotaları tek bir yerde bildirimsel olarak tanımlar, bu da kod okunabilirliğini artırır ve navigasyon testini basitleştirir. Google I/O 2024'e göre, Navigation Compose ile Jetpack Compose, FragmentManager'a kıyasla navigasyon kodunu %40–60 oranında azaltır.

composable() ile sık yapılan hatalar

En sık yapılan hatalardan biri, yeniden oluşturma sırasında NavController'ın yeniden oluşturulmasıdır. NavController, durum değişikliğinde yeniden oluşturulabilen üst composable düzeyinde rememberNavController() aracılığıyla oluşturulursa, navigasyon bozulur — geçmiş kaybolur. Doğru çözüm, NavController'ı kararlı bir composable düzeyine (Activity düzeyi veya uygulamanın kök composable'ı gibi) yükseltmektir.

İkinci yaygın sorun, navigasyon sırasında sonsuz yeniden oluşturmadır. Bu, navController.navigate() doğrudan bir composable fonksiyonunun gövdesine yerleştirildiğinde olur. Navigasyon NavHost'un durumunu değiştirdiğinden, yeniden oluşturmayı tetikler ve bu da tekrar navigate() çağrısına yol açarak bir döngü oluşturur. Tüm navigasyon çağrıları, lambda işleyicilerine (onClick, onButtonPressed) sarılmalı, oluşturma sırasında yürütülmemelidir.

Üçüncü hata, BottomNavigation kullanırken yanlış geri yığını işlemedir. Her sekme değişiminde navigate() aracılığıyla basit navigasyon, mevcut olana dönmek yerine yığına yeni bir giriş ekler. BottomNavigation için restoreState = true ve launchSingleTop = true ile navController.navigate() kullanmalısınız, bu da sekme değiştirirken durumun doğru şekilde geri yüklenmesini sağlar.

fun NavController.navigateToTab(route: String) {
    navigate(route) {
        popUpTo(navController.graph.findStartDestination().id) {
            saveState = true
        }
        launchSingleTop = true
        restoreState = true
    }
}