Aggiunta del supporto per le animazioni Indietro predittive integrate e personalizzate

Se hai già eseguito la migrazione dell'app alle API del nuovo sistema, puoi attiva il pulsante predittivo per ricevere automaticamente in-app e supportano le transizioni personalizzate.

Aggiunta del supporto per le animazioni in-app integrate

di Gemini Advanced.
Video: animazioni precedenti predittive

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

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

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

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

  1. Nell'animazione, l'utente scorre indietro per tornare alle impostazioni precedenti schermata: un esempio di animazione cross-activity.
  2. Nella schermata precedente, l'utente inizia a scorrere indietro una seconda volta, che mostra un'anteprima della schermata Home con il suo sfondo, un esempio di l'animazione del rientro a casa.
  3. L'utente continua a scorrere verso destra, mostrando un'animazione della finestra. e si riduce all'icona nella schermata Home.
  4. L'utente è tornato completamente alla schermata Home.

Scopri di più sul supporto della funzionalità Indietro predittiva.

Aggiungere animazioni e transizioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate nelle proprietà in-app utilizzando il API Progress e 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 il modello Fai progredire le API per sviluppare animazioni personalizzate per il gesto Indietro predittivo nell'app. Entro OnBackPressedCallback abbiamo introdotto i handleOnBackProgressed, i handleOnBackCancelled e handleOnBackStarted metodi per animare oggetti mentre l'utente scorre indietro. Utilizza le funzionalità di questi metodi se hai bisogno di qualcosa di più personalizzato rispetto alle animazioni predefinite fornite dalle nuove animazioni di sistema o dalle animazioni del componente Materiale.

Ci aspettiamo che la maggior parte delle app usi le API AndroidX compatibili con le versioni precedenti, ma API di piattaforme simili all'interno OnBackAnimationCallback disponibile per i test 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 Transizione 1.5.0-alpha01 o versione successiva su Android 14 e versioni successive per creare transizioni predittive indietro.

  1. Utilizza TransitionManager#controlDelayedTransition al posto di beginDelayedTransition per riprodurre le transizioni come l'utente scorre indietro.
  2. Crea la transizione all'interno di handleOnBackStarted.
  3. Riproduci la transizione con l'evento arretrato entro handleOnBackProgressed entro il giorno relativa a currentFraction a BackEvent.progress, che mostra quanto l'utente è tornato 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 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>

Tieni presente quanto segue quando lavori con le transizioni predittive indietro:

  • 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 Back sono supportate con le transizioni AndroidX, ma non con le transizioni del framework. Consigliamo di eseguire la migrazione dal framework transizioni.
  • Le transizioni predittive indietro sono supportate sui dispositivi con Android 14 e versioni successive e sono non compatibile con le versioni precedenti.
  • Sono supportate anche le transizioni create con scene XML. Nella handleOnBackStarted, imposta TransitionSeekController sul risultato di TransitionManager.createSeekController anziché il risultato di controlDelayedTransition,

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

Per garantire che le transizioni di attività personalizzate supportino la funzionalità predittiva su Android 14 e versioni successive, puoi utilizzare overrideActivityTransition al posto di overridePendingTransition. Ciò significa che l'animazione di transizione viene riprodotta 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 nello stack posteriore. Dovresti gestire le impostazioni personalizzate Animazioni di attività nel seguente modo:

  • Chiama le transizioni di apertura o chiusura nell'attività onCreate dell'attività B .
  • Quando l'utente accede all'attività B, usa OVERRIDE_TRANSITION_OPEN. Quando l'utente fa scorrere il dito per tornare all'attività A, usa OVERRIDE_TRANSITION_CLOSE.

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