La animación de deslizar para descartar representa la transición cuando los usuarios navegan a la página anterior.
Los detalles de la animación de deslizar para descartar son similares a los de presionar un botón lateral giratorio (RSB). Tu dedo controla el progreso de la animación hasta un 50%.
Hay una animación adicional en la vista de la app que está vinculada al gesto para descartar. La cantidad de movimiento que se muestra en la vista de la app no es exactamente la misma que la distancia que debe mover el dedo. La vista de la app nunca debe salir del borde de la pantalla, lo que muestra un efecto similar a apretar con cierta resistencia.
Implementación
Wear tiene su propia versión de Box, SwipeToDismissBox.
Agrega compatibilidad con el gesto de deslizar para descartar, que es similar al botón Atrás en dispositivos móviles.
SwipeToDismissBox es un elemento que admite composición y que se puede descartar si se desliza el dedo hacia la derecha.
Para usar SwipeToDismissBox, primero debes crear un estado. El estado incluye información sobre la dirección del deslizamiento, si una animación se está ejecutando, el valor actual y el objetivo, y mucho más. En el siguiente ejemplo, se muestra el diseño de un deslizamiento simple para descartar la acción:
val state = rememberSwipeToDismissBoxState()
SwipeToDismissBox(
onDismissed = { /* navigateBack */ },
) { isBackground ->
if (isBackground) {
Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.secondaryVariant))
} else {
Column(
modifier = Modifier.fillMaxSize().background(MaterialTheme.colors.primary),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Text("Swipe to dismiss", color = MaterialTheme.colors.onPrimary)
}
}
}
Para obtener más información sobre el uso de SwipeToDismissBox junto con la biblioteca de Navigation, consulta los documentos de referencia para la biblioteca de Wear Compose Navigation.
Diseño
Cuando diseñes el gesto de deslizar para descartar la acción, ten en cuenta los siguientes dos principios:
El borde de la pantalla
Ten en cuenta otros elementos de la IU que se pueden deslizar, como las vistas de app paginadas. Cuando sea posible deslizar para descartar, conserva un 20% del borde de la pantalla a fin de activar ese movimiento.
Consulta este ejemplo de la base de código de Compose Material para Wear OS para ver un ejemplo de deslizamiento en el borde cuando el contenido se puede desplazar horizontalmente.
El umbral para volver o permanecer en la vista de la app
Si el usuario arrastró el dedo por más del 50% del ancho de la pantalla, la app debería activar el resto de la animación del deslizamiento hacia atrás. Si el porcentaje es menor, la app debería volver a la vista completa de la app.
Si el gesto es rápido, ignora la regla del umbral del 50% y desliza hacia atrás.