Menambahkan dukungan untuk animasi kembali prediktif bawaan dan kustom

Jika sudah memigrasikan aplikasi ke API kembali sistem yang baru, Anda dapat aktifkan kembali prediktif untuk otomatis menerima item dalam aplikasi animasi, dan juga mendukung transisi khusus.

Menambahkan dukungan untuk animasi bawaan dalam aplikasi

Video: Animasi kembali prediktif

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:

Lihat panduan developer komponen material di GitHub untuk informasi selengkapnya tidak akurat atau tidak sesuai.

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.

Baca selengkapnya tentang mendukung kembali prediktif.

Menambahkan transisi dan animasi kustom dalam aplikasi

Anda dapat membuat animasi dan transisi properti kustom dalam aplikasi menggunakan Progress API dan metode animasi lintas aktivitas kustom overrideActivityTransition.

Menambahkan transisi kustom menggunakan Progress API

Dengan AndroidX Activity 1.8.0-alpha01 atau yang lebih baru, Anda dapat menggunakan Predictive Back Progress API untuk mengembangkan animasi kustom bagi gestur kembali prediktif di aplikasi Anda. Dalam OnBackPressedCallback, kami telah memperkenalkan metode handleOnBackProgressed, handleOnBackCancelled, dan handleOnBackStarted untuk menganimasikan objek saat pengguna menggeser kembali. Gunakan metode ini jika Anda memerlukan sesuatu yang lebih khusus daripada animasi default yang disediakan oleh animasi sistem baru 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>

Perhatikan hal berikut saat menangani transisi Kembali Prediktif:

  • 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 Android 14+ dan tidak kompatibel dengan versi lama.
  • 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. Ini berarti 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.