Aggiungere il supporto per le animazioni predittive per la schiena

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

Dopo l'attivazione, l'app mostra animazioni per rientro a casa, cross-activity e cross-task.

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:

• Riquadri inferiori
• Schede secondarie
• Cerca

Per maggiori informazioni, consulta le indicazioni per gli sviluppatori dei componenti materiali su GitHub.

Il video mostra un breve esempio di animazioni predittive per la schiena e il rientro a casa 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 rientro.
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 Indietro predittivi.

Aggiungere animazioni e transizioni 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 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 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 usi le API AndroidX compatibili con le versioni precedenti, ma nell'interfaccia OnBackAnimationCallback sono disponibili anche API di piattaforma simili per essere testate nell'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 predittive Back.

1. Utilizza TransitionManager#controlDelayedTransition anziché beginDelayedTransition per riprodurre le transizioni mentre l'utente scorre indietro.
2. Crea la transizione all'interno di handleOnBackStarted.
3. Riproduci la transizione con l'evento Indietro all'interno di handleOnBackProgressed collegando currentFraction a BackEvent.progress, che mostra quanto l'utente è passato indietro.
4. Termina la transizione dopo che l'utente ha confermato il gesto Indietro in handleOnBackPressed.
5. Infine, reimposta lo stato della transizione all'interno di 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>

Quando lavori con le transizioni predittive indietro, tieni presente quanto segue:

• 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 predittive indietro sono supportate con le transizioni AndroidX, ma non con le transizioni framework. Consigliamo di abbandonare le transizioni del framework.
• Le transizioni predittive indietro sono supportate su 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 garantire che le transizioni personalizzate delle attività supportino il ritorno 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 trovi in cima all'attività A nello stack precedente. Puoi gestire le animazioni di attività personalizzate nel seguente modo:

• Chiama le transizioni di apertura o chiusura nel metodo onCreate dell'attività B.
• Quando l'utente accede all'attività B, usa OVERRIDE_TRANSITION_OPEN. Quando l'utente scorre per tornare all'attività A, usa OVERRIDE_TRANSITION_CLOSE.

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

Aggiunta del supporto per Indietro predittivo con frammenti

Per l'implementazione del Indietro predittivo con i 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 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 predittivo per il dorso all'interno di Fragments fa affidamento sulla capacità delle transizioni di ricercare le animazioni, il che è possibile solo nelle transizioni 1.5.0 o successive.
• Utilizza Frammenti, con FragmentManager o con il componente di navigazione, per gestire lo stack posteriore. Indietro predittivo non è supportato se gestisci il tuo back stack.
• Alcune librerie includono il supporto predittivo Back. Controlla la documentazione per sicurezza.
• Il corso Animator e la libreria AndroidX Transition sono supportati.
• Il corso Animation e la libreria Transition del framework non sono supportati.
• Le animazioni predittive funzionano solo su dispositivi con Android 14 o versioni successive.

Utilizza i frammenti incrociati predittivi nelle seguenti situazioni:

• Applica l'animazione al componente di navigazione.
• Crea animazioni con setCustomAnimations.
• Anima le transizioni di entrata e uscita con setEnterTransition, setExitTransition, setReenterTransition e setReturnTransition.
• Anima le transizioni degli elementi condivisi con setSharedElementEnterTransition e setSharedElementReturnTransition.

Alcuni moti dei materiali supportano i dati predittivi a partire dal giorno 1.12.02-alpha02 o versioni successive, tra cui MaterialFadeThrough, MaterialSharedAxis e MaterialFade. Nota: MaterialContainerTransform non supporta il metodo 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. All'interno di handleOnBackProgressed, ridimensiona e sposta il frammento. Quindi estraili dalla pila posteriore. Poi, esegui la transizione degli elementi condivisi utilizzando setSharedElementReturnTransition al di fuori del callback.

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

Requisiti

Utilizza le tabelle seguenti per capire cosa è controllato dalle opzioni sviluppatore, targetSdkVersion e compileSdkVersion, dalla versione del dispositivo, dalle dipendenze, dai flag manifest e dai flag dei frammenti. La prima tabella fa riferimento ai requisiti del codice.

La tabella seguente fa riferimento ai requisiti che consentono agli utenti di visualizzare le animazioni.

Risorse aggiuntive

• Esempi di codice predittivi di back
• Nozioni di base per i video di sistema indietro
• Costruire il futuro dei video Android