Jetpack Compose Navigation: Güvenli Veri Transferi ve Ekranlar Arası Geçiş

Bu makalede, Jetpack Compose Navigation kütüphanesi ile ekranlar arası veri transferini ve geçişleri nasıl yönetebileceğimizi öğreneceğiz. Aynı zamanda Navigation kütüphanesine gelen son güncelleme ile beraber veri transferini daha güvenli ve daha sade hale getireceğiz.

Android Jetpack Compose: Yeni Nesil Kullanıcı Arayüzleri Oluşturmak

Mobil uygulama geliştirmede, Android platformu her geçen gün daha da popüler hale geliyor. Bu popülerlikle birlikte, geliştiricilerin daha hızlı, daha kolay ve daha modern kullanıcı arayüzleri (UI) tasarlamalarına olanak tanıyan yeni araçlara olan ihtiyaç da artıyor. İşte tam da bu noktada Jetpack Compose devreye giriyor.

Jetpack nedir? Compose ne demek? 

Compose, bir şeyi sıfırdan oluşturma veya mevcut bileşenleri bir araya getirerek yeni bir şey üretme anlamına gelir. Jetpack Compose'u LEGO'ya benzetebiliriz. Tıpkı LEGO parçalarını birbirine ekleyerek oyuncaklar yaptığımız gibi, Jetpack Compose ile de parçaları (metin, resimler, düğmeler vb.) birleştirerek istediğimiz sayfaları oluşturabiliriz. Bu sayede, daha az kod yazarak daha hızlı ve kolay bir şekilde modern ve etkileyici sayfalar tasarlayabiliriz.

Adım 1: Gerekli Kütüphaneleri Eklemek:

Öncelikle projemize navigation ve serialization kütüphanelerini entegre etmemiz gerekiyor.

"build.gradle.kts" (Module:app) dosyamıza aşağıda ki eklemeleri yapıyoruz. Projede kullandığımız kotlin versiyonuna göre serialization sürümünü de aynı yapıyoruz. 1.9.0 sürümünü kullandığınızı varsayarak serialization kütüphane sürümünü de 1.9.0 yapıyorum.

plugins {
kotlin("plugin.serialization") version “1.9.0”
}
dependencies {
implementation("androidx.navigation:navigation-compose:2.8.0-beta01")
implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.6.3")
}

Adım 2: Veri Sınıflarını Tanımlamak:

Uygulamamızda veri sınıflarını tanımlamak için @Serializable etiketini kullanıyoruz. Bu etiket, sınıfların seri hale getirilmesini sağlar ve bu sayede ekranlar arasında veri transferi mümkün olur.

• Veri almayan ekranlar: Bu tür ekranları object olarak tanımlıyoruz.
• Veri alan ekranlar: Bu tür ekranları data class olarak tanımlıyoruz.

Aşağıda, ScreenA ve ScreenB ekranlarının nasıl tanımlandığını görebilirsiniz:

import kotlinx.serialization.Serializable

@Serializable
object ScreenA

@Serializable
data class ScreenB(

val name: String,
val age: Int

)

• ScreenA sınıfını, başka bir sayfadan herhangi bir veri almadığı için object olarak tanımladık.
• ScreenB sınıfını, başka sayfalardan name ve age parametrelerini aldığı için data class olarak tanımladık.

Adım 3: Nav Controller Oluşturmak:

Nav Controller, uygulamamızın gezinme yapısının temel yapılarından biridir.

Bu yapı, uygulamamızdaki ekranlar arasında geçişleri yönetir ve ekranlar arasındaki yolları belirleyen gezinme grafiğini tutar.

val navController = rememberNavController()

Adım 4: NavHost Oluşturmak:

Şimdi, gezinme grafiğimizi oluşturalım. Bunun için bir NavHost oluşturacağız.

Öncelikle, navController yapımızı NavHost içine entegre ediyoruz. Daha sonra, uygulama ilk açıldığında gösterilecek ekranı belirlemek için startDestination parametresini kullanıyoruz. Burada, startDestination olarak ScreenA olarak tanımladığımız ekranı bildiriyoruz.

NavHost(

navController = navController,
startDestination = ScreenA

) {

// Buraya ekranlar eklenir

}

Adım 5: Nav Host'a Ekranları Tanımlamak:

Bir önceki adımda Nav Host'u oluşturduk. Şimdi, Nav Host'a SayfaA ve SayfaB ekranlarımızı tanımlayarak uygulamamızın gezinme yapısını tamamlayalım.

Nav Host'un içinde, uygulamamızın içeriğini tanımlayan composable fonksiyonlarını kullanarak her ekranı belirtiyoruz. Her bir composable fonksiyonu, bir ekran ve bu ekrana yönlendirme parametreleri alır. Aşağıdaki kod, SayfaA ve SayfaB ekranlarını Nav Host'a nasıl tanımlayacağımızı gösterir:

NavHost(

navController = navController,
startDestination = ScreenA

) {

// SayfaA'yı tanımlıyoruz
composable<ScreenA> {
SayfaA(navController = navController)

}
// SayfaB'yi tanımlıyoruz ve args parametresi ile veri gönderiyoruz
composable<ScreenB> {

val args = it.toRoute<ScreenB>()
SayfaB(navController, args.name, args.age)

}
}

Bu kodda:

• ScreenA: Bu composable, SayfaA ekranını temsil eder. SayfaA ekranımıza navController parametresini gönderiyoruz.
• ScreenB: Bu composable, SayfaB ekranını temsil eder. Ayrıca, it.toRoute<ScreenB>() fonksiyonu ile bu sayfaya geçiş yaparken gönderilen argümanları(verileri) alıyoruz ve SayfaB ekranımıza navController, name ve age parametrelerini gönderiyoruz.

Adım 6: SayfaA Ekranının Tasarlanması:

SayfaA ekranında, kullanıcıyı SayfaB ekranına yönlendiren bir düğme bulunur:

@Composable
fun SayfaA(navController: NavController) {
Column(

modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally

) {
Button(onClick = {

//Butona tıklandığı zaman yapılacak işlem
navController.navigate(ScreenB("ihsan",23))

}) {

Text(text = "Go to screen B")

}
}
}

Bu kod bloğu, SayfaA ekranında yer alan bir düğmeyi tanımlar. Düğmeye tıklandığında, kullanıcıyı SayfaB ekranına yönlendirir. Düğmenin içeriği "Go to screen B" metni ile belirtilmiştir.

Düğmeye tıklandığında çalışacak olan işlem ise aşağıdaki kod satırıyla gerçekleştirilir:

navController.navigate(ScreenB("ihsan", 23))

Bu kod, mevcut sayfadan, ScreenB olarak tanımlanmış olan sayfaya geçiş yapmamızı sağlar.

Burada dikkat edilmesi gereken nokta, ScreenB("ihsan",23) ifadesidir. Hatırlarsanız, ScreenB sayfasını bir data class olarak tanımlamıştık ve bu sınıfın name ve age adında iki parametre alacağını belirtmiştik.

Adım 7: SayfaB Ekranının Tasarlanması:

Şimdi, "SayfaB" ekranını oluşturacağız ve bu ekranı kullanarak gönderilen verileri göstereceğiz.

@Composable
fun SayfaB(name: String, age: Int) {
Column(

modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally

) {

Text(text = "Name: ${name}")
Text(text = "Age: ${age} years old")

}
}

Yukarıdaki kodda, "SayfaB" adında bir Composable fonksiyon oluşturduk. Bu fonksiyon, ekranda kullanıcı adını ve yaşını gösterir.

Bu makalede, temel adımlardan başlayarak, veri sınıflarının tanımlanması, Nav Controller ve Nav Host oluşturulması, ve ekranların birbirine nasıl veri aktararak geçiş yapabileceği üzerinde durduk. SayfaA'dan SayfaB'ye geçişte, veri transferinin nasıl gerçekleştiğini ve bu verilerin SayfaB'de nasıl kullanıldığını gördük.

Umarım bu makale, Jetpack Compose Navigation kütüphanesini kullanarak ekranlar arası veri transferi ve geçişleri yönetme konusunda size yardımcı olmuştur. Ben İhsan Arslan, herkese iyi çalışmalar!