Quando utilizzi le API dell'interfaccia precedente del sistema, puoi scegliere di ricevere le animazioni in-app e per supportare transizioni personalizzate.
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:
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.
- Nell'animazione, l'utente scorre indietro per tornare alle impostazioni precedenti schermata: un esempio di animazione cross-activity.
- 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.
- L'utente continua a scorrere verso destra, mostrando un'animazione della finestra. e si riduce all'icona nella schermata Home.
- 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.
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.
- Utilizza
TransitionManager#controlDelayedTransition
al posto dibeginDelayedTransition
per riprodurre le transizioni come l'utente scorre indietro. - Crea la transizione all'interno di
handleOnBackStarted
. - Riproduci la transizione con l'evento arretrato entro
handleOnBackProgressed
entro il giorno relativa acurrentFraction
aBackEvent.progress
, che mostra quanto l'utente è tornato indietro. - Termina la transizione dopo che l'utente ha confermato il gesto Indietro in
handleOnBackPressed
. - 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
, impostaTransitionSeekController
sul risultato diTransitionManager.createSeekController
anziché il risultato dicontrolDelayedTransition
,
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, usaOVERRIDE_TRANSITION_CLOSE
. Quando specifichi
OVERRIDE_TRANSITION_CLOSE
, il valoreenterAnim
è l'attività A inserisci l'animazione eexitAnim
è l'animazione di uscita dell'attività B.
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 raccoltaAndroidX Transition
è supportati. - Il corso
Animation
e la libreriaTransition
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
esetReturnTransition
. - Anima le transizioni agli elementi condivisi con
setSharedElementEnterTransition
esetSharedElementReturnTransition
.
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