Quando utilizzi le API di sistema, puoi attivare la ricezione di animazioni in-app e il supporto delle transizioni personalizzate.
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 indicazioni per gli sviluppatori dei componenti di materiali 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.
- Nell'animazione, l'utente scorre all'indietro per tornare alla schermata delle impostazioni precedente, un esempio di animazione con attività incrociata.
- 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.
- L'utente continua a scorrere verso destra, mostrando un'animazione della finestra che si riduce fino a diventare l'icona sulla schermata Home.
- L'utente è ora completamente tornato alla schermata Home.
Scopri di più su come aggiungere il supporto per i gesti d'indietro predittivi.
Aggiungere animazioni e transizioni in-app personalizzate
Puoi creare animazioni e transizioni di proprietà in-app personalizzate, animazioni cross-activity personalizzate e animazioni personalizzate con frammenti con gesti predittivi per il retro.
Aggiungere transizioni personalizzate utilizzando l'API Progress
Con AndroidX Activity 1.8.0-alpha01 o versioni successive, puoi utilizzare le API Avanzamento
indietro predittivo per sviluppare animazioni personalizzate per
il gesto Indietro predittivo nell'app. Le API Avanzamento sono utili per l'animazione delle viste, ma hanno delle limitazioni quando anima le transizioni tra frammenti. In
OnBackPressedCallback
abbiamo introdotto i metodi
handleOnBackProgressed
,
handleOnBackCancelled
e
handleOnBackStarted
per animare gli oggetti mentre l'utente scorre all'indietro. Utilizza questi metodi se devi personalizzare altre animazioni rispetto alle animazioni predefinite fornite dal sistema o alle animazioni 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.
- Usa
TransitionManager#controlDelayedTransition
invece dibeginDelayedTransition
per riprodurre le transizioni quando l'utente scorre indietro. - Crea la transizione entro
handleOnBackStarted
. - Riproduci la transizione con l'evento back-end all'interno di
handleOnBackProgressed
mettendo in relazionecurrentFraction
conBackEvent.progress
, che mostra quanto l'utente ha fatto scorrere a ritroso. - Completa la transizione dopo che l'utente ha confermato il gesto Indietro in
handleOnBackPressed
. - 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>
Quando utilizzi le transizioni Indietro predittivo, tieni presente quanto segue:
- 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 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
, impostaTransitionSeekController
sul risultato diTransitionManager.createSeekController
anziché sul risultatocontrolDelayedTransition
.
Aggiungere transizioni personalizzate delle attività 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
. 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, utilizzaOVERRIDE_TRANSITION_CLOSE
. Quando specifichi
OVERRIDE_TRANSITION_CLOSE
,enterAnim
è l'animazione di entrata dell'attività A, mentreexitAnim
è l'animazione di uscita dell'attività B.
Aggiunta del supporto per Indietro predittivo con frammenti
Quando implementi Indietro predittivo con frammenti, ci sono due approcci.
Usa 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. Lo spostamento del gesto oltre una soglia determina se quest'ultimo è stato completato e se torni al frammento precedente oppure se il gesto viene annullato e ti resti sul frammento attuale. Per maggiori informazioni, consulta Spostati tra i frammenti utilizzando le animazioni.
Tieni presente i seguenti fattori:
- Importa Transizioni 1.5.0 o successive e Frammenti 1.7.0 o versioni successive. Gran parte del supporto posteriore predittivo all'interno dei frammenti si basa sulla possibilità per le transizioni di cercare animazioni, operazione che è possibile solo nelle transizioni 1.5.0 o successive.
- Utilizza i frammenti, con
FragmentManager
o con il componente di navigazione, per gestire lo stack posteriore. La funzionalità Indietro predittivo non è supportata se gestisci un back stack personale. - Alcune librerie includono il supporto Indietro predittivo. Controlla la documentazione per averne la certezza.
- Il corso
Animator
e la libreriaAndroidX Transition
sono supportati. - La libreria
Animation
e il frameworkTransition
non sono supportati. - Le animazioni predittive funzionano solo su dispositivi con Android 14 o versioni successive.
Utilizza i frammenti incrociati indietro 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 degli elementi condivisi con
setSharedElementEnterTransition
esetSharedElementReturnTransition
.
Alcuni movimenti dei materiali supportano il ritorno predittivo a partire dalla data 1.12.02-alpha02 o successiva, tra cui MaterialFadeThrough
, MaterialSharedAxis
e MaterialFade
. Nota: MaterialContainerTransform
non supporta
il ritorno predittivo.
Utilizzare i callback
Puoi creare una transizione tra frammenti utilizzando i callback. Tuttavia, esiste un limite noto quando si utilizzano i callback in cui gli utenti non possono vedere il frammento precedente scorrendo all'indietro. Per creare una transizione di elementi condivisi tra frammenti corrispondente alle linee guida sulla progettazione predittive, procedi nel seguente modo:
Crea un OnBackPressedCallback
. All'interno di handleOnBackProgressed
, scala e sposta il frammento. Poi, salta dalla pila posteriore. Quindi, esegui la transizione degli elementi condivisi utilizzando setSharedElementReturnTransition
al di fuori del callback.
Per maggiori informazioni, consulta l'esempio di codice su GitHub.
Requisiti
Usa le seguenti tabelle per capire cosa viene controllato dalle opzioni sviluppatore, targetSdkVersion
e compileSdkVersion
, versione del dispositivo, dipendenze, flag del file manifest e flag 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 | Qualsiasi | VERO | Nessun valore |
Attività incrociata | 34 | Qualsiasi | VERO | Nessun valore | |
Attività incrociata | 34 | Qualsiasi | VERO | Nessun valore | |
Piattaforma | Attività incrociata personalizzata | 34 | Qualsiasi | VERO | Nessun valore |
Piattaforma API Progress | 34 | Qualsiasi | VERO | Nessun valore | |
Componenti materiali | Riquadro inferiore | 34 | Qualsiasi | VERO | Material Componente 1.10.0 |
Scheda secondaria | 34 | Qualsiasi | VERO | Material Componente 1.10.0 | |
Riquadro di navigazione a scomparsa | 34 | Qualsiasi | VERO | Material Componente 1.10.0 | |
Cerca | 34 | Qualsiasi | VERO | Material Componente 1.10.0 | |
Animazioni jetpack | Frammento incrociato AndroidX personalizzato | 34 | Qualsiasi | VERO | Frammento AndroidX 1.7 |
Transizioni AndroidX personalizzate | 34 | Qualsiasi | VERO | Transizione AndroidX 1.5 | |
Jetpack API Progress | 34 | Qualsiasi | VERO | Attività di AndroidX 1.8 |
La seguente tabella 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 | |
Attività incrociata | VERO | 34 | |
Piattaforma | Attività incrociata personalizzata | VERO | 34 |
Piattaforma API Progress | FALSO | 34 | |
Componenti materiali | Riquadro inferiore | FALSO | 34 |
Scheda secondaria | FALSO | 34 | |
Riquadro di navigazione a scomparsa | FALSO | 34 | |
Cerca | FALSO | 34 | |
Animazioni jetpack | Frammento incrociato AndroidX personalizzato | FALSO | 34 |
Transizioni AndroidX personalizzate | FALSO | 34 | |
Jetpack API Progress | FALSO | 34 |
Risorse aggiuntive
- Esempi di codice indietro predittivo
- Nozioni di base per video a ritroso di sistema
- Costruire il futuro dei video Android