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 riportato di seguito:

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 indietro per tornare alla schermata delle impostazioni precedente, un esempio di animazione cross-activity.
  2. Nella schermata precedente, l'utente inizia a scorrere di nuovo a ritroso, mostrando un'anteprima della schermata Home con il relativo sfondo, un esempio dell'animazione per il ritorno a casa.
  3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra che si riduce all'icona nella 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 transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate delle proprietà in-app, animazioni di attività incrociata personalizzate e animazioni incrociate personalizzate con gesti indietro predittivi.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API di avanzamento del gesto Indietro predittivo per sviluppare animazioni personalizzate per il gesto Indietro predittivo nella tua app. Le API di avanzamento sono utili per animare le visualizzazioni, ma presentano limitazioni per l'animazione delle transizioni tra i frammenti. In OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti quando l'utente scorre verso il retro. Utilizza questi metodi se hai bisogno di creare animazioni diverse da quelle predefinite fornite dal sistema o dalle animazioni del componente materiale.

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 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 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 scene XML. In handleOnBackStarted, imposta TransitionSeekController sul risultato di TransitionManager.createSeekController anziché sul 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 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. 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.

Aggiunta del supporto per Indietro predittivo con frammenti

Esistono due approcci per implementare Torna indietro predittivo con i frammenti.

Utilizzare le API esistenti

Ti consigliamo di utilizzare le API esistenti. Queste API ti consentono di scorrere dal крае dello schermo per manipolare le transizioni Animator o AndroidX con il gesto. Se il gesto supera una soglia, viene completato e torni al frammento precedente oppure viene annullato e rimani nel frammento corrente. Per maggiori informazioni, vedi Navigare tra i frammenti utilizzando le animazioni.

Tieni presente i seguenti fattori:

  • Importa Transactions 1.5.0 o versioni successive e Fragments 1.7.0 o versioni successive. Gran parte del supporto della funzionalità Indietro predittiva all'interno di Fragment si basa sulla possibilità di Transitions di cercare animazioni, il che è possibile solo in Transitions 1.5.0 o versioni 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.
  • Il corso Animator e la libreria AndroidX Transition sono supportati.
  • La classe Animation e la libreria del framework Transition non sono supportate.
  • Le animazioni predittive funzionano solo sui dispositivi con Android 14 o versioni successive.

Utilizza i frammenti incrociati 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.

Utilizzare i callback

Puoi creare una transizione tra frammenti utilizzando i callback, ma esiste un limite noto quando si utilizzano i callback: gli utenti non possono vedere il frammento precedente quando scorrono verso il passato. 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 tabella seguente per capire cosa è controllato da targetSdkVersion e compileSdkVersion, versione del dispositivo, dipendenze, flag del manifest e flag dei frammenti. Questa tabella fa riferimento ai requisiti del codice.

Categoria Animazione compileSdk targetSdk Versione dispositivo android:enableOnBackInvokedCallback Dipendenza
Animazioni di sistema Torna alla home page 33 Qualche 35 VERO Nessuno
Tra attività 34 Qualche 35 VERO Nessuno
Cross-tasking 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 dei materiali Riquadro inferiore 34 Qualche 34 VERO Material Component 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
Jetpack - Animazioni Componente cross-fragment AndroidX personalizzato 34 Qualche 34 VERO AndroidX Fragment 1.7
Transizioni AndroidX personalizzate 34 Qualche 34 VERO Transizione AndroidX 1.5
API Progress Jetpack 34 Qualche 34 VERO AndroidX Activity 1.8

Risorse aggiuntive