iOS Gesture Featured Image

Dica iOS: Aprenda a trabalhar com gestos

Introdução à gestos no iOS

Você já deve ter utilizado algum aplicativo que tem alguma funcionalidade que altera comportamento visual de acordo com o gesto que é feito com os dedos do usuário. Para desenvolvedores iniciantes pode parecer bem complicado de implementar esse tipo de comportamento no iOS (bem como outras “animações”, que vamos abortar em uma próxima postagem), mas neste artigo nós vamos “quebrar” este mito. 🙂

Vamos desenvolver um projeto utilizando Objective-C sem Autolayout (vamos criar os componentes visuais via código) e Xcode 8, com o objetivo de apresentar os principais gestos do iOS para que, assim, você tenha uma boa base de onde e como implementar no seu próprio aplicativo.

Mão na massa!

Vamos utilizar a classe abstrata UIGestureRecgnizer e dela vamos abordar os seguintes gestos das classes abaixo:

  • UITapGestureRecognizer: Esta classe considera o gesto mais utilizado, que é de um simples toque (ou vários) em uma determinada view.

  • UISwipeGestureRecognizer: Este é outro gesto bastante utilizado, que permite o usuário rolar uma view com o dedo de uma direção horizontal para outra.

  • UIRotationGestureRecognizer: Este gesto permite “rotacionar” uma view em todas as direções, conforme o gesto anterior, neste tipo de gesto é necessária a utilização de dois dedos.

  • UIPanGestureRecognizer: Este gesto é utilizado para mover uma view de um ponto X ou Y para o outro.

  • UIPinchGestureRecognizer: Como no anterior este gesto também precisa de dois dedos e é bastante utilizado quando o usuário necessita fazer um “zoom” em uma determinada view, permitindo esta view mudar de tamanho.

Antes de iniciarmos o desenvolvimento do projeto, o vídeo abaixo mostra o resultado que encontraremos no final deste projeto e mostra na prática os gestos que vamos abordar:

Vamos ao que interessa e criar um projeto com o template “Tabbed Aplication” e adicione as 5 classes destacadas na imagem abaixo:

Feito isto, no Storyboard configure o UITabBarController com 5 itens e na aba “Identifier inspector” de cada UIViewController, configure cada UIViewController com com as 5 classes criadas acima.

obs: Neste exemplo não utilizaremos autolayout para a criação das views, então desmarque a opção “Use Auto Layout” na aba “File inspector” na área “Utilities” de cada UIViewController criada.

Pronto! Com a estrutura do projeto criada, podemos começar a desenvolver os gestos no nosso aplicativo.

Cada tela do nosso aplicativo terá a mesma estrutura de componentes visuais, terá um UILabel que será o título da tela indicando qual o tipo de gesto e uma UIView que será a view que aplicaremos o nosso gesto.

Então, em cada uma das 5 UIViewController, declare os seguintes componentes na interface do arquivo implementação (.m) utlizando o código abaixo:

Após isto, dentro do método viewDidLoad de cada View, inicialize o label de título da tela com o código abaixo, e mude apenas a propriedade “text” de cada UILabel de acordo com o nome de cada tela, segue exemplo da criação do label de título da tela que implementaremos o gesto “Tap”:

Feito isto em todas as 5 UIVIewControllers, vamos iniciar a implementação dos gestos em cada tela.

 

UITapGestureRecognizer

Neste primeiro exemplo, vamos criar a UIView dentro do método viewDidLoad da classe TapViewController.m que será view que vamos aplicar o gesto de “tap”:

O próximo código mostra a criação de uma instância da classe UITapGestureRecognizer, que demos o nome de “singleTapGestureRecognizer” e criamos o selector “handleSingleTapGesture” que será o método que será chamado quando o usuário realizar o gesto de tap na nossa view.

O próximo passo seria adicionar o gesto criado a nossa view que vamos aplicar o gesto:

Com a classe do nosso gesto e a view que receber o gesto criada, agora vamos configurar o selector que vai apresentar o resultado do nosso gesto, que no nosso caso vamos mudar o tamanho da nossa view original para percebermos o efeito e a execução do gesto através do método:

Pronto! Execute o projeto e veja o resultado clicando na view na tela da “tab” correspondente.

UISwipeGestureRecognizer

Neste próximo gesto que vamos implementar, vamos usar uma UIView que vai ocupar toda a largura da tela para que possamos ver de uma melhor forma o efeito deste gesto.

Obs: Para mostrarmos este gesto e os demais, vamos usar o mesmo conceito do anterior, e como este artigo tem o objetivo de apresentar os gestos mais utilizados no iOS, não vamos focar muito em conceitos de criação e inicialização de classes e componentes.

Este gesto de swipe, será um pouco mais trabalho que os demais mas nada que seja complicado.

Nesta tela vamos criar 3 UIViews que cada será apresentada quando o usuário realizar o gesto de rolar para direita ou para a esquerda, vamos criar a primeira UIView ocupando toda a largura da tela iniciando no início eixo X, a segunda iniciando após o final da tela, e a terceira antes do início da tela.

Abaixo segue a criação das UIViews:

A implementação é bem simples, vamos criar 4 eventos de gestos de Swipe através da classe UISwipeGestureRecognizer e seus respectivos Selectors.

Os dois primeiros vamos inseri-los na primeira UIView, que é a view que ficar no centro e vai receber um evento de gesto que permitirá fazer o swipe para a direita e outro para esquerda:

O terceiro, vamos inseri-los na UIView da direita, que permitirá realizar o swipe para a direita e voltar a ser apresentada a view central:

O quarto, será inserido na terceira UIView que é a view a esquerda da central. ela receberá o evento que permitirá o swipe para a esquerda, voltando assim para a view central:

Após isto vamos criar os métodos que vão receber o gesto de swipe para a direita e outro que para a esquerda.

No primeiro que é o método chamado ao fazer o swipe para a direita ele vai mudar o eixo do X de todas as 3 UIViews adicionando o valor da largura da tela:

Já no segundo que é o swipe para a esquerda, ele vai subtrair este mesmo valor no eixo X das três UIViews:

Feito!, após esta simples implementação podemos executar o nosso projeto e na segunda “tab”, teremos implementado o gesto de swipe para ambos os lados na nossa view de exemplo.

 

UIPanGestureRecognizer

O próximo é o UIPanGestureRecognizer que é bem simples de ser implementado e é visualmente bem interessante e divertido, pois permite o usuário ficar movendo um determinado componente na tela.

Vamos criar novamente uma UIView que vai receber o gesto de pan, com o código abaixo:

A implementação do gesto como disse é bastante simples e pode ser implementada a da seguinte forma:

Agora é só criarmos o método que vai ser chamado quando o usuário mover a view pela tela e pronto!

 

UIRotationGestureRecognizer

Outro gesto bem simple de ser implementado e bem interessante é o UIRotationGestureRecognizer que permitirá ao usuário rotacionar um determinado componente com o toque.

A criação da UIView que vai ser a nossa view que vai ter a rotação, segue o mesmo princípio das demais:

Para criarmos o objeto de gesto e inseri-lo na view, é bem mais simples:

 

UIPinchGestureRecognizer

Por fim, o último gesto apresentado neste artigo que é o UIPinchGestureRecognizer é um gestos também bastante encontrado em diversos aplicativos, segue a criação da UIView e criação do objeto de gesto:

Como segue o mesmo princípio dos demais, a seguir segue o método chamado pelo gesto ao realizar o gesto de “zoom” com os dedos na view criada.

Conclusão

Pronto! Como vimos é simples a implementação destes gestos mais utilizados em aplicativos atualmente.

O código com este projeto pode ser encontrado em:

https://github.com/dmaia17/Gestos

Gostou da dica? Deixe seu comentário abaixo. Também não esqueça de acompanhar a Abacomm no Twitter, onde estamos sempre compartilhando várias dicas. 🙂

Compartilhe:

Sobre o Autor

Daniel Maia

Desenvolvedor desde 2011, se qualificou em desenvolvimento de apps Android e iOS. Tem o objetivo de tornar a vida das pessoas mais fácil através de tecnologi. Fora isso, é um mineiro apaixonado pelo Cruzeiro, games e um bom pop-rock.

Leave a Reply

Your email address will not be published. Required fields are marked *