A animação de deslizar para dispensar transmite a transição quando os usuários acessam a página anterior.
Os detalhes da animação do gesto de deslizar para dispensar são semelhantes ao pressionamento do RSB. O dedo controla o progresso da animação em até 50%.
Há uma outra animação na visualização do app que está vinculada ao gesto de dispensar. A quantidade de movimentos mostrados na visualização do app não é exatamente igual à distância que o dedo se move. A visualização do app nunca pode sair da borda da tela. Um efeito de compressão com alguma resistência é mostrado na borda.
Implementação
O Wear tem a própria versão de Box,
SwipeToDismissBox.
Ela adiciona suporte ao gesto de deslizar para dispensar, que é semelhante ao botão "Voltar" em dispositivos móveis.
SwipeToDismissBox é o elemento combinável que pode ser dispensado deslizando para a direita.
Para usar SwipeToDismissBox, crie um estado primeiro. O estado contém
informações sobre a direção do gesto de deslizar, se uma animação está em execução, o valor
atual e o alvo, entre outras. O exemplo abaixo mostra como projetar um
gesto simples de deslizar para dispensar uma ação:
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 mais informações sobre como usar SwipeToDismissBox em conjunto com a biblioteca Navigation, consulte os documentos de referência para a biblioteca Wear Compose Navigation.
Design
Ao projetar o gesto de deslizar para dispensar uma ação, não esqueça destes dois princípios:
Borda da tela
Considere outros elementos de IU que podem ser deslizados, por exemplo, visualizações de apps paginadas. Quando for possível deslizar para dispensar, reserve 20% da borda da tela para acionar esse movimento.
Confira este exemplo da base de código do Compose Material para Wear OS. um exemplo de deslizar de borda quando o conteúdo pode ser rolado horizontalmente.
Limite para voltar ou permanecer na visualização do app
Se o usuário tiver arrastado o dedo sobre mais de 50% da largura da tela e soltar o dedo, o app vai precisar acionar o restante da animação de deslizar para trás. Se a distância percorrida for menor que isso, o app vai voltar à visualização completa.
Se o gesto for rápido, ignore a regra de limite de 50% e deslize para trás.