Menambahkan dukungan untuk animasi kembali prediktif

Saat menggunakan API kembali sistem, Anda dapat memilih untuk menerima animasi dalam aplikasi dan mendukung transisi kustom.

Setelah mengaktifkan, aplikasi Anda akan menampilkan animasi untuk "kembali ke layar utama", lintas aktivitas, dan lintas tugas.

Anda juga dapat mengupgrade dependensi komponen material ke Android MDC v1.10.0 untuk menerima animasi komponen material seperti berikut:

• Sheet bawah
• Sheet samping
• Penelusuran

Lihat panduan developer komponen material di GitHub untuk mengetahui informasi selengkapnya.

Video tersebut menampilkan contoh singkat animasi "kembali prediktif" untuk lintas aktivitas dan "kembali ke layar utama" menggunakan aplikasi Setelan Android.

1. Pada animasi, pengguna menggeser kembali untuk kembali ke layar setelan sebelumnya—contoh animasi lintas aktivitas.
2. Sekarang pada layar sebelumnya, pengguna mulai menggeser kembali untuk kedua kalinya, menampilkan pratinjau layar utama dengan wallpapernya—contoh animasi "kembali ke layar utama".
3. Pengguna terus menggeser ke kanan, menampilkan animasi jendela yang mengecil ke ikon di layar utama.
4. Pengguna kini telah kembali sepenuhnya ke layar utama.

Pelajari lebih lanjut cara Menambahkan dukungan untuk gestur kembali prediktif.

Menambahkan transisi dan animasi kustom dalam aplikasi

Anda dapat membuat animasi dan transisi properti kustom dalam aplikasi, animasi lintas aktivitas kustom, dan animasi lintas fragmen kustom dengan gestur kembali prediktif.

Menambahkan transisi kustom menggunakan Progress API

Dengan AndroidX Activity 1.8.0-alpha01 atau yang lebih baru, Anda dapat menggunakan Predictive Back Progress API guna mengembangkan animasi kustom untuk gestur kembali prediktif di aplikasi Anda. Progress API berguna dalam menganimasikan tampilan, tetapi memiliki keterbatasan saat menganimasikan transisi antarfragmen. Dalam OnBackPressedCallback, kami telah memperkenalkan metode handleOnBackProgressed, handleOnBackCancelled dan handleOnBackStarted untuk menganimasikan objek saat pengguna menggeser kembali. Gunakan metode ini jika Anda perlu menyesuaikan lebih dari animasi default yang disediakan oleh sistem, atau animasi Komponen Material.

Kami memperkirakan sebagian besar aplikasi akan menggunakan AndroidX API yang kompatibel dengan versi lama, tetapi ada juga API platform serupa dalam antarmuka OnBackAnimationCallback yang tersedia untuk diuji di Pratinjau Developer 1 Android 14 dan yang lebih tinggi.

Menggunakan Progress API dengan AndroidX Transitions

Progress API dapat digunakan dengan AndroidX Transitions 1.5.0-alpha01 atau yang lebih baru di Android 14 dan yang lebih baru untuk membuat transisi Kembali Prediktif.

1. Gunakan TransitionManager#controlDelayedTransition, bukan beginDelayedTransition, untuk memutar transisi saat pengguna menggeser kembali.
2. Buat transisi dalam handleOnBackStarted.
3. Putar transisi dengan peristiwa kembali dalam handleOnBackProgressed dengan menghubungkan currentFraction ke BackEvent.progress yang memperlihatkan seberapa jauh pengguna telah menggeser kembali.
4. Selesaikan transisi setelah pengguna melakukan gestur kembali di handleOnBackPressed.
5. Terakhir, reset status transisi dalam handleOnBackCancelled.

Video, kode Kotlin, dan XML berikut menunjukkan transisi kustom antara dua kotak yang diterapkan dengan OnBackPressedCallback:

    class MyFragment : Fragment() {

    val transitionSet = TransitionSet().apply {
        addTransition(Fade(Fade.MODE_OUT))
        addTransition(ChangeBounds())
        addTransition(Fade(Fade.MODE_IN))
    }
    ...
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val callback = object : OnBackPressedCallback(enabled = false) {

            var controller: TransitionSeekController? = null

            @RequiresApi(34)
            override fun handleOnBackStarted(backEvent: BackEvent) {
                // Create the transition
                controller = TransitionManager.controlDelayedTransition(
                    binding.card,
                    transitionSet
                )
                changeTextVisibility(ShowText.SHORT)
            }

            @RequiresApi(34)
            override fun handleOnBackProgressed(backEvent: BackEvent) {
                // Play the transition as the user swipes back
                if (controller?.isReady == true) {
                    controller?.currentFraction = backEvent.progress
                }
            }

            override fun handleOnBackPressed() {
                // Finish playing the transition when the user commits back
                controller?.animateToEnd()
                this.isEnabled = false
            }

            @RequiresApi(34)
            override fun handleOnBackCancelled() {
                // If the user cancels the back gesture, reset the state
                transition(ShowText.LONG)
            }
        }

        binding.shortText.setOnClickListener {
            transition(ShowText.LONG)
            callback.isEnabled = true
        }

        this.requireActivity().onBackPressedDispatcher.addCallback(callback)
    }

    private fun transition(showText: ShowText) {
        TransitionManager.beginDelayedTransition(
            binding.card,
            transitionSet
        )
        changeTextVisibility(showText)
    }

    enum class ShowText { SHORT, LONG }
    private fun changeTextVisibility(showText: ShowText) {
        when (showText) {
            ShowText.SHORT -> {
                binding.shortText.isVisible = true
                binding.longText.isVisible = false
            }
            ShowText.LONG -> {
                binding.shortText.isVisible = false
                binding.longText.isVisible = true
            }
        }
    }
}
  

<?xml version="1.0" encoding="utf-8"?>
...
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ...>

        <TextView
            android:id="@+id/short_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            ... />

        <TextView
            android:id="@+id/long_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="gone"
            .../>

    </androidx.constraintlayout.widget.ConstraintLayout>

Saat menangani transisi Kembali Prediktif, perhatikan hal berikut:

• Gunakan isSeekingSupported untuk memeriksa apakah transisi mendukung Kembali Prediktif.
• Ganti isSeekingSupported agar menampilkan true (benar) untuk transisi kustom Anda.
• Buat satu pengontrol per animasi.
• Transisi Kembali Prediktif didukung dengan transisi AndroidX, tetapi tidak dengan transisi framework. Sebaiknya keluar dari transisi framework.
• Transisi Kembali Prediktif didukung di perangkat yang menjalankan Android 14 dan yang lebih baru serta tidak kompatibel dengan versi sebelumnya.
• Transisi yang dibuat dengan scene XML juga didukung. Di handleOnBackStarted, setel TransitionSeekController ke hasil TransitionManager.createSeekController, bukan hasil controlDelayedTransition.

Menambahkan transisi aktivitas kustom di Android 14 dan yang lebih baru

Untuk memastikan bahwa transisi Aktivitas kustom mendukung Kembali Prediktif di Android 14 dan yang lebih baru, Anda dapat menggunakan overrideActivityTransition, bukan overridePendingTransition. Artinya, animasi transisi akan diputar saat pengguna menggeser kembali.

Untuk memberikan contoh cara kerjanya, bayangkan skenario saat Aktivitas B berada di atas Aktivitas A di data sebelumnya. Anda akan menangani animasi Aktivitas kustom dengan cara berikut:

• Panggil transisi pembukaan atau penutupan dalam metode onCreate Aktivitas B.
• Saat pengguna membuka Aktivitas B, gunakan OVERRIDE_TRANSITION_OPEN. Saat pengguna menggeser untuk kembali ke Aktivitas A, gunakan OVERRIDE_TRANSITION_CLOSE.

• Saat menentukan OVERRIDE_TRANSITION_CLOSE, enterAnim adalah animasi masuk Aktivitas A dan exitAnim adalah animasi keluar Aktivitas B.

Menambahkan dukungan untuk Kembali Prediktif dengan fragmen

Saat menerapkan Kembali Prediktif dengan fragmen, ada dua pendekatan.

Menggunakan API yang ada

Sebaiknya gunakan API yang sudah ada. API ini memungkinkan Anda menggeser dari tepi layar untuk memanipulasi transisi Animator atau Androidx dengan gestur. Memindahkan gestur melewati nilai minimum menentukan apakah gestur selesai dan Anda kembali ke fragmen sebelumnya, atau gestur dibatalkan dan Anda tetap berada di fragmen saat ini. Untuk mengetahui informasi selengkapnya, lihat Menavigasi antar-fragmen menggunakan animasi.

Perhatikan faktor-faktor berikut:

• Impor Transitions 1.5.0 atau yang lebih baru dan Fragment 1.7.0 atau yang lebih baru. Sebagian besar dukungan kembali prediktif dalam Fragment bergantung pada kemampuan Transitions untuk mencari animasi, yang hanya dapat dilakukan di Transitions 1.5.0 atau yang lebih baru.
• Gunakan Fragment, dengan FragmentManager atau Komponen Navigasi, untuk menangani data sebelumnya. Kembali Prediktif tidak didukung jika Anda mengelola data sebelumnya sendiri.
• Beberapa library menyertakan dukungan Kembali Prediktif. Periksa dokumentasi untuk memastikan.
• Class Animator dan library AndroidX Transition didukung.
• Class Animation dan library Transition framework tidak didukung.
• Animasi prediktif hanya berfungsi pada perangkat yang menjalankan Android 14 atau yang lebih baru.

Gunakan lintas fragmen kembali prediktif dalam situasi berikut:

• Menganimasikan komponen navigasi.
• Menganimasikan dengan setCustomAnimations.
• Menganimasikan transisi masuk dan keluar dengan setEnterTransition, setExitTransition, setReenterTransition, dan setReturnTransition.
• Menganimasikan transisi elemen bersama dengan setSharedElementEnterTransition, dan setSharedElementReturnTransition.

Beberapa gerakan material mendukung kembali prediktif mulai 1.12.02-alpha02 atau yang lebih tinggi, termasuk MaterialFadeThrough, MaterialSharedAxis, dan MaterialFade. Perhatikan bahwa MaterialContainerTransform tidak mendukung kembali prediktif.

Menggunakan callback

Anda dapat membuat transisi lintas fragmen menggunakan callback, tetapi ada batasan umum saat menggunakan callback ketika pengguna tidak dapat melihat fragmen sebelumnya saat menggeser kembali. Untuk membuat transisi elemen bersama lintas fragmen yang sesuai dengan panduan desain kembali prediktif, lakukan hal berikut:

Buat OnBackPressedCallback. Dalam handleOnBackProgressed, skalakan dan geser fragmen. Kemudian, munculkan dari data sebelumnya. Selanjutnya, jalankan transisi elemen bersama menggunakan setSharedElementReturnTransition di luar callback.

Untuk mengetahui informasi selengkapnya, lihat contoh kode di GitHub.

Persyaratan

Gunakan tabel berikut untuk memahami apa yang dikontrol oleh opsi developer, targetSdkVersion dan compileSdkVersion, versi perangkat, dependensi, tanda manifes, dan tanda fragmen. Tabel pertama mengacu pada persyaratan kode.

Tabel berikut mengacu pada persyaratan yang memungkinkan pengguna melihat animasi.

Referensi Tambahan

• Contoh kode sebelumnya prediktif
• Dasar-dasar video kembali sistem
• Video Membangun untuk masa depan Android