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 (link em inglês) para conferir um exemplo de deslizamento 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.