Deslize para dispensar

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.