Gelecekteki tahmine dayalı geri hareketini desteklemek için uygulamanızı güncelleyin

1. Giriş

Android 13'te, tahmin edilen geri gitme hareketi için yakında kullanıma sunulacak desteğin temelini oluşturan API'ler ekledik.

Bu özellik, kullanıcının geri hareketini tam olarak tamamlamadan önce sonucunu önizlemesine olanak tanır. Böylece kullanıcı, mevcut görünümde kalmaya veya işlemi tamamlayıp ana ekrana, önceki bir etkinliğe ya da WebView'da daha önce ziyaret edilen bir sayfaya dönmeye karar verebilir. Bunun nasıl görüneceğine dair bir örneği aşağıda bulabilirsiniz:

Bu animasyonda, kullanıcının Chrome tarayıcıyı açması, Android mobil cihazda Chrome tarayıcıyı görüntülemesi ve ardından bir sonraki hedef olarak ana ekranı görmek için geri kaydırmasıyla ilgili gelecekteki bir uygulamanın yaklaşık görünümü gösterilmektedir.

Bu codelab'de, WebView'u uygulayan bir anket parçasını düzelteceğiz.

Bu codelab'in hedefi

Bu codelab'de, önceden geri gezinme modelini uygulayan API'leri kullanarak, WebView ile tahmin edilen geri gitme hareketini destekleyecek şekilde geçirerek sistem Geri'yi engelleyen bir AndroidX uygulamasının nasıl hazırlanacağı gösterilmektedir. Başka bir deyişle, yeni animasyonların çalışması için sistemin, uygulamanın geri gezinme hareketini kesip kesmediğini önceden bilmesi gerekir.

Ne oluşturacaksınız?

Bu codelab'de, Sunflower uygulamasında geri hareketlerini işlemek için AndroidX API kitaplıklarını kullanacaksınız.

Neler öğreneceksiniz?

  • AndroidX için geri tarafta çağırma işlemini yakalama
  • Geri etkinliğini sisteme döndürme
  • Geri hareketlerini işlemek için diğer seçenekler
  • Android 13 ve sonraki sürümlerde sunulacak yeni kullanıcı deneyimi, daha tahmin edilen geri gitme hareketiyle gezinme özelliği sunuyor

İhtiyacınız olanlar

2. Tahmin edilen geri gitme hareketi için destek planlama

Bu özelliği uygulamak için AndroidX API'lerini kullanın.

Bu codelab, AndroidX'i kullanan uygulamalar için tasarlanmıştır.

Geri gezinmeyi desteklemek için OnBackPressedDispatcher ve OnBackPressedCallback öğelerini uygulayacaksınız.

Diğer seçenekler

Uygulamanızın farklı ihtiyaçlarına bağlı olarak bu özelliği kullanmak için başka seçeneklerimiz de var:

  • AndroidX'i kullanamayan uygulamalar için: Bu durumdaysanız endişelenmeyin. Android 13'te kullanıma sunduğumuz yeni OnBackInvokedDispatcher ve OnBackInvokedCallback platform sınıflarını kullanın. Bu sınıflar, AndroidX gerektirmeden önceden derleme API'lerini kullanmanıza olanak tanır. Ayrıntılar için belgelere bakın.
  • Geçici olarak taşınamayan uygulamalar için: Bu durumdaysanız da endişelenmeyin. Şu anda AndroidX kitaplıklarına veya platform API'lerine geçiş yapmak mümkün değilse tahmin edilen geri gitme hareketinden vazgeçebilirsiniz. Ayrıntılar için belgelere bakın.

3. Başlamadan önce

Android Studio'yu yükleme

Android Studio'yu ve Android 13 SDK'sını yükleyin.

Cihaz edinme

Bu codelab'i kullanarak oluşturduğunuz uygulamayı çalıştırmak için sanal veya fiziksel bir Android cihaz kullanabilirsiniz.

Hareketle gezinmeyi etkinleştirme

API düzeyi 29 olan yeni bir emülatör örneği çalıştırırsanız Hareketli Gezinme özelliği varsayılan olarak etkinleştirilmeyebilir. Hareketle gezinmeyi etkinleştirmek için Sistem ayarları > Sistem > Sistemde gezinme > Hareketle gezinme'yi seçin.

Kodu alın

Kodu aşağıdaki yöntemlerden biriyle alın:

ZIP dosyasını indirin

Git ile indirme

Kodu Git kullanarak indirmeyi tercih ediyorsanız aşağıdaki adımları uygulayın:

  1. Git'i yükleyin.
  2. Bu alıştırmada kullanılacak uygulamayı edinmek için starter-code veya main dalını klonlayın:

Terminal

// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git

Uygulamayı çalıştırma

Aşağıdaki adımları tamamlayın:

  1. Android Studio'da uygulamayı açın ve oluşturun.
  2. Yeni bir sanal cihaz oluşturun ve Tiramisu'yu seçin. Alternatif olarak, API düzeyi 33 veya üstünü çalıştıran fiziksel bir cihaz bağlayabilirsiniz. info-avocado.png
  3. Sunflower uygulamasını çalıştırın.

info-avocado.png

Ardından bir temel değer oluşturacak ve Sunflower uygulamasının bir parçası olan kötü bir deneyimi inceleyeceksiniz.

4. Temel bir değer belirleme

Başlangıç noktamız, geri hareketlerini kötü bir şekilde işleyen bir WebView'da sunulan bir anket içeren Sunflower uygulamasıdır. Kullanıcı, WebView'da geri gitmek için ekranı sol veya sağ kenardan kaydırdığında uygulama, önceki sayfaya dönmek yerine kullanıcıyı önceki bir parçaya döndürür. Bu durum, gönderilmeyen verilerin kaybolmasına neden olur.

Demoyu keşfedin

Ana ekrandan başlayarak WebView işlevindeki kötü deneyimi incelemek için uygulamanızın ana iş akışını adım adım inceleyelim.

  1. Sunflower uygulamasının varsayılan ekranında PLANT LIST'e (Bitki Listesi) dokunun.

info-avocado.png

  1. Bitki kataloğunda herhangi bir bitkiye dokunun. (Bu örnekte avokado meyvesini kullanacağız.)

plant-catalog.png

  1. Dokunduğunuz bitkinin bilgi ekranında, bitkiyi değerlendirmek için beğeni simgesine (sağ üst köşede) dokunun.

info-avocado.png

  1. Anketi doldurmaya başlayın ancak 3. soruya geldiğinizde durun.

survey-page-1.png

survey-page-2.png

survey-page-3.png

  1. Geri hareketini kullanmak için ekranın sol (veya sağ) kenarından içeri doğru kaydırın. Geri kaydırma işleminin sizi anketteki 2. soruya yönlendirmek yerine bitki ayrıntıları parçasına (bu örnekte, avokado bilgileri sayfası) yönlendirdiğini unutmayın. Bu durum, yanıtlarınızı kaybetmenize ve kötü bir kullanıcı deneyimine yol açar.

sunflower-back-nav-returns-to-the-plant-detail.gif

Şimdi bu sorunları düzeltmeye başlayalım.

5. Tahmin edilen geri gitme hareketini etkinleştirme

Uygulamamızda zaten AndroidX kullanıldığından geri gezinme API'lerini kullanacaksınız. Bunlar, önceden derleme modelini zaten desteklemektedir.

Android 13'ü hedefleme

Uygulamamızın Studio projesinde, aşağıdaki kod snippet'inde gösterildiği gibi uygulamanın derleme yapılandırmasını Android 13'ü hedefleyecek şekilde güncelleyin.

build.gradle (Proje)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkVersion = 33
       targetSdkVersion = 33
   }
...
}

Bağımlılıkları yükseltme

build.gradle dosyasında appCompatVersion değerini 1.6.0 veya daha yüksek bir değere ayarlayın.

build.gradle (Proje)

buildscript {
   ext {

    // App dependencies
    appCompatVersion = '1.6.0-rc01' // Built original with changes

...
}

AndroidX Activity 1.6.0 veya sonraki bir sürüme yükseltin.

build.gradle (Modül)

dependencies {
    implementation "androidx.activity:activity-ktx:1.6.0"
    ...
}

Tahmin edilen geri gitme hareketini etkinleştirme

Tahmin edilen geri gitme hareketi API'lerini etkinleştirmek için manifestte enableOnBackInvokedCallback değerini true olarak ayarlayın.

AndroidManifest.xml

<application
   ...
   android:enableOnBackInvokedCallback="true" // Enables this feature.
   ... >
...
</application>

Geri hareketlerini işlemek için OnBackPressedCallback'i bildirip kaydedin

Geri çağırma işlevini oluşturun ve Geri hareketlerini işlemek için handleOnBackPressed yöntemini geçersiz kılın. WebView kullanım alanında, sayfa yığınında geri gitmek için Geri hareketini kullanalım.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
  val onBackPressedCallback = object: OnBackPressedCallback(true) {
    override fun handleOnBackPressed() {
      when {
        webView.canGoBack() -> webView.goBack()
      }
    }
  }
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)
}

Oluşturduklarınızı deneme

Şimdi WebView gezinmesinin düzgün çalıştığını test edeceksiniz.

  1. Android Studio'da uygulamayı tekrar oluşturup çalıştırın.
  2. Demoyu ilk çalıştırdığınızda yaptığınız gibi, istediğiniz bir bitkiye ve ardından "Beğen" simgesine dokunun. 3. soruya gelene kadar anketi doldurun.
  3. Geri hareketini kullanmak için ekranın sol (veya sağ) kenarından içeri doğru kaydırın. WebView, sizi anketteki 2. soruya yönlendirmelidir.

İstediğimiz tam olarak bu davranış. Ancak bu sorun henüz tamamen düzeltilmedi. Ne demek istediğimizi anlamak için devam edelim:

  1. 2. sorudan 1. soruya geri kaydırın, ardından bitki ayrıntıları parçasına dönmek için bir kez daha geri kaydırın.

sunflower-back-nav-stuck-survey.gif

1. sorudan bitki ayrıntıları parçasına geri dönemeyeceğinizi unutmayın. Bunun nedeni:

  • WebView'unuz, geri gezinme kullanılırken WebView'dan çıkmayı önleyerek geri gezinmeyi işliyor.
  • Uygulamanız, artık ihtiyaç duymadığında Geri gezinme işlevini sisteme geri vermelidir. Bu sorunu düzeltmek için bir sonraki bölüme geçelim.

6. Geri hareketini düzeltme

Önceki adımda uygulamamız, Geri hareketini önceki adımlardaki tesis ayrıntıları parçasına döndürmeden engelliyordu. Bu nedenle, kullanıcılarımız uygulamadan çıkamıyor ve kötü bir kullanıcı deneyimiyle WebView'da takılıp kalıyor.

OnBackPressedCallback ile geri gitme özelliğini etkinleştirme veya devre dışı bırakma

  1. Geri gezinmenin engellenip engellenmeyeceğini belirlemek için doUpdateVisitedHistory yöntemini geçersiz kılın. Geri gezinmeyi işleme mantığı şöyledir:
    • WebView'da geri dönülecek daha fazla sayfa varsa (webView.canGoBack()) OnBackPressedCallback yöntemi etkinleştirilmelidir.
    • Aksine, WebView'da geri gidilecek başka sayfa yoksa OnBackPressedCallback yöntemi devre dışı bırakılmalıdır. Bu nedenle, geri hareketini yaptığınızda geri yığında en üstteki parçaya geri dönersiniz.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  requireActivity().onBackPressedDispatcher
    .addCallback(onBackPressedCallback)

  disableOnBackPressedCallback(webView, onBackPressedCallback)
  }
}

private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
  webView.webViewClient = object: WebViewClient() {
    override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
      // Disable the on-back press callback if there are no more questions in the
      // WebView to go back to, allowing us to exit the WebView and go back to
      // the fragment.
      onBackPressedCallback.isEnabled = webView.canGoBack()

    }
  }
}
  1. WebView'ı tekrar test etmek için 3. soruya gelene kadar anketi tekrar doldurun.
  2. Geri hareketlerini kullanarak bitki ayrıntıları görünümüne geri dönün. Bu işlemi sorunsuz bir şekilde yapabilirsiniz.

Aşağıda, tüm bunları düzelttikten sonra nasıl görüneceğine dair bir örnek verilmiştir:

sunflower-back-nav-fixed.gif

Yeni ana sayfaya geri dönme hareketi animasyonunu önizleme

Android'in gelecek sürümlerinde, aşağıdaki animasyonda gösterildiği gibi tahmin edilen geri gitme hareketini kullanmaya başlayacaksınız. Bu değişiklikleri en kısa sürede uygulamaya başlamanızı önemle tavsiye ederiz.

Geliştirici seçeneğini etkinleştirerek yeni ana ekrana geri dönme hareketiyle gezinme özelliğini önizleyebilirsiniz.

animation.gif

7. Tebrikler

Tebrikler! Çok fazla içerik ele aldınız. Uygulamanızı Android'de sunulan tahmin edilen geri gitme hareketi özelliğine göre güncellemeye başlamak için seçenekleri ve API'leri daha iyi anladığınızı umuyoruz.

İşlediğimiz konular

  • Uygulamanızda, tahmin edilen geri gitme hareketini destekleyen API'leri kullanmaya başlama
  • AndroidX için geri düğmesiyle çağırma işlemini yakalama
  • Geri gezinme özelliğini sisteme döndürme
  • Geri hareketlerini işlemek için diğer seçenekler
  • Android 13'te sunulan yeni kullanıcı deneyimi, daha tahmin edilebilir bir geri gitme hareketi sağlar.

Tamamlanan Codelab

// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git

Ek materyaller

Referans belgeleri