Aggiungere il supporto per le animazioni predittive per la schiena

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

Dopo l'attivazione, l'app mostra animazioni per funzionalità per tornare alla home page, cross-attività e cross-tasking.

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

• Fogli inferiori
• Schede laterali
• Cerca

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

Il video mostra un breve esempio di animazioni predittive all'indietro per cross-activity e per il ritorno a casa utilizzando l'app Impostazioni Android.

1. Nell'animazione, l'utente scorre all'indietro per tornare alla schermata delle impostazioni precedente, un esempio di animazione con attività incrociata.
2. Ora sulla schermata precedente, l'utente inizia a scorrere una seconda volta, mostrando un'anteprima della schermata Home con il suo sfondo, un esempio dell'animazione di ritorno alla home page.
3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra che si riduce fino a diventare l'icona sulla schermata Home.
4. L'utente è ora completamente tornato alla schermata Home.

Scopri di più su come aggiungere il supporto per i gesti d'indietro predittivi.

Aggiungere animazioni e transizioni in-app personalizzate

Puoi creare animazioni e transizioni di proprietà in-app personalizzate, animazioni cross-activity personalizzate e animazioni personalizzate con frammenti con gesti predittivi per il retro.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API Avanzamento indietro predittivo per sviluppare animazioni personalizzate per il gesto Indietro predittivo nell'app. Le API Avanzamento sono utili per l'animazione delle viste, ma hanno delle limitazioni quando anima le transizioni tra frammenti. In OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti mentre l'utente scorre all'indietro. Utilizza questi metodi se devi personalizzare altre animazioni rispetto alle animazioni predefinite fornite dal sistema o alle animazioni del componente Material.

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

Usare le API Progress con AndroidX Transiziones

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

1. Usa TransitionManager#controlDelayedTransition invece di beginDelayedTransition per riprodurre le transizioni quando l'utente scorre indietro.
2. Crea la transizione entro handleOnBackStarted.
3. Riproduci la transizione con l'evento back-end all'interno di handleOnBackProgressed mettendo in relazione currentFraction con BackEvent.progress, che mostra quanto l'utente ha fatto scorrere a ritroso.
4. Completa la transizione dopo che l'utente ha confermato il gesto Indietro in handleOnBackPressed.
5. Infine, reimposta lo stato della transizione entro handleOnBackCancelled.

Il seguente video, codice Kotlin e 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 utilizzi le transizioni Indietro predittivo, tieni presente quanto segue:

• Usa isSeekingSupported per verificare se la transizione supporta la funzionalità Indietro predittivo.
• Esegui l'override di 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 del framework. Ti consigliamo di abbandonare le transizioni del framework.
• Le transizioni predittive indietro 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 controlDelayedTransition.

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

Per assicurarti che le transizioni di attività personalizzate supportino la funzionalità Indietro predittivo su Android 14 e versioni successive, puoi utilizzare overrideActivityTransition anziché overridePendingTransition. L'animazione di transizione viene riprodotta mentre l'utente scorre indietro.

Per fornire un esempio di come funziona, immagina uno scenario in cui l'Attività B si trova 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 con il metodo onCreate dell'Attività B.
• Quando l'utente va 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, mentre exitAnim è l'animazione di uscita dell'attività B.

Aggiunta del supporto per Indietro predittivo con frammenti

Quando implementi Indietro predittivo con frammenti, ci sono 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. Lo spostamento del gesto oltre una soglia determina se quest'ultimo è stato completato e se torni al frammento precedente oppure se il gesto viene annullato e ti resti sul frammento attuale. Per maggiori informazioni, consulta Spostati tra i frammenti utilizzando le animazioni.

Tieni presente i seguenti fattori:

• Importa Transizioni 1.5.0 o successive e Frammenti 1.7.0 o versioni successive. Gran parte del supporto posteriore predittivo all'interno dei frammenti si basa sulla possibilità per le transizioni di cercare animazioni, operazione che è possibile solo nelle transizioni 1.5.0 o successive.
• Utilizza i frammenti, con FragmentManager o con il componente di navigazione, per gestire lo stack posteriore. La funzionalità Indietro predittivo non è supportata se gestisci un back stack personale.
• Alcune librerie includono il supporto Indietro predittivo. Controlla la documentazione per averne la certezza.
• Il corso Animator e la libreria AndroidX Transition sono supportati.
• La libreria Animation e il framework Transition non sono supportati.
• Le animazioni predittive funzionano solo su dispositivi con Android 14 o versioni successive.

Utilizza i frammenti incrociati indietro predittivi nelle seguenti situazioni:

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

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

Utilizzare i callback

Puoi creare una transizione tra frammenti utilizzando i callback. Tuttavia, esiste un limite noto quando si utilizzano i callback in cui gli utenti non possono vedere il frammento precedente scorrendo all'indietro. Per creare una transizione di elementi condivisi tra frammenti corrispondente alle linee guida sulla progettazione predittive, procedi nel seguente modo:

Crea un OnBackPressedCallback. All'interno di handleOnBackProgressed, scala e sposta il frammento. Poi, salta dalla pila posteriore. Quindi, esegui la transizione degli elementi condivisi utilizzando setSharedElementReturnTransition al di fuori del callback.

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

Requisiti

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

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

Risorse aggiuntive

• Esempi di codice indietro predittivo
• Nozioni di base per video a ritroso di sistema
• Costruire il futuro dei video Android