Aggiungi il supporto per le animazioni predittive Indietro predittive integrate e personalizzate

Se hai già eseguito la migrazione della tua app alle nuove API di sistema, puoi attivare la funzionalità predittiva per ricevere automaticamente animazioni in-app e supportare anche transizioni personalizzate.

Aggiunta del supporto per le animazioni in-app integrate

Video: animazioni predittive sulla schiena

Dopo l'attivazione, l'app mostra animazioni per ritorno alla home page, attività incrociate e attività incrociate.

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

Per ulteriori informazioni, consulta le linee guida per gli sviluppatori dei componenti materiali su GitHub.

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

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

Scopri di più sul supporto della funzione indietro predittiva.

Aggiungere animazioni e transizioni in-app personalizzate

Puoi creare animazioni e transizioni di proprietà in-app personalizzate utilizzando l'API Progress e il metodo di animazioni interattività personalizzate overrideActivityTransition.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con l'Attività di AndroidX 1.8.0-alpha01 o versioni successive, puoi utilizzare le API predittive di avanzamento indietro per sviluppare animazioni personalizzate per il gesto Indietro predittivo nella tua app. All'interno di 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 qualcosa di più personalizzato rispetto alle animazioni predefinite fornite dalle nuove animazioni di sistema o da quelle del componente Material.

Prevediamo che la maggior parte delle app usi le API AndroidX compatibili con le versioni precedenti, ma esistono anche API per piattaforme simili nell'interfaccia OnBackAnimationCallback, disponibili per i 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 Transactions 1.5.0-alpha01 o versioni successive su Android 14 e versioni successive per creare transizioni di tipo Indietro predittivo.

  1. Usa TransitionManager#controlDelayedTransition invece di 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 arretrato 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 all'interno di handleOnBackCancelled.

I seguenti video, codici 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 lavori con 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. Consigliamo di abbandonare le transizioni dei framework.
  • Le transizioni predittive indietro 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. In handleOnBackStarted, imposta TransitionSeekController sul risultato di TransitionManager.createSeekController anziché sul risultato controlDelayedTransition.

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

Per fare in modo che le transizioni di attività personalizzate supportino la previsione su Android 14 e versioni successive, puoi usare overrideActivityTransition anziché overridePendingTransition. Ciò significa che 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 sopra l'attività A nello stack posteriore. Puoi gestire le animazioni di attività personalizzate nel seguente modo:

  • Richiama le transizioni di apertura o chiusura all'interno del metodo onCreate dell'attività B.
  • Quando l'utente accede 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.