Cuando usas las APIs de retroceso del sistema, puedes habilitar la recepción de animaciones integradas en la app y admitir transiciones personalizadas.
Después de habilitar la función, tu app mostrará animaciones para volver a la página principal, cambiar de actividad y cambiar de tarea.
También puedes actualizar tu dependencia de componente de material a la versión 1.10.0 de MDC-Android para recibir animaciones de componentes de material como la siguiente:
Consulta la guía para desarrolladores sobre componentes de Material en GitHub para obtener más información.
En el video, se muestra un breve ejemplo de animaciones de atrás predictivo para cambiar de actividad y volver a la pantalla principal con la app de Configuración de Android.
- En la animación, el usuario desliza el dedo hacia atrás para volver a la pantalla de configuración anterior, un ejemplo de una animación de cambio de actividad.
- Ahora, en la pantalla anterior, el usuario comienza a deslizar el dedo hacia atrás por segunda vez y se muestra una vista previa de la pantalla principal con el fondo de pantalla, un ejemplo de la animación para volver a la pantalla principal.
- El usuario continúa deslizando el dedo hacia la derecha y se muestra una animación de la ventana que se reduce hasta el ícono de la pantalla principal.
- El usuario volvió por completo a la pantalla principal.
Obtén más información para agregar compatibilidad con gestos atrás predictivos.
Cómo agregar transiciones y animaciones personalizadas en la app
Puedes crear animaciones y transiciones personalizadas de propiedades integradas en la app, animaciones entre actividades y animaciones personalizadas de fragmentos cruzados con predicciones los gestos de retroceso.
Cómo agregar transiciones personalizadas con la API de Progress
Con AndroidX Activity 1.8.0-alpha01 o versiones posteriores, puedes usar el gesto atrás predictivo
APIs de Progress para desarrollar animaciones personalizadas para
el gesto atrás predictivo en tu app. Las APIs de Progress son útiles para animar
pero tienen limitaciones al momento de animar transiciones entre fragmentos. En un radio de
OnBackPressedCallback
Presentamos el
handleOnBackProgressed
,
handleOnBackCancelled
y
handleOnBackStarted
para animar objetos mientras el usuario desliza el dedo hacia atrás. Usa estos métodos si
necesitas personalizar más animaciones que las predeterminadas que proporciona el sistema
las animaciones de los componentes de Material.
Se espera que la mayoría de las apps usen las APIs de AndroidX retrocompatibles, pero también hay APIs de plataforma similares dentro de la interfaz de OnBackAnimationCallback
disponibles para probar en la Versión preliminar para desarrolladores 1 de Android 14 y versiones posteriores.
Cómo usar las APIs de Progress con transiciones de AndroidX
Las APIs de Progress se pueden usar con las transiciones de AndroidX 1.5.0-alpha01 o versiones posteriores en Android 14 y versiones posteriores para crear transiciones de atrás predictivo.
- Usa
TransitionManager#controlDelayedTransition
en lugar debeginDelayedTransition
para reproducir transiciones mientras el usuario desliza el dedo hacia atrás. - Crea la transición dentro de
handleOnBackStarted
. - Para reproducir la transición con el evento de atrás dentro de
handleOnBackProgressed
, vinculacurrentFraction
conBackEvent.progress
, lo que expone cuán lejos el usuario deslizó hacia atrás. - Finaliza la transición después de que el usuario confirme el gesto atrás en
handleOnBackPressed
. - Por último, restablece el estado de la transición en
handleOnBackCancelled
.
En el siguiente video, se muestra una transición personalizada con código Kotlin y XML entre dos cuadros implementada 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>
Cuando trabajes con transiciones de atrás predictivo, ten en cuenta lo siguiente:
- Usa
isSeekingSupported
para verificar si la transición admite el gesto atrás predictivo. - Anula
isSeekingSupported
para que se muestre verdadero en tus transiciones personalizadas. - Crea un controlador por animación.
- Las transiciones de atrás predictivo son compatibles con las transiciones de AndroidX, pero no con las transiciones del framework. Te recomendamos migrar desde las transiciones del framework.
- Las transiciones del gesto atrás predictivo se admiten en dispositivos que ejecutan Android 14 y versiones posteriores, y no ofrecen retrocompatibilidad.
- También se admiten las transiciones creadas con escenas XML. En
handleOnBackStarted
, establece tuTransitionSeekController
como el resultado deTransitionManager.createSeekController
en lugar del resultado decontrolDelayedTransition
.
Cómo agregar transiciones de actividades personalizadas en Android 14 y versiones posteriores
Para asegurarte de que las transiciones de actividades personalizadas admitan el gesto atrás predictivo en Android 14 y versiones posteriores, puedes usar overrideActivityTransition
en lugar de overridePendingTransition
. Esto significa que la animación de transición se reproduce a medida que el usuario desliza el dedo hacia atrás.
Para brindar un ejemplo de cómo podría funcionar esto, imagina una situación en la que la actividad B se encuentra sobre la actividad A en la pila de actividades. Las animaciones de actividades personalizadas se controlarían de la siguiente manera:
- Llama a las transiciones de apertura o cierre dentro del método
onCreate
de la actividad B. - Cuando el usuario navegue hacia la actividad B, usa
OVERRIDE_TRANSITION_OPEN
. Cuando el usuario deslice el dedo para volver a la actividad A, usaOVERRIDE_TRANSITION_CLOSE
. Al especificar
OVERRIDE_TRANSITION_CLOSE
,enterAnim
es la animación de entrada de la actividad A yexitAnim
es la animación de salida de la actividad B.
Cómo agregar compatibilidad con el gesto atrás predictivo con fragmentos
Cuando implementas el gesto atrás predictivo con fragmentos, existen dos enfoques.
Usa APIs existentes
Te recomendamos que uses las APIs existentes. Estas API te permiten deslizar el dedo de la pantalla para manipular las transiciones de Animator o Androidx con el gesto. El hecho de mover el gesto más allá de un umbral determina si es completado y regresarás al fragmento anterior, o que se haya cancelado, y permanecerán en el fragmento actual. Para obtener más información, consulta Cómo navegar entre fragmentos con animaciones.
Ten en cuenta los siguientes factores:
- Importa Transitions 1.5.0 o una versión posterior y Fragments 1.7.0 o una versión posterior. Gran parte de la compatibilidad con el gesto atrás predictivo depende de que Transitions pueda buscar animaciones, lo que solo ocurre a partir de la versión 1.5.0.
- Usa Fragments, con
FragmentManager
o el componente Navigation, para controlar la pila de actividades. El gesto atrás predictivo no se admitirá si administras tu propia pila de actividades. - Algunas bibliotecas incluyen compatibilidad con el gesto atrás predictivo. Consulta la documentación para confirmar.
- Se admiten la clase
Animator
y la bibliotecaAndroidX Transition
. - La clase
Animation
y la biblioteca del frameworkTransition
no son compatibles. - Las animaciones predictivas solo funcionan en dispositivos que ejecutan Android 14 o versiones posteriores.
Usa fragmentos cruzados para el gesto atrás predictivo en las siguientes situaciones:
- Animar el componente Navigation
- Animar con
setCustomAnimations
- Anima las transiciones de entrada y salida con
setEnterTransition
.setExitTransition
,setReenterTransition
ysetReturnTransition
. - Anima las transiciones de elementos compartidos con
setSharedElementEnterTransition
ysetSharedElementReturnTransition
Algunos movimientos de material
admiten el gesto atrás predictivo a partir del
1.12.02-alpha02
o versiones posteriores, incluidas MaterialFadeThrough
, MaterialSharedAxis
y
MaterialFade
Nota: MaterialContainerTransform
no admite predicciones
de vuelta.
Usa devoluciones de llamada
Puedes crear una transición entre fragmentos usando devoluciones de llamada. Sin embargo, existe una limitación conocida cuando se usan devoluciones de llamada en las que los usuarios no pueden ver la configuración al deslizar hacia atrás. Cómo crear una transición de elementos compartidos entre fragmentos que corresponde al gesto atrás predictivo orientación de diseño, lo siguiente:
Crea un OnBackPressedCallback
. En handleOnBackProgressed
, escala y
cambiar el fragmento. Luego, saca de la pila de actividades. Luego, ejecuta el elemento compartido
de transición con setSharedElementReturnTransition
fuera de la devolución de llamada.
Para obtener más información, consulta la muestra de código en GitHub.
Requisitos
Usa las siguientes tablas para comprender qué controla las Opciones para desarrolladores, targetSdkVersion
y compileSdkVersion
, la versión del dispositivo, las dependencias, las marcas del manifiesto y las marcas de fragmento. La primera tabla se refiere a los requisitos de código.
Categoría | Animación | compileSDK | targetSDK | android:enableOnBackInvokedCallback | Dependencia |
---|---|---|---|---|---|
Animaciones del sistema | Volver a la página principal | 33 | Cualquiera | VERDADERO | Ninguno |
Actividades cruzadas | 34 | Cualquiera | VERDADERO | Ninguno | |
Tareas cruzadas | 34 | Cualquiera | VERDADERO | Ninguno | |
Plataforma | Personalización actividades cruzadas | 34 | Cualquiera | VERDADERO | Ninguno |
Plataforma de API de Progress | 34 | Cualquiera | VERDADERO | Ninguno | |
Componentes de Material | Hoja inferior | 34 | Cualquiera | VERDADERO | Material Component 1.10.0 |
Hoja lateral | 34 | Cualquiera | VERDADERO | Material Component 1.10.0 | |
Panel lateral de navegación | 34 | Cualquiera | VERDADERO | Material Component 1.10.0 | |
Búsqueda | 34 | Cualquiera | VERDADERO | Material Component 1.10.0 | |
Animaciones de Jetpack | Fragmento cruzado de AndroidX personalizado | 34 | Cualquiera | VERDADERO | AndroidX Fragment 1.7 |
Transiciones personalizadas de AndroidX | 34 | Cualquiera | VERDADERO | AndroidX Transition 1.5 | |
API de Progress de Jetpack | 34 | Cualquiera | VERDADERO | AndroidX Activity 1.8 |
En la siguiente tabla, se hace referencia a los requisitos que permiten a los usuarios ver animaciones.
Categoría | Animación | Opciones para desarrolladores habilitada | Versión de dispositivo |
---|---|---|---|
Animaciones del sistema | Volver a la página principal | VERDADERO | 33 |
Actividades cruzadas | VERDADERO | 34 | |
Tareas cruzadas | VERDADERO | 34 | |
Plataforma | Personalización actividades cruzadas | VERDADERO | 34 |
Plataforma de API de Progress | FALSO | 34 | |
Componentes de Material | Hoja inferior | FALSO | 34 |
Hoja lateral | FALSO | 34 | |
Panel lateral de navegación | FALSO | 34 | |
Búsqueda | FALSO | 34 | |
Animaciones de Jetpack | Fragmento cruzado de AndroidX personalizado | FALSO | 34 |
Transiciones personalizadas de AndroidX | FALSO | 34 | |
API de Progress de Jetpack | FALSO | 34 |
Recursos adicionales
- Muestras de código del gesto atrás predictivo
- Video sobre los aspectos básicos del botón Atrás del sistema
- Video sobre cómo construimos el futuro de Android