Cómo agregar compatibilidad con animaciones de atrás predictivo

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.

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.

1. 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.
2. 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.
3. 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.
4. 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 personalizadas con varias actividades y animaciones personalizadas con varios fragmentos con gestos de atrás predictivo.

Cómo agregar transiciones personalizadas en Jetpack Compose

Puedes usar PredictiveBackHandler para controlar los gestos de atrás predictivo en Jetpack Compose y crear transiciones personalizadas integradas en la app. Esta función está disponible en androidx.activity:activity-compose:1.8.0-alpha01 o versiones posteriores.

PredictiveBackHandler proporciona una expresión lambda de devolución de llamada que expone un Flow<BackEventCompat> que emite eventos a medida que el usuario desliza el dedo hacia atrás desde el borde. Estos eventos proporcionan información sobre la posición táctil del usuario, el borde de deslizamiento y, lo que es más importante, progress, que se puede usar para animar los componentes como parte del control del gesto de atrás.

En el siguiente fragmento, se muestra un ejemplo del uso de PredictiveBackHandler para animar un Surface que se reduce y se aleja con el progreso del gesto:

@Composable
fun DetailScreen(onBack: () -> Unit) {
    var scale by remember { mutableFloatStateOf(1f) }
    var xOffset by remember { mutableFloatStateOf(0f) }
    val scope = rememberCoroutineScope()

    PredictiveBackHandler { progressFlow ->
        try {
            progressFlow.collectLatest { backEvent ->
                scale = 1f - backEvent.progress
                xOffset = backEvent.progress * 100f
            }
            // User completed gesture
            onBack()
        } catch (e: CancellationException) {
            // User cancelled gesture
            // Animate scale and xOffset back to 1f and 0f respectively
            scope.launch {
                animate(scale, 1f) { value, _ -> scale = value }
            }
            scope.launch {
                animate(xOffset, 0f) { value, _ -> xOffset = value }
            }
        }
    }
    Box(Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Surface(
            modifier = Modifier
                .size(200.dp)
                .scale(scale)
                .offset(x = xOffset.dp, y = 0.dp),
            color = Color.Blue
        ) {}
    }
}