Atrás predictivo en Compose

El gesto atrás predictivo, una función de navegación por gestos, permite a los usuarios obtener una vista previa del lugar al que los lleva el gesto de deslizar hacia atrás. El gesto atrás predictivo se integra sin problemas en Compose para mejorar la experiencia de navegación de tu app. Los usuarios disfrutan de transiciones más fluidas e intuitivas cuando navegan hacia atrás en tu app. En la Figura 1, se muestra cómo funciona esto en la app de ejemplo SociaLite.

Figura 1: La animación de volver a la pantalla principal en la app de ejemplo de SociaLite.

En esta guía, se describe cómo hacer lo siguiente con el gesto atrás predictivo:

  • Acepta el gesto atrás predictivo
  • Habilita las animaciones predeterminadas del sistema
  • Habilita el gesto atrás predictivo con Navigation Compose
  • Cómo realizar integraciones con transiciones de elementos compartidos
  • Cómo admitir el gesto atrás predictivo con componentes de Material Compose
  • Accede al progreso de forma manual con PredictiveBackHandler
  • Prueba la animación del gesto de retroceso predictivo

Acepta el gesto atrás predictivo

Para habilitar las animaciones de atrás predictivo, debes habilitar la compatibilidad con el gesto atrás predictivo. Para habilitarlo, agrega "android:enableOnBackInvokedCallback="true" a la etiqueta <application> o a las etiquetas <activity> individuales dentro del archivo AndroidManifest.xml.

Habilita las animaciones predeterminadas del sistema

Las animaciones del sistema para volver a la pantalla principal, cambiar de actividad y cambiar de tarea están disponibles en dispositivos con Android 15 y versiones posteriores para las apps que migraron a las APIs de control de atrás compatibles.

  • Botón de regreso a la pantalla principal: Regresa al usuario a la pantalla principal.
  • Entre actividades: Son transiciones entre actividades dentro de la app.
  • Tareas cruzadas: Transiciones entre tareas.

Estas animaciones están habilitadas de forma predeterminada en Android 15 y versiones posteriores. En dispositivos que ejecutan Android 13 o 14, los usuarios pueden habilitarlos a través de las Opciones para desarrolladores.

Para obtener las animaciones del sistema, actualiza la dependencia Activity de AndroidX a 1.6.0 o una versión posterior.

Habilita el gesto atrás predictivo con Navigation Compose

Para usar el gesto atrás predictivo en Navigation Compose, asegúrate de usar la biblioteca de navigation-compose 2.8.0 o una versión posterior.

Navigation Compose realiza una transición entre pantallas automáticamente cuando el usuario desliza el dedo hacia atrás:

Figura 2: La animación de encadenado predeterminada integrada en la app de SociaLite.

Cuando navegas, puedes crear transiciones personalizadas con popEnterTransition y popExitTransition. Cuando se aplican a tu NavHost, estos modificadores te permiten definir cómo se animan las pantallas de entrada y salida. Puedes usarlos para crear una variedad de efectos, como escalamiento, desvanecimiento o deslizamiento.

En este ejemplo, se usa scaleOut dentro de popExitTransition para reducir la pantalla de salida a medida que el usuario navega hacia atrás. Además, el parámetro transformOrigin determina el punto alrededor del cual se produce la animación de escalamiento. De forma predeterminada, es el centro de la pantalla (0.5f, 0.5f). Puedes ajustar este valor para que el escalamiento se origine desde un punto diferente.

NavHost(
    navController = navController,
    startDestination = Home,
    popExitTransition = {
        scaleOut(
            targetScale = 0.9f,
            transformOrigin = TransformOrigin(pivotFractionX = 0.5f, pivotFractionY = 0.5f)
        )
    },
    popEnterTransition = {
        EnterTransition.None
    },
    modifier = modifier,
)
PredictiveBackSnippets.kt

Este código produce el siguiente resultado:

Figura 3: Una animación integrada en la app personalizada en SociaLite.

popEnterTransition y popExitTransition controlan específicamente las animaciones cuando se muestra la pila de actividades, por ejemplo, con un gesto atrás. También puedes usar enterTransition y exitTransition para definir animaciones para ingresar a elementos componibles y salir de ellos en general, no solo para el gesto atrás predictivo. Si solo configuras enterTransition y exitTransition, se usan para la navegación normal y para quitar la pila de actividades. Sin embargo, usar popEnterTransition y popExitTransition te permite crear animaciones distintas para la navegación hacia atrás.

Cómo realizar integraciones con transiciones de elementos compartidos

Las transiciones de elementos compartidos proporcionan una conexión visual fluida entre los elementos componibles con contenido compartido, que se suelen usar para la navegación.

Figura 4: Transición de elementos compartidos con el gesto atrás predictivo en Navigation Compose.

Para usar elementos compartidos con Navigation Compose, consulta Atrás predictivo con elementos compartidos.

Compatibilidad con el gesto atrás predictivo con componentes de Material Compose

Muchos componentes de la biblioteca de Material Compose están diseñados para funcionar sin problemas con los gestos atrás predictivos. Para habilitar las animaciones de atrás predictivo en estos componentes, incluye la dependencia Material3 más reciente (androidx.compose.material3:material3-*:1.3.0 o versiones posteriores) en tu proyecto.

Entre los componentes de Material que admiten animaciones de atrás predictivo, se incluyen los siguientes:

SearchBar y ModalBottomSheet se animan automáticamente con gestos atrás predictivos. ModalNavigationDrawer, ModalDrawerSheet, DismissibleDrawerSheet y DismissibleNavigationDrawer requieren que pases el drawerState a sus respectivos elementos componibles de contenido de hoja.

Accede al progreso de forma manual con PredictiveBackHandler

El elemento componible PredictiveBackHandler[5] en Jetpack Compose te permite interceptar el gesto atrás y acceder a su progreso. Puedes reaccionar al gesto atrás del usuario en tiempo real y crear animaciones o comportamientos personalizados en función de la distancia que el usuario desliza.

Para usar PredictiveBackHandler, asegúrate de usar androidx.activity:activity:1.6.0 o una versión posterior.

PredictiveBackHandler proporciona un Flow<BackEventCompat> que emite eventos que representan el progreso del gesto atrás. Cada evento contiene información como la siguiente:

  • progress: Un valor de punto flotante entre 0 y 1 que indica el progreso del gesto atrás (0 = se inició el gesto, 1 = se completó el gesto).
  • touchX y touchY: Son las coordenadas X e Y del evento táctil.

En el siguiente fragmento, se muestra el uso básico de PredictiveBackHandler:

PredictiveBackHandler(true) { progress: Flow<BackEventCompat> ->
    // code for gesture back started
    try {
        progress.collect { backEvent ->
            // code for progress
            boxScale = 1F - (1F * backEvent.progress)
        }
        // code for completion
        boxScale = 0F
    } catch (e: CancellationException) {
        // code for cancellation
        boxScale = 1F
    }
}
PredictiveBackSnippets.kt

Ejemplo: Cómo realizar la integración con un panel lateral de navegación

En este ejemplo, se muestra cómo implementar una animación personalizada en la app con PredictiveBackHandler para crear una interacción fluida con un panel de navegación en respuesta a gestos atrás en JetLagged:

Figure 5: Panel lateral de navegación con compatibilidad con el gesto atrás predictivo.

En este ejemplo, se usa PredictiveBackHandler para lo siguiente:

  • Realiza un seguimiento del progreso del gesto atrás.
  • Actualiza el translationX del panel lateral según el progreso del gesto.
  • Usa un velocityTracker para abrir o cerrar el panel lateral sin problemas según la velocidad del gesto cuando se complete o cancele.

Prueba la animación del gesto de retroceso predictivo

Si aún usas Android 13 o Android 14, puedes probar la animación de volver a la pantalla principal.

Para probar esta animación, sigue estos pasos:

  1. En tu dispositivo, ve a Configuración > Sistema > Opciones para desarrolladores.
  2. Selecciona Animaciones del gesto atrás predictivo.
  3. Inicia la app actualizada y usa el gesto de retroceso para verlo en acción.

En Android 15 y versiones posteriores, esta función está habilitada de forma predeterminada.

Recursos adicionales