L'animation Swipe to dismiss (Balayer pour ignorer) permet de transmettre la transition lorsque les utilisateurs accèdent à la page précédente.
Les détails de l'animation à balayer pour ignorer sont semblables à l'appui RSB. Votre doigt contrôle la progression de l'animation jusqu'à 50 %.
Il existe une animation supplémentaire sur l'affichage de l'application qui est liée au geste d'abandon. La quantité de mouvements affichée dans la vue de l'application n'est pas exactement identique à la distance nécessaire pour déplacer le doigt. L'affichage de l'application ne doit jamais quitter le bord de l'écran et doit avoir un effet de pression avec une légère résistance.
Mise en œuvre
Wear possède sa propre version de Box, SwipeToDismissBox.
Elle ajoute la prise en charge du "défiler pour ignorer", ce qui est semblable au bouton "Retour" sur mobile.
SwipeToDismissBox est un composable qui peut être ignoré en balayant l'écran vers la droite.
Pour utiliser SwipeToDismissBox, vous devez d'abord créer un état. L'état contient des informations sur la direction du balayage, si une animation est en cours d'exécution, la valeur actuelle et la cible, etc. L'exemple suivant montre comment concevoir un balayage simple pour ignorer l'action :
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)
}
}
}
Pour en savoir plus sur l'utilisation de SwipeToDismissBox avec la bibliothèque de navigation, consultez la documentation de référence sur la bibliothèque de navigation Wear Compose.
Conception
Lorsque vous concevez l'action de balayage pour ignorer, tenez compte des deux principes suivants :
Bord de l'écran
Tenez compte des autres éléments d'interface utilisateur à faire glisser, tels que les affichages d'application paginés. Lorsque vous pouvez balayer l'écran pour ignorer, réservez 20 % du bord de l'écran pour déclencher ce mouvement.
Consultez cet exemple issu du codebase Compose Material pour Wear OS. pour obtenir un exemple de balayage par le bord lorsqu'il est possible de faire défiler le contenu horizontalement.
Seuil nécessaire pour revenir en arrière ou rester dans la vue de l'application
Si l'utilisateur a fait glisser son doigt sur plus de 50 % de la largeur de l'écran, l'application doit déclencher le reste de l'animation de balayage. Si ce n'est pas le cas, l'application devrait revenir à la vue complète de l'application.
Si le geste est rapide, ignorez la règle du seuil de 50 % et balayez l'écran.