Jetpack Compose Basic Navigation
Modern Android uygulamalarında akıcı ve etkili kullanıcı deneyimi sağlamak için navigasyon kritik bir rol oynar. Jetpack Compose: Navigasyon Rehberi yazımızda, Jetpack Compose kullanarak uygulamanızda sorunsuz bir navigasyon yapısını nasıl kurabileceğinizi adım adım anlatıyoruz.
Bu rehber, NavController'dan NavHost'a, Deep Links'ten Argüman yönetimine kadar her şeyi kapsıyor. Başlangıç seviyesinden ileri düzeye kadar, bu rehber Jetpack Compose' da navigasyonun temellerini anlamanıza ve uygulamanıza entegre etmenize yardımcı olacak.
Kurulum
Bu bölümde, Jetpack Compose’ da navigasyon işlemlerinin nasıl kurulacağını adım adım anlatacağız. İlk olarak, projenizin build.gradle(app) dosyasına gerekli bağımlılıkların nasıl ekleneceğini göstereceğiz. Bu, uygulamanızın Jetpack Compose navigasyon özelliklerini kullanabilmesi için gerekli temeli oluşturur.
dependencies {
val nav_version = "2.7.5"
implementation("androidx.navigation:navigation-compose:$nav_version")
}Temel Kavramlar
Bu bölüm, Jetpack Compose’ da navigasyon sürecinin temel taşlarını anlatarak, bu kavramların nasıl bir arada çalıştığını ve uygulamanızın kullanıcı deneyimini nasıl dönüştürebileceğini ele alacağız.
NavController
NavController, Jetpack Compose’da navigasyonun merkezidir. Uygulamanızın farklı ekranları arasında geçişi yönetir ve kullanıcıların nerede olduğunu takip eder. Bu bölümde, NavController’ın nasıl oluşturulduğunu, kullanıldığını ve uygulamanızın yapısındaki rolünü detaylandıracağız. Özellikle state yönetimi ve geri yığın kontrolü gibi önemli konulara odaklanacağız.
NavHost
NavHost, NavController ile entegre olan ve navigasyon grafiğini (NavGraph) tanımlayan bir composable’dır. NavHost’un nasıl yapılandırılacağını, composable hedefler arasında nasıl bir köprü görevi gördüğünü ve dinamik içerik yönetimi ile arayüz güncellemelerine katkılarını açıklayacağız.
Navigation Graph — NavGraph
Navigation graph, uygulamanızdaki gezinme yollarını ve hedeflerini belirler. Navigasyon grafiğinin nasıl oluşturulacağını, yönetileceğini ve rota tanımları ile hedefler arası geçişlerin nasıl optimize edileceğini inceleyeceğiz.
Argümanlar — Args
Argümanlar, composable’lar arasındaki veri aktarımında kritik bir role sahiptir. Bu bölümde, argümanların nasıl tanımlandığını, iletilip alındığını ele alacağız. Argümanların doğru kullanımıyla, uygulamanızın daha işlevsel olabileceğini açıklayacağız.
Deep Links
Deep links, uygulamanızın erişilebilirliğini ve kullanıcı dostu olmasını artırır. Bu bölümde, deep links’in Jetpack Compose içinde nasıl oluşturulacağını ve işlevselliğini detaylandıracağız. Özellikle, uygulama dışı etkileşimler ve kullanıcı deneyimi üzerindeki etkilerine odaklanacağız.
NavHost Oluşturma
NavHost, Jetpack Compose’da navigasyonun temel taşlarından biridir ve uygulamanızın navigasyon grafiğini temsil eder.
NavHost, NavController ile eşleşir ve uygulamanızın farklı ekranları arasında bir geçiş sağlamak için navigasyon rotalarını tanımlar.
1 — NavHost Composable Oluşturma: Öncelikle, uygulamanızın ana composable yapısında bir NavHost composable oluşturmalısınız.
2 — NavController ile Bağlantı: NavHost, NavController ile ilişkilendirilir. Bu, NavController’ın navigasyon durumunu ve geçmişini, NavHost içinde tanımlanan rotalarla senkronize eder.
3 — Navigasyon Grafiğini Tanımlama: NavHost içinde, navigasyon grafiğinizi (NavGraph) tanımlarsınız. Bu grafik, kullanıcıların uygulama içinde gezinebileceği tüm hedefleri ve rotaları içerir.
Bu kod, Jetpack Compose’da NavHost’un nasıl oluşturulacağını ve kullanılacağını gösteren basit bir örnektir. İlk olarak rememberNavController kullanarak bir NavHostController oluşturulur. Bu, navigasyon durumunu ve geçmişini yönetir. Ardından NavHost composable'ı tanımlanır; burada navController atanır ve başlangıç hedefi olarak "home" belirlenir. NavHost içinde, composable fonksiyonları kullanılarak navigasyon grafiği oluşturulur. "home" ve "detail" adında iki rota tanımlanmıştır ve her biri, ilgili ekranları (HomeScreen ve DetailScreen) ve navController'ı içerir. Bu yapı, kullanıcıların "home" ve "detail" ekranları arasında geçiş yapmasını sağlar.
Sayfalar Arası Veri Gönderimi: Argümanlar — Args
Jetpack Compose, sayfalar arası veri gönderimi için argümanları kullanmanıza olanak tanır. Bu, kullanıcıların uygulamanız içinde gezinirken ihtiyaç duydukları bilgileri farklı ekranlar arasında aktarmanızı sağlar. Argümanlar, rotalara eklenebilen ve composable’ lara veri taşıyan dinamik parametrelerdir.
Önceki örnekte, HomeScreen’de rastgele bir ID üreterek bunu DetailScreen’e göndermeyi deneyelim.
1 — Argüman Parametrelerinin Eklenmesi: Argümanları kullanmak için, rotanıza argüman parametresi eklemeniz gerekir. Örneğin, DetailScreen’ e ID parametresi ile gitmek istiyoruz, kodumuzu şu şekilde düzenleyelim:
composable("detail/{id}") {
DetailScreen(navController = navController)
}2 — Argümanların Tanımlanması: composable() fonksiyonunda arguments parametresi, NamedNavArgument listesini kabul eder. Bu, argümanların tipini belirlemenize olanak tanır.Örneğin, navArgument("id") { type = NavType.StringType } şeklinde bir argüman tanımlayabilirsiniz. Argümanlar, NavBackStackEntry üzerinden çekilir ve composable içinde kullanılabilir. Kodumuzu şu şekilde düzenleyelim:
composable(
"detail/{id}",
arguments = listOf(
navArgument("id") {
type = NavType.StringType
}
)
) {
DetailScreen(navController = navController)
}3 — Argümanların Gönderilmesi ve Alınması: Bir hedefe argüman göndermek için, navController.navigate("detail/abc123") gibi bir çağrı yapmanız gerekir. Bu, kullanıcıyı ID'si abc123 olan detay sayfasına yönlendirir. Kodumuzu şu şekilde düzenleyelim:
4 — Kompleks Veri Aktarımından Kaçınma: Navigasyon sırasında kompleks veri objelerini aktarmaktan kaçınmak önemlidir. Bunun yerine, benzersiz bir tanımlayıcı veya ID gibi minimum gerekli bilgileri argüman olarak kullanmanız tavsiye edilir.
Full Code:
Jetpack Compose’da Deep Links
Jetpack Compose, uygulamanıza deep links eklemenizi destekler. Bu özellik, belirli bir URL, action veya MIME tipini doğrudan bir composable ile ilişkilendirmenize olanak tanır. Bu bölümde, Jetpack Compose içinde nasıl deep link oluşturulacağını ve bunların uygulamanızın navigasyon yapısına nasıl entegre edileceğini ele alacağız.
1 — Deep Link Tanımlama: composable() fonksiyonu içinde deepLinks parametresi kullanılarak deep link tanımlanabilir. Bu parametre, navDeepLink metodu ile oluşturulan NavDeepLink nesnelerinin bir listesini kabul eder.
val uri = "https://www.example.com"
...
composable(
"profile?id={id}",
deepLinks = listOf(navDeepLink { uriPattern = "$uri/{id}" })
) { backStackEntry ->
val id: String = backStackEntry.arguments?.getString("id") ?: ""
ProfileScreen(navController, id)
}2 — AndroidManifest Entegrasyonu: Bu deep linkler varsayılan olarak dış uygulamalara açık değildir. Deep linkleri dışarıdan erişilebilir hale getirmek için, uygulamanızın manifest.xml dosyasına uygun <intent-filter> elementleri eklemeniz gerekir. Bu, deep link tetiklendiğinde, Navigation'ın otomatik olarak ilgili composable'a yönlendirmesini sağlar.
// Manifest Dosyasında Deep Link Ayarı
<activity …>
<intent-filter>
...
<data android:scheme="https" android:host="www.example.com" />
</intent-filter>
</activity>DeepLink hakkında daha fazlası için aşağıdaki bağlantıyı ziyaret edebilirsiniz:
Bana Ulaşın
Aşağıdaki bağlantılardan bana ulaşabilirsiniz.
Kerim Bora
Mobile Application Developer at Appcent
Web https://kerimbr.com
Mail dev.kerimbora@gmail.com
LinkedIn https://www.linkedin.com/in/devkerimbr
Github https://github.com/kerimbr
Medium https://dev-kerimbora.medium.com
