Aggiunta del supporto per le animazioni Indietro predittive integrate e personalizzate

Se hai già eseguito la migrazione della tua app alle nuove API di sfondo del sistema, puoi attivare il ritorno predittivo per ricevere automaticamente animazioni in-app e supportare anche le transizioni personalizzate.

Aggiunta del supporto per le animazioni in-app integrate

Video: Animazioni Indietro predittive

Una volta attivata l'opzione, l'app mostra animazioni per il ritorno alla home page, per le attività e le attività interattive.

Puoi anche eseguire l'upgrade della dipendenza del componente del materiale alla versione 1.10.0 di MDC Android per ricevere animazioni dei componenti Material come segue:

Per saperne di più, consulta le indicazioni per gli sviluppatori dei componenti materiali su GitHub. informazioni.

Il video mostra un breve esempio di animazioni di ritorno predittive per attività diverse e ritorno alla schermata Home utilizzando l'app Impostazioni di Android.

  1. Nell'animazione, l'utente scorre indietro per tornare alle impostazioni precedenti schermata: un esempio di animazione cross-activity.
  2. Ora, nella schermata precedente, l'utente inizia a scorrere verso il retro un'altra volta, visualizzando un'anteprima della schermata Home con lo sfondo, un esempio dell'animazione di ritorno alla schermata Home.
  3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra. e si riduce all'icona nella schermata Home.
  4. L'utente è tornato completamente alla schermata Home.

Scopri di più sul supporto del back predittivo.

Aggiungere transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate delle proprietà in-app utilizzando l'API Progress e il metodo di animazione tra attività personalizzateoverrideActivityTransition.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API di avanzamento con ritorno predittivo per sviluppare animazioni personalizzate per il gesto di ritorno predittivo nella tua app. In OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti mentre l'utente scorre verso il retro. Utilizza questi metodi se hai bisogno di qualcosa di più personalizzato rispetto alle animazioni predefinite fornite dalle nuove animazioni di sistema o dalle animazioni del componente Material.

Ci aspettiamo che la maggior parte delle app usi le API AndroidX compatibili con le versioni precedenti, ma API di piattaforme simili all'interno OnBackAnimationCallback disponibile per i test in Anteprima per gli sviluppatori 1 di Android 14 e versioni successive.

Utilizzo delle API Progress con le transizioni AndroidX

Le API Progress possono essere utilizzate con AndroidX Transitions 1.5.0-alpha01 o versioni successive su Android 14 e versioni successive per creare transizioni Indietro predittive.

  1. Utilizza TransitionManager#controlDelayedTransition anziché beginDelayedTransition per riprodurre le transizioni quando l'utente scorre verso il retro.
  2. Crea la transizione entro handleOnBackStarted.
  3. Riproduci la transizione con l'evento Indietro in handleOnBackProgressed collegando currentFraction a BackEvent.progress, che mostra quanto l'utente ha swipato verso il retro.
  4. Completa la transizione dopo che l'utente ha eseguito il gesto Indietro in handleOnBackPressed.
  5. Infine, reimposta lo stato della transizione entro handleOnBackCancelled.

Il seguente video, il codice Kotlin e il file XML mostrano una transizione personalizzata tra due caselle implementate con 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>

Tieni presente quanto segue quando lavori con le transizioni predittive indietro:

  • Usa isSeekingSupported per verificare se la transizione supporta il sistema Indietro predittivo.
  • Sostituisci isSeekingSupported per restituire true per le transizioni personalizzate.
  • Crea un controller per animazione.
  • Le transizioni Indietro predittive sono supportate con le transizioni AndroidX, ma non con le transizioni del framework. Consigliamo di eseguire la migrazione dal framework transizioni.
  • Le transizioni Indietro predittive sono supportate sui dispositivi Android 14 e versioni successive e non sono compatibili con le versioni precedenti.
  • Sono supportate anche le transizioni create con scene XML. Nel handleOnBackStarted, imposta TransitionSeekController sul risultato di TransitionManager.createSeekController anziché il risultato di controlDelayedTransition,

Aggiungere transizioni personalizzate alle attività su Android 14 e versioni successive

Per assicurarti che le transizioni di attività personalizzate supportino il pulsante Indietro predittivo su Android 14 e versioni successive, puoi utilizzare overrideActivityTransition anziché overridePendingTransition. Ciò significa che l'animazione di transizione viene riprodotta l'utente scorre indietro.

Per fornire un esempio di come potrebbe funzionare, immagina uno scenario in cui L'attività B si trova sopra l'attività A nello stack posteriore. Gestisci le animazioni personalizzate delle attività nel seguente modo:

  • Chiama le transizioni di apertura o chiusura all'interno del metodo onCreate dell'attività B.
  • Quando l'utente passa all'attività B, utilizza OVERRIDE_TRANSITION_OPEN. Quando l'utente scorre per tornare all'attività A, utilizza OVERRIDE_TRANSITION_CLOSE.

  • Quando specifichi OVERRIDE_TRANSITION_CLOSE, enterAnim è l'animazione di entrata dell'attività A e exitAnim è l'animazione di uscita dell'attività B.