Aggiunta del supporto per animazioni d'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 le transizioni personalizzate.

Aggiunta del supporto per le animazioni in-app integrate

Video: animazioni predittive all'indietro

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:

Per ulteriori informazioni, consulta le linee guida per gli sviluppatori dei componenti di materiale 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ù sul supporto del ritorno predittivo.

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 cross-attività personalizzate overrideActivityTransition.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API avanzamento predittivo per sviluppare animazioni personalizzate per il gesto Indietro predittivo nell'app. All'interno di OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti quando 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 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>

Tieni presente quanto segue quando utilizzi le transizioni Indietro predittivo:

  • 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 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 fare in modo che le transizioni di attività personalizzate supportino la previsione 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.