Interfaces Fluidas — Drag and Drop
Cibele Paulino e Mateus Rodrigues
Introdução
Através do Drag and Drop é possível mover graficamente um “objeto” de uma aplicação para outra ou numa mesma aplicação. É possível trabalhar com múltiplas seleções, selecionando vários objetos com dedos diferentes e oferecendo uma grande experiência multi-touch e fluidez de interface ao usuário.
O recurso oferece um leque de possibilidades maior para aplicações desenvolvidas para o iPad, como poder “arrastar” elementos entre diferentes aplicativos, oferecendo uma experiência mais completa em relação ao iPhone. Apesar dessas limitações, ainda há varias ações de Drag and Drop que podem ser implementadas para aplicações destinadas ao iPhone.
O objetivo deste material é oferecer um tutorial com os primeiros passos para implementar o Drag and Drop em uma aplicação iOS. No fim do tutorial, os links dos projetos utilizados estarão disponíveis para consulta.
Implementação
Os princípios de funcionamento essenciais da API se dividem em: Fazer com que os objetos sejam arrastados, obter uma proposta de arrastar e, enfim, executar a queda. Neste tutorial, usaremos uma aplicação simples para iPad, constituída de uma imagem e um texto e dois campos destinados a receber esses objetos.
Para implementar o Drag and Drop em uma aplicação iOS, primeiramente precisamos adicionar interações do tipo UIDragInteraction e UIDropInteraction nas Views a serem trabalhadas, no método ViewDidLoad:
OBS.: Por padrão, as interações de drag vem desabilitadas no iPhone. Para habilitar, precisamos definir a propriedade isEnabled de dragImageInteraction e dragTextInteraction como true.
Existem três métodos essenciais para o desenvolvimento de uma aplicação com Drag and Drop, são eles:
UIDragInteractionDelegate
O método itemsForBeginning é usado para "pegar"(Drag) o item. É chamado ao clicar no objeto a ser arrastado.
UIDropInteractionDelegate
Dois métodos são chamados nesse momento: O sessionDidUpdate e o performDrop, nessa sequência.
O sessionDidUpdate destaca o item para indicar as operações possíveis. Uma session é iniciada no momento em que o usuário inicia a ação de toque no elemento e, é finalizada, quando o toque é retirado.
Um enum — UIDropOperation — guarda as quatro operações possíveis, ou seja, o que acontece quando o usuário solta o objeto que foi arrastado. São elas:
- .cancel: Cancela a operação e nenhum dado é movido ou copiado;
- .forbidden: É como cancelar a operação, no entanto, é possível que o usuário veja, através do símbolo indicativo que aparece no elemento, que aquela ação é proibida naquele cenário;
- .copy: Os dados devem ser copiados para o lugar de destino. Nesse caso, um símbolo indicativo é visível para o usuário;
- .move: Os dados devem ser movidos para o lugar de destino. Nesse caso não é feita a copia dos dados, nenhum símbolo indicativo é visível para o usuário.
Já o performDrop recupera os objetos a serem soltos a partir dos itens de uma UIDropSession, este método é chamado quando o toque é retirado do elemento sobre a posição de destino.
Múltipla seleção
É possível trabalhar utilizando múltiplas seleções com o Drag and Drop, incluindo de "tipos" diferentes. Nesse caso, utiliza-se o método itemsForAddingTo. Esse método retorna um array de itens com os elementos selecionados ou nil.
OBS: A ação de mover vários itens não é trivial quando se está trabalhando com Table e Collection Views, já que não oferecem suporte a interface do usuário para reordenamento múltiplo.
Seleção de Texto Personalizada
A implementação de drag utilizando UIDragInteraction nos possibilita trabalhar com diversos tipo de Views, porém trás uma limitação em relação a TextViews: Não podemos arrastar um trecho de um texto. Para implementar esse recurso, precisamos utilizar o UITextDragDelegate, exclusivo para lidar com iterações de arrastar em TextViews.
Primeiramente, precisamos fazer algumas modificações da função ViewDidLoad, removendo a DragInteraction do nosso dragTextView e fazendo a ligação do textDragDelegate com nossa ViewController.
O viewDidLoad() da sua aplicação deve ter o seguinte código:
Em seguida, basta implementar o protocolo UITextDragDelegate na ViewController. Nesse protocolo de Drag em especial, não é necessário implementar nenhum método. Apenas adicionando o protocolo teremos o comportamento observado na imagem abaixo.
Podemos também alterar a Preview de um TextView implementando os métodos itemsForDrag e dragPreviewForLiftingItem
itemsForDrag
A função itemsForDrag do UITextDragDelegate é bastante semelhante ao equivalente do UIDragInteractionDelegate, porém aqui temos acesso direto ao TextView sendo arrastada e podemos adicionar somento o texto selecionado para o DragItem.
dragPreviewForLiftingItem
A função dragPreviewForLiftingItem possibilita customizar a Preview que aparece quando estamos arrastando um texto, mostrando apenas o texto selecionado. Nessa função, criamos uma nova TextView como o mesmo texto da TextView se onde foi iniciada a interação de arrastar, porém com apenas o texto selecionado visível. Essa nova TextView é retornada como a UITargetedDragPreview a ser exibida, com um corte em torno da seleção.
Os projetos utilizados para o desenvolvimento deste tutorial estão disponíveis para consulta nos links a seguir:
Referências
- Introducing Drag and Drop. WWDC 2017 - Session 203. Link
- Mastering Drag and Drop. WWDC 2017 - Session 213. Link
- Drag and Drop. Apple Developer Documentation. Link
- Introduction and implementation of Drag & Drop in a iOS. Apple Developer Academy at Mackenzie. Link
- Coding for iOS 11: How to drag & drop into collections & tables. Link
- Dragging multiple items. Tyler Fox. Link
