Gestos no Jetpack Compose: introdução

Aprenda a implementar diferentes gestos no Jetpack Compose e forneça ao seu aplicativo uma experiência de usuário intuitiva.

Os gestos são essenciais para um aplicativo móvel porque promovem uma experiência de usuário intuitiva e criam uma interface mais limpa. Livre-se da interface do usuário desajeitada e use a interação de gestos comuns para tornar seu aplicativo mais agradável. Pequenas mudanças podem melhorar seu aplicativo.

A migração de layouts baseados em XML para o Compose mudou muito a forma como criamos gestos. Neste tutorial, você aprenderá como instalar os seguintes gestos no novo Composição do Jetpack paradigma:

• Como responder a toques simples em botões e outros tipos de visualização.
• Manipulação toques duplos nos itens da lista.
• Rolagem listas de itens uniformes e itens não uniformes.
• Deslizando para dispensar conteúdo em listas.

Começando

Você trabalhará em um aplicativo de lista de tarefas para entender melhor os gestos comuns e como integrá-los no Compose.

Use o Baixar materiais botão na parte superior ou inferior deste tutorial para baixar o projeto. Abra o projeto inicial em Android Studio. Você verá a tela inicial do aplicativo de lista de tarefas:

Se você começar a explorar os arquivos, Inside ui pasta, você verá dois compostos principais: TodoListComposable.kt e TodoEditorComposable.kt. Essas são as duas telas principais que fornecem uma lista de itens pendentes e um editor para adicionar itens e modificar os anteriores.

No entanto, você não pode interagir com nada no aplicativo neste momento. Você atualizará isso com o poder dos gestos.

Introdução aos gestos do Jetpack Compose

Se você estiver desenvolvendo interface do usuário em layouts baseados em XML, poderá se perguntar como adicionar ouvintes aos componentes do Jetpack Compose. Na maioria das vezes, você não precisa. Em vez de adicionar ouvintes a visualizações infladas, ao trabalhar com o Jetpack Compose, você pode adicionar modificadores e gesto retornos de chamada diretamente aos composables quando você os declara.

Detecção de toques

Torneiras são a forma mais simples e importante de interação em aplicativos móveis. Eles significam pressionar e soltar um único dedo para indicar a seleção. Em seu aplicativo, eles são necessários para interagir com todos os botões e itens da lista de tarefas.

Toque único

Primeiro, abra TodoListComposable.kt e substitua o TODO: Add click event comentar dentro do onClick ligue de volta.

onClick = { navController.navigate(Destinations.EDITOR_ROUTE) },

Isso agora navegará para a tela do editor para a criação de um novo item de tarefas pendentes.

Em seguida, adicione este retorno de chamada em TodoEditorComposable.kt para substituir o TODO: Add click event comente no save Button:

onClick = {
  todo?.let {
    // Update item if it already exists
    todoEditorViewModel.updateTodo(todo, title = title.value, content = content.value)
  } ?: run {
    // Add new item if one doesn't already exist
    todoEditorViewModel.saveTodo(title = title.value, content = content.value)
  }

  // Navigate back to the to-do list screen after saving changes
  navController.popBackStack()
}

Esta ação salva um novo evento — se a tela foi navegada sem um item de tarefa, mas apenas atualiza o item se um foi passado. Em seguida, ele retorna à lista de tarefas, abrindo a pilha de volta.

Agora, adicione um clickable modificador para o item da lista de tarefas em TodoListComposable.kt onde pergunta TODO: Add clickable modifier.

.clickable {
  navController.navigate(
    "${Destinations.EDITOR_ROUTE}?${NavigationParameters.EDITOR_ITEM_KEY}=${item.id}"
  )
}

Isso usa a navegação Compose para navegar até a tela do editor e passar o ID do item de tarefa pendente como um argumento de navegação. Observe que adicionamos o clickable modificador para a linha inteira. Ele abrirá o editor para o item ao clicar.

Compile e execute o aplicativo. Você deve ser capaz de interagir com todos os botões e a lista de tarefas agora.

Você poderia adicionar o clickable modificador para um elemento dentro da linha para tornar uma determinada seção clicável. Somente esse elemento acionaria a ação.

Agora é hora de aprender o toque duplo!

Toque duas vezes para estrelar

O próximo recurso em que você trabalhará é tornar os elementos da lista de tarefas “estrela” para chamar a atenção para eles. No aplicativo atual, um único clique não é possível porque abre o editor. Você pode adicionar um botão de estrela vazio no qual o usuário pode tocar uma vez para marcar o item com estrela, mas isso começará a inchar a interface do usuário. Em vez disso, podemos usar outro gesto comum – toque duplo.

Os toques duplos são adicionados em um modificador ligeiramente diferente do botão mais genérico onClick. Adicione o seguinte modificador à linha em TodoListComposable.kt rotulado TODO: Add pointer input modifier.

.pointerInput(Unit) {
  detectTapGestures(
    onDoubleTap = { todoListViewModel.toggleStarred(item) }
  )
}

o detectTapGestures função permite mais flexibilidade para detectar entradas de tap, que incluem:

• onPress — a pressão inicial de um toque é detectada pela primeira vez.
• onDoubleTap — dois toques em rápida sucessão.
• onLongPress — um único toque pressionado.
• onTap — depois de uma única pressão e soltura.

O uso desses gestos adicionais permite expandir a gama de interações com menos código adicional.

Porque o detectTapGestures modificador também pode aceitar toques únicos, você pode se livrar do modificador clicável e adicionar essa ação ao detectTapGestures função, se você quiser limpar um pouco o código.

.pointerInput(Unit) {
  detectTapGestures(
    onTap = { 
      navController.navigate("${Destinations.EDITOR_ROUTE}?${NavigationParameters.EDITOR_ITEM_KEY}=${item.id}") 
    },
    onDoubleTap = { todoListViewModel.toggleStarred(item) }
  )
}

Compile e execute o aplicativo. Ele deve marcar e desmarcar uma linha com um toque duplo.

Manipulando gestos de rolagem

Você só pode exibir alguns itens de uma vez e, em seguida, precisa rolar para mostrar o que está fora da tela. Rolagem desempenha aqui o papel de um gesto essencial.

Comportamento de rolagem padrão

Tornar o conteúdo rolável acontece de duas maneiras principais: colocando-o em um Coluna/Linha ou em um LazyColumn/LazyRow. Uma coluna/linha regular não é rolável por padrão, mas temos um modificador para isso!

LazyColumn/LazyRow são roláveis ​​por padrão, mas normalmente são usados ​​apenas para listas homogêneas de elementos ou listas longas que não podem renderizar tudo de uma vez.

Atualmente, tanto a tela de lista quanto a tela do editor são implementadas com Colunas, que não suporta rolagem. Isso pode causar grandes disfunções com o aplicativo. Você tem uma série de elementos repetidos na tela da lista, o que é um bom local para um LazyColumn.

Dentro TodoListComposable.ktencontre o // TODO: Change to LazyColumn comentar e substituir o existente Column implementação com o seguinte LazyColumn:

LazyColumn(modifier = Modifier.padding(16.dp), content = { 
  items(items) {
    TodoListItem(it, todoListViewModel, navController)
  }
})

Este código é quase idêntico ao código anterior, exceto que usa LazyColumn em vez de Column para aproveitar a rolagem automática. Ele usa o built-in items função para gerar uma lista de elementos homogêneos de uma lista de dados.

E assim, a lista de tarefas rola! Você pode testá-lo adicionando um monte de novas tarefas usando o botão de adição na tela da lista:

E quando tiver o suficiente, você pode arrastar a lista para cima e para baixo:

A tela do editor não tem elementos repetidos, mas ainda será útil tê-la rolável caso o conteúdo de entrada se espalhe além da tela. Você pode adicionar um modificador rolável regular ao Column contendo entradas do editor para permitir a rolagem para fora da tela.

Abrir TodoEditorComposable.kt e substitua o // TODO: Add vertical scroll código com o seguinte modificador.

.verticalScroll(rememberScrollState())

Isso permite que a Coluna role quando o conteúdo sai da tela e fornece um detentor de estado para armazenar a posição de rolagem e manipular a recomposição.

Compile e execute o aplicativo. Agora você pode escrever um manuscrito inteiro no item de tarefas e ser capaz de ver tudo.

Deslize para dispensar

Você ainda precisa de uma maneira de remover itens de tarefas sem adicionar botões adicionais e manter sua interface do usuário organizada e bonita!

Um gesto frequentemente usado para este caso de uso é “deslizar para dispensar”. Ele funciona arrastando um elemento para a esquerda ou para a direita e, uma vez que o item ultrapassa um determinado limite, ele desliza para fora da tela e aciona uma ação.

Este é um uso tão comum que agora faz parte do androidx.compose.material biblioteca como seu próprio composable. O primeiro passo é criar um detentor de estado dentro da composição do item da lista. Você pode adicionar o seguinte código no TODO: Add swipe to dismiss state dentro TodoListComposable.kt.

val dismissState = rememberDismissState(confirmStateChange = {
  if (it == DismissValue.DismissedToEnd) {
    todoListViewModel.removeTodo(item)
  }
  true
})

Isso cria a ação associada ao SwipeToDismiss componente. Ele será acionado quando o elemento for passado, chamando o método de modelo de exibição para remover o item de linha.

A seguir, adicione o SwipeToDismiss componente. Dentro TodoListComposable.ktsubstituir TODO: Wrap with swipe to dismiss e a TodoListRowContent chamada de função com:

SwipeToDismiss(
  state = dismissState,
  dismissThresholds = { FractionalThreshold(0.5f) },
  directions = setOf(DismissDirection.StartToEnd),
  // TODO: Add top layer UI
  // TODO: Add bottom layer UI
)

• o Estado O argumento passa o detentor do estado SwipeToDismiss, que aciona ações de alteração de estado.
• o limite impede acionar o estado até que o elemento tenha sido arrastado por uma certa proporção da tela. Nesse caso, a linha deve estar acima de 50% da tela antes de ser descartada.
• finalmente, o instruções diz ao componente para permitir apenas arrastar da esquerda para a direita. Se o usuário tentar arrastar para o outro lado, ele se moverá nessa direção antes de retornar à sua posição normal. É útil porque você pode querer ações específicas do contexto, como arquivar se um usuário arrastar para a esquerda e excluir se um usuário arrastar para a direita. Se você adicionar outras direções aqui, também deverá atualizar o detentor do estado para lidar com essas alterações de estado.

Agora você pode adicionar a parte da interface do usuário do composable. Adicione o seguinte snippet como um argumento para SwipeToDismiss onde o TODO: Add top layer UI é.

dismissContent = {
  TodoListRowContent(item, todoListViewModel, navController)
},

A interface do usuário para SwipeToDismiss é composta por duas camadas: a camada superior conteúdo da linha e o fundo conteúdo que é exposto quando a camada superior é removida. o dismissContent é o conteúdo de nível superior enquanto o background é a camada abaixo dela, que é visível ao deslizar o dedo.

Nesse caso, você pode adicionar um ícone de lixeira para o fundo para indicar que a ação de dispensa removerá o elemento da lista. Adicione o seguinte abaixo do dismissContent argumento.

background = {
  Icon(
    painterResource(id = R.drawable.ic_baseline_delete_outline_24),
    modifier = Modifier
      .size(30.dp)
      .align(Alignment.CenterVertically),
    contentDescription = null,
    tint = Color.Red
  )
}

Isso adiciona um ícone de lixeira atrás do conteúdo da linha original para que, quando o usuário deslizar a linha, a intenção da ação fique clara.

Você pode executar o aplicativo agora e ver seu novo gesto de deslizar para dispensar. No entanto, você pode notar uma pegadinha final.

Quando você desliza para excluir um item, ele não desliza completamente para fora da tela. Isso ocorre porque os itens que podem ser compostos estão sendo reciclados na LazyColumn, mas as alterações do conjunto de dados subjacentes não são capazes de transmitir a recomposição. Para informar ao LazyColumn que os dados subjacentes devem recompor o elemento, atualize a criação do item LazyColumn com:

items(items, key = { it.id }) {
 ...
}

A chave associada ao ID de dados informa ao LazyColumn que cada elemento de dados deve corresponder ao seu próprio composto e deve atualize o composable quando os dados forem alterados. Compile e execute o aplicativo. Você deve ver o deslize para dispensar funcionando como um encanto!

Para onde ir a partir daqui?

Você pode baixar o projeto final usando o botão Download de materiais na parte superior ou inferior deste tutorial.

Os gestos abordados neste tutorial devem ajudá-lo na maioria dos cenários, mas se você precisar implementar outros, confira a Documentação Oficial.

Você também pode continuar aprendendo sobre o Jetpack Compose no livro Jetpack Compose by Tutorials.

Continue sua jornada no Jetpack Compose. Muito resta a explorar. :]

Se você tiver alguma dúvida ou comentário, participe da discussão do fórum abaixo!