Jetpack Compose ile Voyager Kütüphanesi Kullanımı

Jetpack Compose, Android uygulama geliştirme sürecinde oldukça popüler bir UI toolkit’tir. Ancak, uygulama navigasyonu gibi konularda biraz daha destek ve esneklik sağlayan kütüphanelere ihtiyaç duyabilirsiniz. Bu noktada, Voyager kütüphanesi devreye giriyor. Bu yazıda, Voyager kütüphanesinin ne olduğunu, neden kullanıldığını, nasıl kurulduğunu ve nasıl kullanıldığını ele alacağız.

Voyager Kütüphanesi Nedir?

Voyager, Jetpack Compose uygulamalarında sayfa navigasyonunu kolaylaştıran bir kütüphanedir. Sayfalar arası geçişleri, animasyonları ve veri aktarımını basit ve etkili bir şekilde yönetmenizi sağlar. Compose’un sağladığı yerleşik navigasyon çözümlerinin ötesinde, Voyager ile daha esnek ve özelleştirilebilir bir navigasyon deneyimi sunabilirsiniz.

Voyager Kütüphanesi Neden Kullanılır?

Voyager kütüphanesi, Jetpack Compose ile navigasyon işlemlerini yönetmenin daha sade ve anlaşılır bir yolunu sunar. Aşağıda Voyager’in bazı avantajlarını sizler için listeledim:

Basit ve Anlaşılır API: Voyager, navigasyon işlemlerini kolaylaştıran basit bir API sunar. Bu sayede, sayfalar arası geçişler daha az kodla yönetilebilir.

Özelleştirilebilir Geçişler: Voyager, sayfalar arası geçişler için çeşitli animasyon ve geçiş efektleri sağlar. Bu özellik, kullanıcı deneyimini zenginleştirebilir.

Veri Paylaşımı: Sayfalar arasında veri geçişi Voyager ile oldukça basittir. Veriyi, ekranlar arasında kolayca iletebilirsiniz.

Voyager kütüphanesinin çalışmasını aşağıdaki adımlarla birlikte uygulayabiliriz.

1.Adım : Voyager Kütüphanesinin Kurulumu

Voyager kütüphanesini projenize dahil etmek oldukça basittir. build.gradle.kts (Module) dosyanıza aşağıdaki bağımlılığı ekleyin:

dependencies {
    
    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.lifecycle.runtime.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.ui)
    implementation(libs.androidx.ui.graphics)
    implementation(libs.androidx.ui.tooling.preview)
    implementation(libs.androidx.material3)
    testImplementation(libs.junit)
    androidTestImplementation(libs.androidx.junit)
    androidTestImplementation(libs.androidx.espresso.core)
    androidTestImplementation(platform(libs.androidx.compose.bom))
    androidTestImplementation(libs.androidx.ui.test.junit4)
    debugImplementation(libs.androidx.ui.tooling)
    debugImplementation(libs.androidx.ui.test.manifest)

    // Voyager dependencies
    val voyagerVersion = "1.1.0-beta02"
    implementation("cafe.adriel.voyager:voyager-navigator:$voyagerVersion")
    implementation("cafe.adriel.voyager:voyager-transitions:$voyagerVersion")
}

Voyager-navigator: Bu modül, Voyager kütüphanesinin ana navigasyon işlevlerini sağlar. Ekranlar arasında geçiş yapmayı, ekranları yönetmeyi ve navigasyon durumunu kontrol etmeyi sağlar. Temel olarak, ekranlar arası geçişleri yönetmenize ve kullanıcı arayüzünüzde dinamik olarak ekranları değiştirmenize yardımcı olur.

Voyager-transitions: Bu modül, ekranlar arası geçiş animasyonlarını yönetir. Ekranlar arasında geçiş yaparken animasyon ve efektler uygulamanıza olanak tanır. Örneğin, geçişler sırasında “fade” (solma), “slide” (kaydırma) gibi efektleri kullanarak kullanıcı deneyimini zenginleştirebilirsiniz.

Versiyon numarasını, en güncel sürümle güncellemeyi unutmayın. Voyager kütüphanesinin güncel sürümünü sitesinden kontrol edebilirsiniz.

Voyager Kütüphanesinin Kullanımı

Voyager ile navigasyon işlemlerini yönetmek için temel olarak bir Screen sınıfı tanımlamanız ve bu ekranları Navigator kullanarak geçiş yapmanız gerekir. İşte basit bir kullanım örneği:

Bu uygulamada amacımız, butona tıkladığımızda TextField içerisindeki metni diğer sayfaya aktarmaktır.

2.Adım : Ana Ekran (AnaSayfa) Tanımlama

class AnaSayfa: Screen {
    @Composable
    override fun Content() {

        val navigator = LocalNavigator.current

        // TextField'den alınan metni tutmak için durum
        val inputText = rememberSaveable { mutableStateOf("") }

        Column(modifier = Modifier
            .fillMaxSize()
            .background(Color.White),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Kullanıcı girişi için TextField
            OutlinedTextField(
                value = inputText.value,
                onValueChange = { inputText.value = it },
                label = { Text("Metin girin") }
            )
            Button(onClick = {
                // Girilen metni SayfaA'ya ileterek SayfaA'ya geçiş yap
                navigator?.push(SayfaA(inputText.value))
            }) {
                Text(text = "Detay Sayfa")
            }
        }
    }
}

@Preview
@Composable
fun AnaSayfaPrew(){
    AnaSayfa().Content()
}

class AnaSayfa: Screen {
    @Composable
    override fun Content() {

Bu yapı, Screen arayüzünden türetildiği için bir sınıf (class) olarak tanımlanmalıdır. Screen arayüzünü uygulayan tüm bileşenlerin, Content işlevini içerdiğinden emin olmak için sınıf yapısı gereklidir.

Bu satırda AnaSayfa adlı bir sınıf tanımlıyoruz ve bu sınıf Screen sınıfından türetilmiş. Voyager kütüphanesinde, her ekran bir Screen sınıfı tarafından temsil edilir. Bu sınıf, ekranın içeriğini ve navigasyon özelliklerini tanımlamak için bir temel sağlar.

Neden Kullanıyoruz? : Screen sınıfından türemek, Voyager kütüphanesinin ekran yönetimi ve geçiş özelliklerinden yararlanmamıza olanak tanır. Bu, ekranlar arası geçişleri daha kolay ve düzenli bir şekilde yönetmemizi sağlar.

Content Fonksiyonu: Bu ekranın kullanıcıya gösterilecek içeriğini tanımlar. Yani, ekranda görünecek tüm UI bileşenleri burada yer alır.

val navigator = LocalNavigator.current

Burada LocalNavigator.current ifadesini kullanıyoruz ve bu değeri navigator adlı bir değişkende saklıyoruz.

LocalNavigator Nedir?: LocalNavigator, Voyager kütüphanesinin sağladığı bir araçtır ve şu anda geçerli olan ekranın (yani, ekran yığınındaki) navigatörünü temsil eder. Yani, bu navigatör, ekranlar arası geçişleri yönetmek için kullanılır.

Neden Kullanıyoruz?: LocalNavigator.current, ekranlar arasında geçiş yapmak için gerekli olan navigatör nesnesini sağlar. Bu sayede, kullanıcı bir butona tıkladığında veya başka bir olay gerçekleştiğinde, bir ekranı başka bir ekranla değiştirebiliriz.

Button(onClick = {
                // Girilen metni SayfaA'ya ileterek SayfaA'ya geçiş yap
                navigator?.push(SayfaA(inputText.value))
            }) {
                Text(text = "Detay Sayfa")
            }

Son olarak, butona tıklandığında bu satır çalışır. Burada navigator?.push fonksiyonunu kullanıyoruz.

Navigator?.push: Push fonksiyonu, mevcut ekranın üzerine yeni bir ekran ekler. Yani, kullanıcı bir butona tıkladığında, mevcut ekranın (AnaSayfa) üzerine yeni bir ekran (SayfaA) gelir.

Neden Kullanıyoruz?: Kullanıcı, butona tıkladığında SayfaA ekranına geçmek istiyoruz. Bu ekran, inputText değerini alır ve bu değeri yeni ekranda göstermek üzere iletir. navigator?.push(SayfaA(inputText.value)) kodu, SayfaA ekranını ekranda gösterir ve inputText.value değerini bu ekrana geçirir.

3.Adım : Hedef Ekran (SayfaA) Tanımlama

class SayfaA(
    private val inputText: String // Geçilen metni kabul eder
): Screen {
    @Composable
    override fun Content() {
        Column(modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Girilen Metin: $inputText", fontSize = 20.sp) // Geçilen metni gösterir
        }
    }
}

class SayfaA(
    private val inputText: String // Geçilen metni kabul eder
): Screen {

Bu, SayfaA adında bir sınıf tanımlar. Bu sınıf, Voyager kütüphanesinin sağladığı Screen arayüzünü (interface) implement eder.

private val inputText: String: SayfaA sınıfı, bir inputText özelliğine sahiptir. Bu özellik, ekran oluşturulurken bu ekrana gönderilen bir metin değerini saklar. private olarak tanımlandığı için, bu özellik sadece SayfaA sınıfı içinde erişilebilir.

Text(text = "Girilen Metin: $inputText", fontSize = 20.sp) // Geçilen metni gösterir

Bu metin, kullanıcı tarafından AnaSayfa ekranında girilen metni içerir. inputText değişkeni, SayfaA ekranına geçiş yapılırken AnaSayfa ekranından gönderilmiştir. Bu metin, SayfaA ekranında kullanıcıya gösterilir.

4.Adım : Navigator Kullanımı

MainActivity içinde Voyager’i kullanarak ekran geçişlerini ayarlayın:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            VoyagerKullanimiTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Navigator(screen = AnaSayfa()) {
                        FadeTransition(navigator = it)
                    }
                 }
             }
        }
    }
}

Navigator(screen = AnaSayfa()) {
                        FadeTransition(navigator = it)

Burada, Navigator bileşenine başlangıç ekranı olarak AnaSayfa sınıfından bir örnek verilir. AnaSayfa, uygulamanızın ilk gösterilecek ekranıdır. AnaSayfa ekranı, kullanıcıya ilk olarak gösterilen ekranı temsil eder.

Sonuç :

Jetpack Compose ve Voyager kütüphanesi, modern Android uygulamalarında navigasyonu yönetmek için güçlü araçlardır. Voyager’in basit API’si, özelleştirilebilir geçiş efektleri ve veri paylaşımı özellikleri, kullanıcı deneyimini geliştirir ve geliştirme sürecini kolaylaştırır. Kurulumu ve kullanımı oldukça basit olan Voyager ile, uygulama navigasyonunuzu daha verimli ve esnek bir şekilde yönetebilirsiniz.

Voyager kütüphanesini projelerinizde kullanarak, uygulama navigasyonunu daha etkili ve kullanıcı dostu hale getirebilirsiniz.

Projenin kaynak kodlarına Github adresinden ulaşabilirsiniz.

GitHub : https://github.com/mervebaris/VoyagerKullanimi

“ Bugün içinde bulunduğunuz mücadele, yarın ihtiyacınız olan gücü geliştiriyor. (Robert Tew) ”

İyi çalışmalar.