Aggiungere il supporto per le animazioni predittive per la schiena

Quando utilizzi le API dell'interfaccia precedente del sistema, puoi scegliere di ricevere le animazioni in-app e per supportare transizioni personalizzate.

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:

• Riquadri inferiori
• Schede secondarie
• Ricerca

Consulta le indicazioni per gli sviluppatori dei componenti materiali su GitHub per ulteriori 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ù su come aggiungere il supporto per i gesti Indietro predittivi.

Aggiungere animazioni e transizioni in-app personalizzate

Puoi creare animazioni e transizioni personalizzate per le proprietà in-app, animazioni cross-activity e animazioni cross-frammenti personalizzate con funzionalità gesti Indietro.

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. Le API Progress sono utili per creare animazioni ma presentano delle limitazioni nell'animazione delle transizioni tra i frammenti. Entro OnBackPressedCallback abbiamo introdotto handleOnBackProgressed, handleOnBackCancelled e handleOnBackStarted per animare gli oggetti mentre l'utente scorre indietro. Utilizza questi metodi se avere bisogno di personalizzare di più rispetto alle animazioni predefinite fornite dal sistema, oppure le 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.

Nota: scopri come progettare transizioni e animazioni in-app personalizzate.

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>

Quando lavori con le transizioni predittive indietro, tieni presente quanto segue:

• 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 su dispositivi con Android 14 e e non sono compatibili 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 personalizzate all'attività supportino il ritorno predittivo 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.

  Nota: se exitAnim non è impostato o è impostato su 0, il valore cross-activity predefinito viene invece riprodotta l'animazione predittiva mostrata nel video precedente.

Aggiunta del supporto per Indietro predittivo con frammenti

Per l'implementazione del Indietro predittivo con i frammenti, esistono due approcci.

Usa le API esistenti

Ti consigliamo di utilizzare le API esistenti. Queste API ti consentono di scorrere bordo dello schermo per manipolare le transizioni di Animator o Androidx con gesto. Se sposti il gesto oltre una soglia, determina se è completata e torni al frammento precedente, oppure quest'ultimo viene annullato e rimangono sul frammento attuale. Per ulteriori informazioni, vedi Spostati tra i frammenti utilizzando le animazioni.

Tieni presente i seguenti fattori:

• Importa Transizioni 1.5.0 o in seguito e Fragments 1.7.0 o in un secondo momento. Gran parte del supporto predittivo per la schiena all'interno di Fragments si basa Le transizioni sono in grado di cercare animazioni, cosa possibile solo in Transizioni 1.5.0 o successive.
• Usa Frammenti con FragmentManager o Componente di navigazione, per gestire lo stack posteriore. Previsioni Indietro non è supportato se gestisci il tuo back stack.
• Alcune librerie includono il supporto predittivo Back. Consulta la documentazione per sicuro.
• Il corso Animator e La raccolta AndroidX Transition è supportati.
• Il corso Animation e la libreria Transition del framework non sono supportati.
• Le animazioni predittive funzionano solo su dispositivi con Android 14 o versioni successive.

Utilizza i frammenti incrociati 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 agli elementi condivisi con setSharedElementEnterTransition e setSharedElementReturnTransition.

Alcuni moti di materiale supporta il supporto predittivo a partire dal 1.12.02-alpha02 o superiore, inclusi MaterialFadeThrough, MaterialSharedAxis e MaterialFade. Nota: MaterialContainerTransform non supporta le funzionalità predittive indietro.

Utilizza i callback

Puoi creare una transizione tra frammenti utilizzando i callback, ma c'è una limitazione nota quando si utilizzano callback in cui gli utenti non possono vedere la precedente quando si scorre all'indietro. Per creare una transizione di elementi condivisi tra frammenti che corrisponde al valore predittivo linee guida sulla progettazione, seguenti:

Crea un OnBackPressedCallback. All'interno di handleOnBackProgressed, scala sposta il frammento. Quindi estraili dalla pila posteriore. Quindi, esegui l'elemento condiviso transizione utilizzando setSharedElementReturnTransition al di fuori del callback.

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

Requisiti

Utilizza le seguenti tabelle per capire cosa è controllato dalle Opzioni sviluppatore, targetSdkVersion e compileSdkVersion, versione del dispositivo, dipendenze e i flag del manifest e dei frammenti. La prima tabella fa riferimento ai requisiti del codice.

Categoria	Animazione	compileSdk	SDK target	android:enableOnBackInvokedCallback	Dipendenza
Animazioni di sistema	Torna alla home page	33	Qualche	VERO	Nessuno
	Attività incrociata	34	Qualche	VERO	Nessuno
	Cross-tasking	34	Qualche	VERO	Nessuno
Piattaforma	Cross-attività personalizzata	34	Qualche	VERO	Nessuno
	Piattaforma API Progress	34	Qualche	VERO	Nessuno
Componenti dei materiali	Riquadro inferiore	34	Qualche	VERO	Material Component 1.10.0
	Scheda secondaria	34	Qualche	VERO	Material Component 1.10.0
	Riquadro di navigazione a scomparsa	34	Qualche	VERO	Material Component 1.10.0
	Cerca	34	Qualche	VERO	Material Component 1.10.0
Jetpack - Animazioni	Frammento incrociato di AndroidX personalizzato	34	Qualche	VERO	Frammento AndroidX 1.7
	Transizioni AndroidX personalizzate	34	Qualche	VERO	Transizione AndroidX 1.5
	Jetpack API Progress	34	Qualche	VERO	AndroidX Attività 1.8

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

Categoria	Animazione	Opzione sviluppatore attivata	Versione dispositivo
Animazioni di sistema	Torna alla home page	VERO	33
	Attività incrociata	VERO	34
	Cross-tasking	VERO	34
Piattaforma	Cross-attività personalizzata	VERO	34
	Piattaforma API Progress	FALSO	34
Componenti dei materiali	Riquadro inferiore	FALSO	34
	Scheda secondaria	FALSO	34
	Riquadro di navigazione a scomparsa	FALSO	34
	Cerca	FALSO	34
Jetpack - Animazioni	Frammento incrociato di AndroidX personalizzato	FALSO	34
	Transizioni AndroidX personalizzate	FALSO	34
	Jetpack API Progress	FALSO	34

Risorse aggiuntive

• Esempi di codice predittivi di back
• Nozioni di base per i video di sistema indietro
• Costruire il futuro dei video Android