How to work with Gesture Recognizers in iOS?

In this Era of iOS Development, We always want to learn new things and to implement them for our benefits.

Today Let’s talk about one of the useful features in iOS which is Gesture Recognizers.

Before we start working on it, We need to understand what is gesture-recognizers

Gesture-Recognizer

A Gesture-Recognizer object identifies the type of gesture, movement given by the user as input.

It sends the acting message on a particular targeted object which in turns gives an output.

Apple provides a UIGestureRecognizer Class which contains all the abstract data and behavior inside it.

Types of Gesture-Recognizer

There are a lot of different types of gesture recognizers used in iOS, and they perform different action respectively.

  • UITapGestureRecognizer – We use this class to handle single tap or multiple taps done through, one or more fingers.
  • UIPinchGestureRecognizer  -We use this class to perform zoom in and out functionality in a view, For example, we use an image to zoom in and out in it.
  • UISwipeGestureRecognizer – We use this class when we perform an act to swipe the view to either left or right side with our fingers,

For Example – if we want to see the image in our phone gallery then we swipe either right or left to see different image every time.

  • UIPanGestureRecognizer – We use this class to move the view from one point to another point in our applications.

Remember, Each class will perform an action when the correct gesture will be done by the end user.

We will be going to use the methods to add the different action for a particular gesture so that we cannot mix them with each other.

It’s our choice whether we want to perform all the action with the same view or object,

but we will be going to use a different object for every class object.

Demo Application Setup

Let’s now head into the application and start working on it without wasting any time.

First, we will be going to use a tabbed application which will consist of five tabs in it.

Each view controller will use a different type of gesture recognizer and will perform some action.

Step 1

Launch XCode and Select tabbed application template from it and hit next as shown in the image below.

Tabbed Application

Step 2

Now give a name to your application and then hit next as shown in the image below. I am going to use the GestureRecognizersSample name for my application.

Gesture Recognizer

Step 3

Save your application to your disc so that you can access it in future and then you will going to see two view controllers on your screen as shown.

I am highlighting them for you.

view controllers

Step 4

Select all of them and hit delete, then you will see a message select remove reference as shown below.

Step 5

Now go to the file on the top left corner of Xcode and select cocoa touch class, then from there create a new UIViewController Class file.

Name the file as TapViewController and hit next as shown in the image below.

tap gesture vc

Name other Three View Controllers as mentioned.

  • PinchViewController
  • SwipeViewController
  • PanViewController

Step 6

Now select each view controller and attach them to the tab view controller.

Name each tab bar object one by one as mentioned in the image below.

Rotate Gesture

Step 7

Now select the first tap view controller and add a UIView to it and name it as sampleView.

After this step give it a color of your choice as shown in the image below.

tap view

Do this step for all other four views and name attach them to the view one by one.

Coding Time

Now it’s time to do some code.

Tap Gesture

Jump into the TapViewController.m file and add the given line of code into the viewdidload method.

UITapGestureRecognizer *singleTapGestureRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(SingleTapAction:)];

In this line we are creating a UITapGestureRecognizer with the name singleTapGestureRecognizer, then we will allocate a space for it and will add a target to it.

Give the name to the action according to your understanding. I am using SingleTapAction as you can see.

Now Assign this gesture recognizer to our custom view which is sampleView by using the code shown below.

[self.sampleView addGestureRecognizer:singleTapGestureRecognizer];

Step 1

Now as we have already created the gesture recognizer to handle the tap, we need to create the action to perform some functionality with it.

I have already given the name as SingleTapAction, So I need to perform a method with this name which will handle the action done inside it.

-(void)SingleTapAction:(UITapGestureRecognizer *)tapGestureRecognizer{

}

Step 2

Now it is up to you that what type of action you want to perform when user will do a single tap in your custom view.

For now, we will going to increase the width of our Sample view and will make it same when user will tap again on the same view.

Add the following code to the method of SingleTapAction as mentioned.

CGFloat newWidth = 100.0;

    if (self.sampleView.frame.size.width == 100.0) {

        newWidth = 200.0;

    }

    CGPoint currentCenter = self.sampleView.center;

    self.sampleView.frame = CGRectMake(self.sampleView.frame.origin.x, self.sampleView.frame.origin.y, newWidth, self.sampleView.frame.size.height);

    self.sampleView.center = currentCenter;

Now if you run the project on simulator then you will see a tab screen with five objects in it.

Let’s move further and play more with UITapGestureRecogniser, We can add more gestures inside the same view.

We will now create a doubleTapGesture Recogniser within the same view and will add some code that will perform some changes,

when user will double click or double tap in the same sample view.

To do it add the following code to the viewdidload method of tap view controller.

UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(doubleTapAction:)];

     doubleTapGesture.numberOfTapsRequired = 2;

    doubleTapGesture.numberOfTouchesRequired = 2;

    [self.sampleView addGestureRecognizer:doubleTapGesture];

Now add the action method after implementing the gesture code which is as follows.

-(void)doubleTapAction:(UITapGestureRecognizer *)tapGestureRecognizer{

    CGSize newSize = CGSizeMake(100.0, 100.0);

    if (self.sampleView.frame.size.width == 100.0) {

        newSize.width = 200.0;

        newSize.height = 200.0;

    }

    CGPoint currentCenter = self.sampleView.center;

   self.sampleView.frame = CGRectMake(self.sampleView.frame.origin.x, self.sampleView.frame.origin.y, newSize.width, newSize.height);

    self.sampleView.center = currentCenter;

}

After this process, if you run the application and double tap on the view then it will be going to increase the size of view, and after another tap

it will go back to the previous size as shown in the snapshot below.

Pinch Gesture

UIPinchGestureRecognizer is used to change the height of the view. For example, if you want to increase or decrease the size of the view.

You can use the pinch with two fingers option like you do in camera to zoom in the image or to zoom out the image.

To do this head into the PinchViewController view and add a UIView into it and as the usual name it as sampleView.

Then add the following coordinates or frames into it as mentioned.

x= 112 y = 205

width = 150 height = 150

See the snapshot below.

Now head to the Pinch view controller. m file and add the following line into the viewdidload method.

UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchGesture:)];

    [self.sampleView addGestureRecognizer:pinchGestureRecognizer];
After adding it, create the function which will be going to handle the functionality to change the view size after the user performs pinch action.
-(void)pinchGesture:(UIPinchGestureRecognizer *)pinchGestureRecognizer{

    self.sampleView.transform = CGAffineTransformScale(self.sampleView.transform, pinchGestureRecognizer.scale, pinchGestureRecognizer.scale);

    pinchGestureRecognizer.view.transform = CGAffineTransformScale(pinchGestureRecognizer.view.transform, pinchGestureRecognizer.scale, pinchGestureRecognizer.scale);

    pinchGestureRecognizer.scale = 1.0;

}

Now at this point when you will head to pinch tab then you will see the difference after pinch into it as it will zoom in and zoom out, and will

change the size of the view in it.

Swipe Gesture

This is one of the common gesture recognizer used by us in daily life which is UISwipeGestureRecognizer. This works in four directions which are left, right, up and down.

Remember the action will perform right after the swipe gets completed either in right or left direction, as it is quite fast and responsive.

To do this we will be going to add three views to our swipe view controller which we have created earlier in our tab bar controller.

Let’s do it step by step now.

1st View

x= 0 y = 220

width = 328 height = 128

Add some color to it so that you can see the difference after swiping into it.

I am going to give it orange color, you can choose a color of your choice.

2nd View

Give the frames to it as shown below and name it as the blue view.

x= 320 y = 220

width = 328 height = 128

Here I will give the color blue to it.

3rd View

Give the frames to it as shown below and name it as the green view.

x= -328 y = 220

width = 328 height = 128 

Here I will give the color green to it.

Handle Right Swipe

Now we need to create the gesture to handle each swipe individually, and to do this we will be using UISwipeGestureRecognizer class to handle each swipe.

  UISwipeGestureRecognizer *swipeRightGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(slideToRightGestureRecognizer:)];

    swipeRightGesture.direction = UISwipeGestureRecognizerDirectionRight;

    [self.orangeView addGestureRecognizer:swipeRightGesture];

 

After this create the method to handle right swipe gesture and to do it perform the following code into your swipe view controller.

-(void)slideToRightGestureRecognizer:(UISwipeGestureRecognizer *)gestureRecognizer{

    [UIView animateWithDuration:0.5 animations:^{

        self.orangeView.frame = CGRectOffset(self.orangeView.frame, 320.0, 0.0);

        self.blueView.frame = CGRectOffset(self.blueView.frame, 320.0, 0.0);

        self.greenView.frame = CGRectOffset(self.greenView.frame, 320.0, 0.0);

    }];

}

Here this will be going to move the orange view to the right direction when we will swipe the view to the right side.

Handle Left Swipe

Now to handle left swipe it will perform the different action.

To handle this we will create another Gesture Recognizer, so let’s create it and name it as swipeLeftGesture.

  UISwipeGestureRecognizer *swipeLeftGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(slideToLeftRecognizer:)];

    swipeLeftGesture.direction = UISwipeGestureRecognizerDirectionLeft;

    [self.orangeView addGestureRecognizer:swipeLeftGesture];

 

Create the method to handle left swipe gesture and perform its action as follows.

-(void)slideToLeftRecognizer:(UISwipeGestureRecognizer *)gestureRecognizer{

    [UIView animateWithDuration:0.5 animations:^{

        self.orangeView.frame = CGRectOffset(self.orangeView.frame, -320.0, 0.0);

        self.blueView.frame = CGRectOffset(self.blueView.frame, -320.0, 0.0);

        self.greenView.frame = CGRectOffset(self.greenView.frame, -320.0, 0.0);

    }];

}

Now at this point, if you run the application then you will find the application partially running.

It means that if you will swipe the view to right then you won’t be able to go back to the orange view as it is not completed yet.

Hence to do this we need to perform some code on the green and blue view also.

To do this head back into the swipe view controller and add the code to it.

UISwipeGestureRecognizer *swipeRightBlue = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(slideToRightGestureRecognizer:)];

    swipeRightBlue.direction = UISwipeGestureRecognizerDirectionRight;

    [self.blueView addGestureRecognizer:swipeRightBlue];

    

    UISwipeGestureRecognizer *swipeLeftGreen = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(slideToLeftRecognizer:)];

    swipeLeftGreen.direction = UISwipeGestureRecognizerDirectionLeft;

    [self.greenView addGestureRecognizer:swipeLeftGreen];

This time everything will work fine as we expected.!!

Pan Gesture

This is a type of gesture recognizer which will be going to change the direction as user drag it.

It means that the view will move in any direction when we drag it.

To do this we will be using the UIPanGestureRecognizer class to handle all the action when user will drag the view in a particular direction.

First, give the frames to the view as mentioned.

x= 112 y = 258

width = 150 height = 150

Now add the following code to your Pan View controller. m file

  UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(moveViewWithGesture:)];

    [self.sampleView addGestureRecognizer:panGestureRecognizer];

Now to handle the action inside it , add the following method to it.

-(void)moveViewWithGesture:(UIPanGestureRecognizer *)panGestureRecognizer{

    CGPoint touchLocation = [panGestureRecognizer locationInView:self.view];

   self.sampleView.center = touchLocation;

}

gesture

Summary

After finishing these methods when you run the code then you will find that then different gesture recognizer performs a different action.

The main benefits of using these gesture recognizers are that you can mold them into any type of action, as they are not limited in their actions.

I hope you will find this blog useful. Let me know if you are interested in more tutorials like this.

Latest posts by Rahul Huria (see all)

Leave a Comment