Oluşturma'da tahmin edilen geri gitme

Hareketle gezinme özelliği olan tahmini geri, kullanıcıların geri kaydırdığında nereye gideceklerini önizlemelerine olanak tanır. Tahmini geri, uygulamanızın gezinme deneyimini iyileştirmek için Oluştur ile sorunsuz bir şekilde entegre olur. Kullanıcılar, uygulamanızda geri gezinirken daha sorunsuz ve sezgisel geçişlerden yararlanır. Şekil 1'de bunun SociaLite örnek uygulamasında nasıl çalıştığı gösterilmektedir.

Şekil 1. SociaLite örnek uygulamasındaki ana ekrana dönme animasyonu.

Bu kılavuzda, tahmine dayalı geri ödeme ile aşağıdakilerin nasıl yapılacağı açıklanmaktadır:

  • Tahmini geri gitme hareketini etkinleştirme
  • Varsayılan sistem animasyonlarını etkinleştirme
  • Gezinme Oluşturma ile tahmini geri hareketi etkinleştirme
  • Paylaşılan öğe geçişleriyle entegrasyon
  • Material Compose bileşenleriyle tahmini geri desteği
  • PredictiveBackHandler ile ilerleme durumuna manuel olarak erişme
  • Tahmine dayalı geri hareketi animasyonunu test etme

Tahmini geri gitme hareketini etkinleştirme

Tahmine dayalı geri hareketi animasyonları özelliğini etkinleştirmek için tahmine dayalı geri hareketi desteklemeyi etkinleştirmeniz gerekir. Özelliği etkinleştirmek için AndroidManifest.xml dosyanızdaki <application> etiketine veya tek tek <activity> etiketlerine android:enableOnBackInvokedCallback="true" ekleyin.

Varsayılan sistem animasyonlarını etkinleştirme

Ana sayfaya geri gitme, etkinlik ve görevler arasında geçiş yapıp geri gitme sistem animasyonları, desteklenen geri işleme API'lerine taşınan uygulamalarda Android 15 ve sonraki sürümleri çalıştıran cihazlarda kullanılabilir.

  • Ana ekrana dön: Kullanıcıyı ana ekrana döndürür.
  • Etkinlikler arası: Uygulamadaki etkinlikler arasında geçişler.
  • Görevler arası: Görevler arasında geçişler.

Bu animasyonlar Android 15 ve sonraki sürümlerde varsayılan olarak etkindir. Android 13 veya 14 çalıştıran cihazlarda kullanıcılar bu özellikleri Geliştirici seçenekleri üzerinden etkinleştirebilir.

Sistem animasyonları için AndroidX Activity bağımlılığınızı 1.6.0 veya daha yeni bir sürüme güncelleyin.

Gezinme Oluşturma ile tahmini geri hareketi etkinleştirme

Gezinme Oluştur'da tahmini geri özelliğini kullanmak için navigation-compose 2.8.0 veya daha yeni bir kitaplık kullandığınızdan emin olun.

Gezinme Oluşturma, kullanıcı geri kaydırdığında ekranlar arasında otomatik olarak geçiş yapar:

Şekil 2. SociaLite'teki varsayılan uygulama içi geçiş animasyonu.

Gezerken popEnterTransition ve popExitTransition ile özel geçişler oluşturabilirsiniz. Bu değiştiriciler, NavHost'ünüze uygulandığında giriş ve çıkış ekranlarının nasıl animasyonlu olacağını tanımlamanıza olanak tanır. Bu araçları kullanarak ölçeklendirme, solma veya kaydırma gibi çeşitli efektler oluşturabilirsiniz.

Bu örnekte, kullanıcı geri giderken çıkış ekranını küçültmek için popExitTransition içinde scaleOut kullanılır. Ayrıca transformOrigin parametresi, ölçeklendirme animasyonunun gerçekleştiği noktayı belirler. Varsayılan olarak ekranın ortasındadır (0.5f, 0.5f). Ölçeklemenin farklı bir noktadan başlaması için bu değeri ayarlayabilirsiniz.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)

Bu kod aşağıdaki sonucu verir:

Şekil 3. SociaLite'te özel bir uygulama içi animasyon.

popEnterTransition ve popExitTransition, özellikle arka yığının açıldığı durumlarda (ör. geri hareketi ile) animasyonları kontrol eder. enterTransition ve exitTransition'yi yalnızca tahmini geri düğmesi için değil, genel olarak bileşimlere girme ve bileşimlerden çıkma animasyonları tanımlamak için de kullanabilirsiniz. Yalnızca enterTransition ve exitTransition'ü ayarlarsanız bunlar hem normal gezinme hem de geri yığınını göstermek için kullanılır. Ancak popEnterTransition ve popExitTransition'ü kullanmak, geri gezinme için farklı animasyonlar oluşturmanıza olanak tanır.

Paylaşılan öğe geçişleriyle entegrasyon

Paylaşılan öğe geçişleri, genellikle gezinme için kullanılan ortak içerikli bileşenler arasında sorunsuz bir görsel bağlantı sağlar.

Şekil 4. Gezinme Oluştur'da tahmini geri ile paylaşılan öğe geçişi

Gezinme Oluştur ile paylaşılan öğeleri kullanmak için Paylaşılan öğelerle tahmini geri alma başlıklı makaleyi inceleyin.

Material Compose bileşenleriyle tahmini geri desteği

Material Compose kitaplığındaki birçok bileşen, tahmini geri hareketleriyle sorunsuz bir şekilde çalışacak şekilde tasarlanmıştır. Bu bileşenlerde tahmini geri animasyonlarını etkinleştirmek için projenize en son Material3 bağımlılığını (androidx.compose.material3:material3-*:1.3.0 veya daha yeni) ekleyin.

Tahmine dayalı geri hareketi animasyonları destekleyen Material bileşenleri şunlardır:

SearchBar ve ModalBottomSheet, tahmine dayalı geri hareketleriyle otomatik olarak animasyonlu hale gelir. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet ve DismissibleNavigationDrawer, drawerState öğesini ilgili sayfa içeriği kompozisyonlarına iletmenizi gerektirir.

PredictiveBackHandler ile ilerleme durumuna manuel olarak erişme

Jetpack Compose'daki PredictiveBackHandler[5] bileşeni, geri hareketini durdurmanıza ve ilerlemesine erişmenize olanak tanır. Kullanıcının geri hareketine anında tepki vererek kullanıcının ne kadar kaydırmasına bağlı olarak özel animasyonlar veya davranışlar oluşturabilirsiniz.

PredictiveBackHandler öğesini kullanmak için androidx.activity:activity:1.6.0 veya daha yeni bir sürüm kullandığınızdan emin olun.

PredictiveBackHandler, geri hareketinin ilerleme durumunu temsil eden etkinlikler yayınlayan bir Flow<BackEventCompat> sağlar. Her etkinlikte aşağıdaki gibi bilgiler bulunur:

  • progress: Geri hareketinin ilerleme durumunu belirten 0 ile 1 arasında bir kayan nokta değeri (0 = hareket başladı, 1 = hareket tamamlandı).
  • touchX ve touchY: Dokunma etkinliğinin X ve Y koordinatları.

Aşağıdaki snippet'te PredictiveBackHandler işlevinin temel kullanımı gösterilmektedir:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}

Örnek: Gezinme çekmecesine entegrasyon

Bu örnekte, JetLagged'de geri hareketlere yanıt olarak gezinme çekmecesinde sorunsuz bir etkileşim oluşturmak için PredictiveBackHandler kullanılarak özel bir uygulama içi animasyonun nasıl uygulanacağı gösterilmektedir:

Şekil 5. Tahmini geri desteğine sahip gezinme çekmecesi.

Bu örnekte PredictiveBackHandler şu amaçlarla kullanılır:

  • Geri hareketinin ilerleme durumunu takip edin.
  • Hareketin ilerleme durumuna göre çekmecenin translationX değerini güncelleyin.
  • Hareket tamamlandığında veya iptal edildiğinde, hareket hızına göre çekmeceyi sorunsuz bir şekilde açmak veya kapatmak için velocityTracker simgesini kullanın.

Tahmine dayalı geri hareketi animasyonunu test etme

Hâlâ Android 13 veya Android 14 kullanıyorsanız ana ekrana geri dönme animasyonunu test edebilirsiniz.

Bu animasyonu test etmek için aşağıdaki adımları uygulayın:

  1. Cihazınızda Ayarlar > Sistem > Geliştirici seçenekleri'ne gidin.
  2. Tahmine dayalı geri hareketi animasyonları'nı seçin.
  3. Güncellenen uygulamanızı başlatın ve geri hareketini kullanarak uygulamanın nasıl çalıştığını görün.

Android 15 ve sonraki sürümlerde bu özellik varsayılan olarak etkindir.

Ek kaynaklar