Mengupdate aplikasi untuk mendukung navigasi gestur Kembali prediktif mendatang

1. Pengantar

Terakhir Diperbarui: 11-04-2022

Di Android 13, kami telah menambahkan API yang berfungsi sebagai dasar dukungan mendatang untuk gestur Kembali _prediktif.

Fitur ini memungkinkan pengguna melihat pratinjau hasil gestur Kembali sebelum menyelesaikan sepenuhnya. Pada dasarnya, pengguna dapat menentukan apakah akan tetap berada di tampilan saat ini atau menyelesaikan tindakan dan kembali ke Layar utama, aktivitas sebelumnya, atau halaman yang sebelumnya dikunjungi di WebView. Berikut adalah contohnya:

Untuk mendukung gestur Kembali prediktif, Android 13 menambahkan API platform OnBackInvokedCallback tingkat jendela baru. API ini menggantikan KeyEvent.KEYCODE_BACK API dan semua class platform yang menggunakan OnBackPressed, yang tidak akan digunakan lagi dan akan memerlukan migrasi di rilis Android utama berikutnya setelah Android 13. Untuk mengetahui detailnya, lihat dokumentasi kami.

Dalam codelab ini, kita akan memperbaiki fragmen survei yang mengimplementasikan WebView.

Sasaran codelab ini

Codelab ini menunjukkan cara menyiapkan aplikasi AndroidX yang menahan sistem Kembali dengan memigrasikannya untuk mendukung gestur Kembali prediktif dengan WebView.

Jika aplikasi Anda menggunakan sistem Kembali default (dengan kata lain, tidak ditahan sistem Kembali), Anda hanya perlu memilih enableOnBackInvokedCallback. Jika Anda sudah melakukannya, aplikasi akan mulai menggunakan tombol Kembali prediktif setelah fitur ini tersedia.

Yang akan Anda build

Dalam codelab ini, Anda akan menggunakan library AndroidX API untuk menangani gestur Kembali di aplikasi Sunflower.

Yang akan Anda pelajari

• Cara menahan pemanggilan peristiwa kembali untuk AndroidX
• Cara mengembalikan peristiwa Kembali ke sistem
• Opsi lain untuk menangani gestur Kembali
• Pengalaman pengguna baru yang hadir di Android 13 dan yang lebih baru menyediakan navigasi gestur Kembali yang lebih prediktif

Yang akan Anda butuhkan

• Android Studio
• (Opsional) Git

2. Merencanakan dukungan untuk gestur Kembali prediktif

Gestur Kembali Prediktif didukung secara otomatis untuk aplikasi yang menggunakan navigasi kembali default. Untuk mengaktifkannya, Anda hanya perlu memilih enableOnBackInvokedCallback, seperti yang dijelaskan di Mengaktifkan gestur Kembali prediktif.

Menggunakan AndroidX API untuk mengimplementasikan fitur ini

Codelab ini dirancang untuk aplikasi yang sudah menggunakan AndroidX.

Anda akan mengimplementasikan OnBackPressedDispatcher dan OnBackPressedCallback untuk mendukung navigasi Kembali.

Opsi lainnya

Kami memiliki opsi lain untuk menangani fitur ini, bergantung pada berbagai kebutuhan aplikasi Anda:

• Untuk aplikasi yang tidak dapat menggunakan AndroidX - Jika Anda termasuk dalam kategori ini, kami siap membantu Anda. Gunakan class platform OnBackInvokedDispatcher dan OnBackInvokedCallback baru yang kami perkenalkan di Android 13, yang memungkinkan Anda menggunakan API lebih awal tanpa memerlukan AndroidX. Lihat dokumentasi untuk mengetahui detailnya.
• Untuk aplikasi yang sementara tidak dapat dimigrasikan - Jika Anda termasuk dalam kategori ini, kami juga siap membantu Anda. Anda dapat memilih tidak menggunakan gestur Kembali prediktif, jika tidak saat ini belum bisa bermigrasi ke library AndroidX atau API platform. Lihat dokumentasi untuk mengetahui detailnya.

3. Sebelum memulai

Menginstal Android Studio

Instal Android Studio dan Android 13 SDK.

Mendapatkan perangkat

Anda dapat menggunakan perangkat Android virtual atau fisik untuk menjalankan aplikasi yang Anda build menggunakan codelab ini.

Mengaktifkan navigasi gestur

Jika Anda menjalankan instance emulator baru dengan API level 29, Navigasi Gestur mungkin tidak diaktifkan secara default. Untuk mengaktifkan navigasi gestur, pilih Setelan sistem > Sistem > Navigasi Sistem > Navigasi Gestur.

Mendapatkan kode

Dapatkan kode dengan salah satu cara berikut:

Mendownload ZIP

Download ZIP (mulai)

Download ZIP (selesai)

Mendownload melalui Git

Jika Anda memilih untuk mendownload kode menggunakan Git, ikuti langkah-langkah berikut:

1. Instal Git.
2. Clone cabang starter-code atau main untuk mendapatkan aplikasi untuk latihan ini:

Terminal

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

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

Menjalankan aplikasi

Selesaikan langkah berikut:

1. Buka dan build aplikasi di Android Studio.
2. Buat perangkat virtual baru, lalu pilih Tiramisu. Atau, Anda dapat menghubungkan perangkat fisik yang menjalankan API level 33 atau yang lebih tinggi.
3. Jalankan aplikasi Sunflower.

Berikutnya, Anda akan menetapkan dasar pengukuran dan mempelajari pengalaman buruk yang merupakan bagian dari aplikasi Sunflower.

4. Menetapkan dasar pengukuran

Titik awal kita adalah aplikasi Sunflower, yang mencakup survei yang ditampilkan dalam WebView yang menangani gestur Kembali dengan buruk. Saat pengguna menggeser dari tepi kiri atau kanan untuk kembali ke WebView, aplikasi akan menampilkan fragmen sebelumnya, bukan kembali ke halaman sebelumnya, sehingga menyebabkan hilangnya data yang tidak dikirim.

Menjelajahi demo

Mulai dari layar utama, mari kita bahas alur kerja utama aplikasi Anda untuk meninjau pengalaman yang buruk dengan fungsi WebView.

1. Di layar default aplikasi Sunflower, ketuk PLANT LIST.

2. Di katalog tanaman, ketuk sembarang tanaman. (Untuk contoh ini, kita akan menggunakan buah alpukat.)

3. Di layar info tanaman yang Anda ketuk, ketuk ikon sukai (di pojok kanan atas) untuk memberi rating tanaman.

4. Mulai isi survei, tetapi berhenti ketika Anda mencapai Pertanyaan nomor 3.

5. Geser ke dalam dari tepi kiri (atau kanan) layar untuk menggunakan gestur Kembali. Perlu diperhatikan bahwa dengan menggeser untuk Kembali, Anda akan diarahkan ke fragmen detail tanaman (dalam contoh ini, halaman informasi Avocado), bukan Pertanyaan nomor 2 dalam survei. Akibatnya, Anda akan kehilangan jawaban, dan memberikan pengalaman pengguna yang buruk.

Sekarang mari kita mulai memperbaiki masalah ini.

5. Mengaktifkan gestur Kembali prediktif

Aplikasi kami sudah menggunakan AndroidX, jadi Anda akan menggunakan Back navigation API. API ini sudah mendukung model awal.

Menargetkan Android 13

Di project Studio aplikasi, update konfigurasi build aplikasi untuk menargetkan Android 13, seperti yang ditampilkan dalam cuplikan kode berikut.

build.gradle (Project)

buildscript {
   ext {
       // Sdk and tools
       minSdkVersion = 29
       compileSdkPreview = "Tiramisu"
       targetSdkPreview = "Tiramisu"

...
}

Menyertakan dependensi AndroidX 1.6.0-alpha03

Pada build.gradle, setel appCompatVersion ke 1.6.0-alpha03.

build.gradle (Project)

buildscript {
   ext {

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

...
}

Mengaktifkan gestur Kembali prediktif

Untuk mengaktifkan API gestur Kembali prediktif, setel enableOnBackInvokedCallback ke true dalam manifes.

AndroidManifest.xml

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

Mendeklarasikan dan mendaftarkan OnBackPressedCallback untuk menangani gestur Kembali

Buat callback dan ganti metode handleOnBackPressed untuk menangani gestur Kembali. Untuk kasus penggunaan WebView, mari kita gunakan gestur Kembali untuk kembali ke stack halaman hingga tidak ada halaman lagi.

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)
...
}

Menguji apa yang telah Anda build

Sekarang Anda akan menguji apakah navigasi WebView berfungsi dengan benar.

1. Di Android Studio, build dan jalankan aplikasi lagi.
2. Sama seperti yang Anda lakukan saat pertama kali menjalankan demo, ketuk tanaman pilihan Anda, ketuk ikon sukai, lalu isi survei hingga Anda mencapai Pertanyaan nomor 3.
3. Geser ke dalam dari tepi kiri (atau kanan) layar untuk menggunakan gestur Kembali. WebView akan mengembalikan Anda ke Pertanyaan nomor 2 di survei.

Ini adalah perilaku yang persis kita inginkan. Namun, kita baru setengah jalan dan belum selesai sepenuhnya. Mari kita lanjutkan untuk memahami maksud kami:

4. Dari Pertanyaan nomor 2, geser ke Pertanyaan nomor 1, lalu geser sekali lagi untuk mencoba menampilkan fragmen detail tanaman.

Perhatikan bahwa Anda tidak dapat kembali dari Pertanyaan nomor 1 ke fragmen detail tanaman. Hal ini terjadi karena:

• WebView Anda menangani navigasi Kembali tanpa meninggalkan WebView saat menggunakan navigasi Kembali.
• Aplikasi Anda perlu mengembalikan navigasi Kembali ke sistem setelah tidak lagi diperlukan. Mari kita buka bagian berikutnya untuk mengatasinya.

6. Memperbaiki gestur Kembali

Pada langkah sebelumnya, aplikasi menahan gestur Kembali tanpa mengembalikannya ke fragmen detail tanaman. Akibatnya, pengguna tidak dapat meninggalkan aplikasi dan terjebak di WebView dengan pengalaman pengguna yang buruk.

Mengaktifkan atau menonaktifkan navigasi Kembali dengan OnBackPressedCallback

1. Ganti metode doUpdateVisitedHistory untuk menentukan apakah navigasi Kembali harus ditahan. Logika untuk menangani navigasi Kembali adalah sebagai berikut:
   • Jika ada lebih banyak halaman sebagai tujuan peristiwa kembali di WebView (webView.canGoBack()), metode OnBackPressedCallback harus diaktifkan.
   • Sebaliknya, jika tidak ada lagi halaman yang perlu dibuka di WebView, metode OnBackPressedCallback harus dinonaktifkan. Akibatnya, gestur Kembali akan kembali ke fragmen teratas di data sebelumnya.

SurveyFragment.kt

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
  ...
  // Present the HTML form to the user.
  webView.loadUrl("https://atom-summer-cadet.glitch.me/")
  webView.settings.javaScriptEnabled = true
  webView.addJavascriptInterface(WebAppInterface(requireContext()), "Android")

  ...
  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()

      }
    }
  }

2. Untuk menguji WebView lagi, isi survei sekali lagi hingga Anda mencapai Pertanyaan nomor 3.
3. Gunakan gestur Kembali untuk kembali ke tampilan detail tanaman. Anda seharusnya dapat melakukannya tanpa masalah.

Perhatikan bahwa sekarang kita bisa keluar dari WebView dan kembali untuk memeriksa fragmen detail tanaman tanpa mengalami masalah.

Berikut adalah contoh tampilan proses ini setelah Anda memperbaikinya:

7. Selamat

Selamat! Anda telah membahas banyak konten. Semoga Anda sekarang memiliki pemahaman yang lebih baik tentang opsi dan API untuk mulai mengupdate aplikasi Anda ke gestur Kembali prediktif yang ditawarkan di Android.

Tampilannya pada versi Android mendatang

Pada versi Android mendatang, Anda akan mulai mencoba gestur Kembali prediktif, seperti yang ditunjukkan pada animasi berikut. Sebaiknya mulai implementasikan perubahan ini sesegera mungkin.

Yang telah kita bahas

• Cara mengaktifkan aplikasi Anda untuk mulai menggunakan API yang mendukung gestur Kembali prediktif
• Cara menahan pemanggilan peristiwa kembali untuk AndroidX
• Cara mengembalikan navigasi Kembali ke sistem
• Opsi lain untuk menangani gestur Kembali
• Pengalaman UX baru yang hadir di Android 13, serta menyediakan gestur Kembali yang lebih prediktif

Materi tambahan

• Panduan Developer

Dokumen referensi

• OnBackPressedDispatcher dan OnBackPressedCallback
• OnBackInvokedDispatcher dan OnBackInvokedCallback