Swipe, Pinch, Tap, LongPress and Rotations Gestures Recognition in iPhone Tutorial

Hola,, iDevelopers,, RDC is here

in this lovely morning I am enjoying beautiful spanish music on Guitar (with love I called it Mojo)

So, What's up guys, today we are going to learn one more simple but important concept in iPhone application development.. Gesture Recognition.

At the end of this Tutorial you can find Complete Source code zip file.

So what is the Gesture Recognition?

Let's come with me on Live Concert of our Weekend Show, When you get the beautiful lady (we call Soni Kudi in Punjabi) in front of you.. anyone can see Gesture on your face :)

Okay no more PJ in morning time.. let's move to our 0101010

Just stay with me, and do it step by step by .. don't forget to drop me a message or comment.

Note : This Application Developed Using : iOS 6.1 , Xcode 4.6, and MAC OS X Lion 10.8.3

PHASE - I (Create New Project)

So, Let's Fire Xcode!!

Go to File --> New --> Project

Now we can see a Pop up Window for selecting our application templet 

So make sure you select Application in iOS option on your Left hand side.

then select Single View Application as shown in below picture and Go for Next..

Screen 1

In the Next Window we need to put Our Project Details this way

---------------------------------------------------------------

| Product Name : GestureDemo |

| Organization Name :RDCWorld |

| Company Identifier : com.rdcworld |

| |

| Class Prefix :  (leave it blank for now) |

| |

| Devices : iPhone |

----------------------------------------------------------------

Note : Don't forget to Make Tick mark on "Use Automatic Reference Counting" option.

Go to Next --> Create.

Now you can see Xcode default dashboard with our newly created project .

PHASE - II (Design UI)

We need to add  some UITextFields, UIButtons on our screen to get it work.

So, Just open ViewController.xib file you can see default blank layout

1. Let's drag UINavigationBar from Object library double click on it and give title as  "Gesture Recogniser Demo", (we will use this for just showing app Title)

2.  Select main view and change background to Green Because Green is New Black

3. Drag one UILabel from Object Lib and update its text = Touch Me!! and I'll Recognise That :)

That's it simplest UI ever..see below screen shot.

Even we don't need any IBOutlet and IBAction in this application :p

PHASE - III (Writing Code)

~ ~ ~ ~ ~ ~ ~ ~ ~              Controller Class (ViewController)          ~ ~ ~ ~ ~ ~ ~ ~ ~  

No change in header file just he default code only.

So Finally our ViewController.h file look like

-----------------------------------------------------------------------------------------------------------------------------------------

//

//  ViewController.h

//  GestureDemo

//

//  Created by RDC on 02/04/13.

//  Copyright (c) 2013 RDC World. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@end

-----------------------------------------------------------------------------------------------------------------------------------------

Now come to ViewController.m file , open it

Here is the Heart of Application

So, Below are step simple steps To add Gesture in our app

Example: Swipe Gesture

1. Create instance of Gesture Recognition class and Initialise with the Selector method

UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGetstureDetected)];

Explain: Here we have Created swipe gesture instance and initialise it with selector named "swipeGetstureDetected", So when we swipe on screen this method gets called.

2. add Gesture instance to UI. here we are adding on Main Background screen (UIController Screen)

[self.view addGestureRecognizer:swipeGesture];

3. now we need to Create the method  swipeGetstureDetected and  add desired action in its body.

-(void) swipeGetstureDetected{

    NSLog(@"Swipe Gesture detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Swipe Gesture detected!!!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

    

}

//So in this application I have created all the Gesture in a Method and finally I call it from viewDidLoad

So Finally our ViewController.m file look like

-----------------------------------------------------------------------------------------------------------------------------------------

//

//  ViewController.m

//  GestureDemo

//

//  Created by RDC on 02/04/13.

//  Copyright (c) 2013 RDC World. All rights reserved.

//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

#pragma mark - ViewController's Life Cycle methods

- (void)viewDidLoad{

    [super viewDidLoad];

    

    //add GestureReconizers

    [self addGestureReconizers];    

}

- (void)didReceiveMemoryWarning{

    [super didReceiveMemoryWarning];    

}

#pragma mark - Create and Add GestureReconizers

-(void) addGestureReconizers{

    //1. Swipe

    UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(swipeGetstureDetected)];    

    [self.view addGestureRecognizer:swipeGesture];

    

    //2. Pinch

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

    [self.view addGestureRecognizer:pinchGesture];

    

    //3. Tap

    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(TapGestureDetected)];

    [self.view addGestureRecognizer:tapGesture];

    

    //4. Long Press

    UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressGestureDetected)];

    [self.view addGestureRecognizer:longPressGesture];

    

    //5. Screen Rotation

    UIRotationGestureRecognizer *rotationGesture = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(rotationGestureDetected)];

    [self.view addGestureRecognizer:rotationGesture];

    

    //6. Drag Item (like swipe)

    /*UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panGestureDetected)];

     [self.view addGestureRecognizer:panGesture]; */

}

#pragma mark - Selectors for Added GestureReconizers

-(void) swipeGetstureDetected{

    NSLog(@"Swipe Gesture detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Swipe Gesture detected!!!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

    

}

-(void) pinchGetstureDetected{

    NSLog(@"Pinch Gesture Detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Pinch Gesture Detected!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

}

-(void) TapGestureDetected{

    NSLog(@"Tap Gesture detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Tap Gesture detected!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

}

-(void) longPressGestureDetected{

    NSLog(@"Long Press Gesture detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Long Press Gesture detected!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

}

-(void) rotationGestureDetected{

    NSLog(@"Rotation Gesture detected!!");

    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Rotation Gesture detected!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

    [alert show];

}

/*

 -(void) panGestureDetected{

 NSLog(@"Pan Gesture detected!!");

 UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"" message:@"Pan Gesture detected!!" delegate:self cancelButtonTitle:@"Ok" otherButtonTitles:nil, nil];

 [alert show];

 }

 */

@end

-----------------------------------------------------------------------------------------------------------------------------------------

~ ~ ~ ~ ~ ~ ~ ~ ~              Application Delegate Class (AppDelegate)          ~ ~ ~ ~ ~ ~ ~ ~ ~  

Make sure your AppDelegate file code should be default 

Finally our AppDelegate.h file look like 

-----------------------------------------------------------------------------------------------------------------------------------------

//

//  AppDelegate.h

//  GestureDemo

//

//  Created by RDC on 02/04/13.

//  Copyright (c) 2013 RDC World. All rights reserved.

//

#import <UIKit/UIKit.h>

@class ViewController;

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ViewController *viewController;

@end

-----------------------------------------------------------------------------------------------------------------------------------------

Finally our AppDelegate.m file look like 

-----------------------------------------------------------------------------------------------------------------------------------------

//

//  AppDelegate.m

//  GestureDemo

//

//  Created by RDC on 02/04/13.

//  Copyright (c) 2013 RDC World. All rights reserved.

//

#import "AppDelegate.h"

#import "ViewController.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{

    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];

    self.window.rootViewController = self.viewController;

    [self.window makeKeyAndVisible];

    return YES;

}

//for now leave rest all empty methods..

@end

-----------------------------------------------------------------------------------------------------------------------------------------

Okay wrap it up this application. let's Run it.

I pinched on Screen and here is the Result screen

This time I swipe, and see what it says..

Now let's Tap (Touch) on screen

If I press for long time I get this

and even I can see Rotate gesture,, 

Cheers!! we did it. 

You can find complete project source code zip file here : GestureDemo.zip (68.3 KB)

I Would love to here your thoughts !!