Aggiungere il supporto per le animazioni predittive per la schiena

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

Dopo l'attivazione, l'app mostra le animazioni per il ritorno alla schermata Home, il passaggio da un'attività all'altra e il passaggio da un'app all'altra.

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

• Bottom sheet
• Fogli laterali
• Ricerca

Per maggiori informazioni, consulta la guida per gli sviluppatori di componenti Material su GitHub.

Il video mostra un breve esempio di animazioni per il gesto Indietro predittivo per passare da un'attività all'altra e tornare alla schermata Home utilizzando l'app Impostazioni di Android.

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

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

Aggiungere transizioni e animazioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate delle proprietà in-app, animazioni personalizzate tra attività e animazioni personalizzate tra frammenti con gesti di indietro predittivi.

Aggiungere transizioni personalizzate utilizzando l'API Progress

Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API Predictive Back Progress per sviluppare animazioni personalizzate per il gesto di navigazione indietro predittiva nella tua app. Le API Progress sono utili per animare le visualizzazioni, ma presentano limitazioni quando si animano le transizioni tra i fragment. In OnBackPressedCallback abbiamo introdotto i metodi handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti mentre l'utente scorre indietro. Utilizza questi metodi se devi personalizzare più delle animazioni predefinite fornite dal sistema o le animazioni dei componenti Material.

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

Utilizzare le API Progress con AndroidX Transitions

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 di navigazione predittiva.

1. Utilizza TransitionManager#controlDelayedTransition anziché beginDelayedTransition per riprodurre le transizioni quando l'utente scorre indietro.
2. Crea la transizione all'interno di handleOnBackStarted.
3. Riproduci la transizione con l'evento Indietro entro handleOnBackProgressed mettendo in relazione currentFraction a BackEvent.progress, che mostra la distanza percorsa dall'utente con lo scorrimento indietro.
4. Termina la transizione dopo che l'utente ha eseguito il gesto Indietro in handleOnBackPressed.
5. Infine, reimposta lo stato della transizione all'interno di handleOnBackCancelled.

Il seguente video, codice Kotlin e XML mostra una transizione personalizzata tra due caselle implementata 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 di Predictive Back, tieni presente quanto segue:

• Utilizza isSeekingSupported per verificare se la transizione supporta la funzionalità Indietro predittivo.
• Esegui l'override di isSeekingSupported per restituire il valore true per le transizioni personalizzate.
• Crea un controller per animazione.
• Le transizioni di Predictive Back sono supportate con le transizioni AndroidX, ma non con le transizioni del framework. Esegui la migrazione dalle transizioni del framework e utilizza invece le transizioni Animator e AndroidX.
• Le transizioni di Indietro predittivo 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 di controlDelayedTransition.

Aggiungere transizioni di attività personalizzate 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. Ciò significa che l'animazione di transizione viene riprodotta quando 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 indietro. Gestisci le animazioni personalizzate delle attività nel seguente modo:

• Chiama le transizioni di apertura o chiusura all'interno del metodo onCreate di Activity B.
• Quando l'utente passa 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 e exitAnim è l'animazione di uscita dell'attività B.

Aggiungi il supporto per Indietro predittivo con i fragment

Quando implementi Indietro predittivo con i fragment, esistono due approcci.

Utilizzare 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. Se il gesto supera una soglia, viene completato e torni al fragment precedente. In caso contrario, viene annullato e rimani nel fragment corrente. Per ulteriori informazioni, consulta la sezione Navigare tra i fragment utilizzando le animazioni.

Tieni presente i seguenti fattori:

• Importa Transitions 1.5.0 o versioni successive e Fragments 1.7.0 o versioni successive. Gran parte del supporto della navigazione indietro predittiva all'interno dei fragment si basa sulla possibilità di cercare animazioni nelle transizioni, cosa possibile solo nelle transizioni 1.5.0 o versioni successive.
• Utilizza i fragment, con FragmentManager o il componente Navigation, per gestire lo stack indietro. La navigazione indietro predittiva non è supportata se gestisci il tuo stack di attività. Esegui la migrazione dalle back stack che FragmentManager non conosce.
• Alcune librerie includono il supporto della navigazione predittiva. Controlla la documentazione per assicurarti.
• Sono supportate la classe Animator e la libreria AndroidX Transition.
• La classe Animation e la libreria del framework Transition non sono supportate.
• Le animazioni predittive funzionano solo sui dispositivi con Android 14 o versioni successive.

Utilizza la navigazione predittiva indietro tra i fragment nelle seguenti situazioni:

• Anima il 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 movimenti dei materiali supportano l'indietro predittivo a partire dalla versione 1.12.02-alpha02 o successive, tra cui MaterialFadeThrough, MaterialSharedAxis e MaterialFade. Nota: MaterialContainerTransform non supporta la navigazione predittiva.

Utilizzare i callback

Puoi creare una transizione tra frammenti utilizzando i callback, ma esiste una limitazione nota quando si utilizzano 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 per la navigazione predittiva indietro, segui questi passaggi:

Crea un OnBackPressedCallback. All'interno di handleOnBackProgressed, ridimensiona e sposta il frammento. Quindi, estrai la scheda dalla pila posteriore. Successivamente, esegui la transizione dell'elemento condiviso utilizzando setSharedElementReturnTransition al di fuori del callback.

Per maggiori informazioni, consulta il codice campione su GitHub.

Requisiti

Utilizza la seguente tabella per capire cosa viene controllato datargetSdkVersion e compileSdkVersion, dalla versione del dispositivo, dalle dipendenze, dai flag del manifest e dai flag dei fragment. Questa tabella si riferisce ai requisiti del codice.

Risorse aggiuntive

• Esempi di codice per la navigazione predittiva
• Nozioni di base per il video di backup del sistema
• Creare il futuro dei video su Android