1

RecyclerView 104: reposicione itens de maneira interativa

#Kotlin #Android
Francisco Rasia
Francisco Rasia

Que tal deixar aquela lista ainda mais interativa usando o movimento de drag (arrastar e soltar) para reordenar os itens? A RecyclerView é o virtual padrão para exibir listas de dados, menus, botões e outros componentes com layouts ricos e comportamentos complexos. Ela também permite interações intuitivas e dinâmicas, tais como os movimentos de drag.

Esse é o último de uma série de artigos que exploro as interações fundamentais com a RecyclerView no Android com Kotlin.


🐱 O Pulo do gato


Vamos empregar uma classe utilitária ItemTouchHelper e seus callbacks, como visto no artigo anterior sobre os movimentos de swipe.


1. Adicionar as direções ao parâmetro dragDirs do ItemTouchHelper.SimpleCallback

Usar as constantes ItemTouchHelper.UP e ItemTouchHelper.DOWN para representar movimentos para cima e para baixo:


private fun inicializaTouchHelper() {
 val swipeHandler = object : ItemTouchHelper.SimpleCallback(
   ItemTouchHelper.UP or ItemTouchHelper.DOWN,
   ItemTouchHelper.START or ItemTouchHelper.END
 )


2. Modificar o retorno do método onMove() para true


override fun onMove(
       recyclerView: RecyclerView,
       viewHolder: RecyclerView.ViewHolder,
       target: RecyclerView.ViewHolder
     ): Boolean {
       return true //agora ele vai reagir aos movimentos...
     }


3. Implementar o comportamento onMove()


O método onMove recebe dois ViewHolders como parâmetro. O primeiro corresponde ao item que foi clicado e está sendo movido. O segundo ("target") representa a posição final, i.e., onde o item foi "largado". Vamos pegar as posições desses items usando a propriedade adapterPosition** e passá-las para o um método swap() do Adapter.


override fun onMove(
       recyclerView: RecyclerView,
       viewHolder: RecyclerView.ViewHolder,
       target: RecyclerView.ViewHolder
     ): Boolean {
       val origem = viewHolder.adapterPosition
       val destino = target.adapterPosition
       adapter.swap(origem, destino) // troque as posições
       return true
     }


4. Implementar o método swap no Adapter

A biblioteca Collections do Java nos dá um método para trocar itens de uma lista passando a lista, a posição de origem e a de destino.

Depois de trocar os itens é preciso chamar o método notifyItemMoved() para atualizar a visualização.


fun swap(origem: Int, destino: Int) {
 Collections.swap(lista, origem, destino)
 notifyItemMoved(origem, destino)
}


E pronto! Sua lista agora está ainda mais dinâmica e interativa.


🚀 Um exemplo prático

Vou utilizar como exemplo o projeto inspirado pelo módulo Conceitos de Navegação, Aparência e Estilo de Aplicativos Android (instrutor Igor Ferrani) no everis Kotlin Bootcamp aqui da DIO. Você pode baixar o projeto no meu repositório ou seguir o passo-a-passo em qualquer projeto seu que empregue RecyclerView.


💻 Repositório no github: https://github.com/chicorasia/bootcamp-lista-tarefas

Use o commit d761f43 e a branch recyclerview .


Confira o passo-a-passo no vídeo: 💊 Pílula de Kotlin - RecyclerView: Reordene itens de maneira interativa no Android com Kotlin https://youtu.be/cUuim33rszY


🏆 Conclusão

Nesse artigo nós vimos como expandir o uso da classe utilitária ItemTouchHelper para criar o comportamento de reordenar itens da RecyclerView com o movimento de drag.


📸

undraw.co

0
20

Comentários (1)

0
Isaias Bueno

Isaias Bueno

11/05/2021 13:37

Muito obrigado por essas excelentes dicas!

Arquiteto, urbanista, desenvolvedor Java & Android e criador em chefe na chicorialabs.com.br

Brasil