Aggiungere il supporto per le animazioni predittive per la schiena

Quando utilizzi le API di sistema di backup, puoi attivare la ricezione di animazioni in-app e supportare le transizioni personalizzate.

Video 1: Animazioni di ritorno predittive

Dopo l'attivazione, l'app mostra animazioni per il ritorno alla schermata Home, il passaggio da un'attività all'altra e il passaggio da un'attività all'altra.

Puoi anche eseguire l'upgrade della dipendenza dei componenti Material alla versione 1.10.0 di MDC Android per ricevere animazioni dei componenti Material come la seguente:

Per maggiori informazioni, consulta le linee guida per gli sviluppatori di componenti Material su GitHub.

Il video mostra un breve esempio di animazioni di Indietro predittive per il passaggio da un'attività all'altra e per il ritorno alla schermata Home utilizzando l'app Impostazioni di Android.

  1. Nell'animazione, l'utente scorre verso il retro per tornare alla schermata delle impostazioni precedente, un esempio di animazione tra attività.
  2. Ora, nella schermata precedente, l'utente inizia a scorrere verso il retro un'altra volta, mostrando 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 che si riduce all'icona sulla schermata Home.
  4. L'utente è tornato completamente alla schermata Home.

Scopri di più su come aggiungere il supporto per i gesti di ritorno predittivi.

Aggiungere animazioni e transizioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate per le proprietà in-app, animazioni personalizzate tra attività e animazioni personalizzate tra frammenti con i gesti di ritorno predittivi.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API predittive Back Progress per sviluppare animazioni personalizzate per il gesto Indietro predittivo nell'app. Le API Progress sono utili per animare le viste, ma presentano limitazioni per l'animazione delle transizioni tra frammenti. In OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti mentre l'utente scorre indietro. Utilizza questi metodi se devi personalizzare più delle animazioni predefinite fornite dal sistema o le animazioni dei componenti Material.

Prevediamo che la maggior parte delle app utilizzi le API AndroidX compatibili con le versioni precedenti, ma esistono anche API di piattaforma simili all'interno dell'interfaccia OnBackAnimationCallback disponibili per il test in Android 14 Developer Preview 1 e versioni successive.

Utilizzare le 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 mentre l'utente scorre indietro.
  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 video, il codice Kotlin e il codice XML che seguono mostrano una transizione personalizzata tra due riquadri implementati 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>

Quando utilizzi le transizioni Indietro predittive, tieni presente quanto segue:

  • Usa isSeekingSupported per verificare se la transizione supporta 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. Esegui la migrazione dalle transizioni del framework e utilizza invece le transizioni Animator e AndroidX.
  • Le transizioni Indietro predittive sono supportate sui dispositivi con Android 14 e versioni successive e non sono compatibili con le versioni precedenti.
  • Sono supportate anche le transizioni create con le scene XML. In handleOnBackStarted, imposta TransitionSeekController sul risultato di TransitionManager.createSeekController anziché sul risultato di controlDelayedTransition.

Aggiungere transizioni di attività personalizzate 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 mentre 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 nella pila posteriore. Puoi gestire le animazioni di attività personalizzate 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.

Aggiunta del supporto per Indietro predittivo con frammenti

Per l'implementazione del sistema predittivo Back con frammenti, esistono due approcci.

Usa le API esistenti

Ti consigliamo di utilizzare le API esistenti. Queste API ti consentono di scorrere dal bordo dello schermo per manipolare le transizioni di Animator o Androidx con il gesto. Il fatto che il gesto venga spostato oltre una soglia determina se viene completato e se torni al frammento precedente oppure se viene annullato e rimani sul frammento corrente. Per ulteriori informazioni, consulta la sezione Spostarsi tra i frammenti utilizzando le animazioni.

Tieni presente i seguenti fattori:

  • Importa Transitions 1.5.0 o successiva e Fragments 1.7.0 o successiva. Gran parte del supporto predittivo per il dorso all'interno di Fragments si basa sulla capacità delle transizioni di ricercare le animazioni, il che è possibile solo nelle transizioni 1.5.0 o successive.
  • Utilizza i frammenti con FragmentManager o il componente di navigazione per gestire la pila di ritorno. Il pulsante Indietro predittivo non è supportato se gestisci il tuo stack Indietro. Esegui la migrazione dalle serie precedenti di cui FragmentManager non è a conoscenza.
  • Alcune librerie includono il supporto di Indietro predittivo. Per sicurezza, consulta la documentazione.
  • La classe Animator e la libreria AndroidX Transition sono supportate.
  • La classe Animation e la libreria del framework Transition non sono supportate.
  • Le animazioni predittive funzionano solo su dispositivi con Android 14 o versioni successive.

Utilizza i cross-fragment di ritorno predittivi nelle seguenti situazioni:

Alcuni movimenti dei materiali supportano il ritorno predittivo a partire dalla versione 1.12.02-alpha02 o successive, tra cui MaterialFadeThrough, MaterialSharedAxis e MaterialFade. Nota: MaterialContainerTransform non supporta il recupero predittivo.

Utilizza i callback

Puoi creare una transizione di frammenti incrociata utilizzando i callback. Tuttavia, esiste un limite noto quando utilizzi i callback, in cui gli utenti non possono vedere il frammento precedente quando scorrono indietro. Per creare una transizione di elementi condivisi tra frammenti che corrisponda alle linee guida di progettazione predittive, segui questi passaggi:

Crea un OnBackPressedCallback. In handleOnBackProgressed, scala e muovi il frammento. Quindi, estrailo dalla pila posteriore. Successivamente, esegui la transizione dell'elemento condiviso utilizzando setSharedElementReturnTransition all'esterno del callback.

Per maggiori informazioni, consulta l'esempio di codice su GitHub.

Requisiti

Utilizza la seguente tabella per capire cosa viene controllato da targetSdkVersion e compileSdkVersion, dalla versione del dispositivo, dalle dipendenze, dai flag manifest e dai flag dei frammenti. Questa tabella fa riferimento ai requisiti del codice.

Categoria Animazione compileSdk SDK target Versione dispositivo android:enableOnBackInvokedCallback Dipendenza
Animazioni di sistema Rientro a casa 33 Qualche 35 VERO Nessuno
Attività incrociata 34 Qualche 35 VERO Nessuno
Tra attività 34 Qualche 35 VERO Nessuno
Piattaforma Attività tra più canali personalizzata 34 Qualche 35 VERO Nessuno
Progress API Platform 34 Qualche 34 VERO Nessuno
Componenti Material Riquadro inferiore 34 Qualche 34 VERO Componente Material 1.10.0
Scheda secondaria 34 Qualche 34 VERO Componente Material 1.10.0
Riquadro di navigazione a scomparsa 34 Qualche 34 VERO Componente Material 1.10.0
Cerca 34 Qualche 34 VERO Componente Material 1.10.0
Animazioni Jetpack Componente cross-fragment AndroidX personalizzato 34 Qualche 34 VERO Frammento AndroidX 1.7
Transizioni AndroidX personalizzate 34 Qualche 34 VERO Transizione AndroidX 1.5
Jetpack API Progress 34 Qualche 34 VERO AndroidX Activity 1.8

Risorse aggiuntive