iOS Developer Tips Blog » Events and Touch

Gestures Recognizers – Tap, Pinch/Zoom, Rotate, Swipe, Pan, Long Press

John Muchow — Wed, 06 Apr 2011 11:03:36 +0000

The UIGestureRecognizer class is available to help with detecting and responding to the various UI gestures common on iOS devices. UIGestureRecognizer is an abstract class, with the following concrete subclasses, one for each type of available recognizer:

UITapGestureRecognizer

UIPinchGestureRecognizer

UIRotationGestureRecognizer

UISwipeGestureRecognizer

UIPanGestureRecognizer

UILongPressGestureRecognizer

Depending on the type of recognizer, there are various behaviors that you can configure. For instance, with the UITapGestureRecognizer, you can specify the number of taps and number of touches. As an example, you could specify that two fingers are required, tapping twice with both fingers.

In response to recognized gestures, an action messages is sent to a target object that you specify. Depending on the type of gesture additional information about the gesture may be available in the action method, for example, the start location of a swipe, or the scale factor of a pinch/zoom.

Once you’ve defined a gesture, you add the recognizer to the view. From there, the view is responsible for recognizing when a gesture has occurrred and calling the relevant action.

Gesture Recognizer Examples

Let’s walk through configuration of a few gestures to see how all this works.

Below I’ve defined a recognizer for managing taps, notice how I’ve specified that there are two taps required, with just one touch (finger). The @selector specifies the method that will be called when the gesture is recognized.

// -----------------------------
// One finger, two taps
// -----------------------------
 
// Create gesture recognizer
UITapGestureRecognizer *oneFingerTwoTaps = 
  [[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(oneFingerTwoTaps)] autorelease];
 
// Set required taps and number of touches
[oneFingerTwoTaps setNumberOfTapsRequired:2];
[oneFingerTwoTaps setNumberOfTouchesRequired:1];
 
// Add the gesture to the view
[[self view] addGestureRecognizer:oneFingerTwoTaps];

Below is a recognizer for two fingers, two taps:

// -----------------------------
// Two fingers, two taps
// -----------------------------
UITapGestureRecognizer *twoFingersTwoTaps = 
  [[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(twoFingersTwoTaps)] autorelease];
[twoFingersTwoTaps setNumberOfTapsRequired:2];
[twoFingersTwoTaps setNumberOfTouchesRequired:2];
[[self view] addGestureRecognizer:twoFingersTwoTaps];

The following gestures recognize swipes up and down:

// -----------------------------
// One finger, swipe up
// -----------------------------
UISwipeGestureRecognizer *oneFingerSwipeUp = 
  [[[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(oneFingerSwipeUp:)] autorelease];
[oneFingerSwipeUp setDirection:UISwipeGestureRecognizerDirectionUp];
[[self view] addGestureRecognizer:oneFingerSwipeUp];
 
// -----------------------------
// One finger, swipe down
// -----------------------------
UISwipeGestureRecognizer *oneFingerSwipeDown = 
  [[[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(oneFingerSwipeDown:)] autorelease];
[oneFingerSwipeDown setDirection:UISwipeGestureRecognizerDirectionDown];
[[self view] addGestureRecognizer:oneFingerSwipeDown];

Two recognize two fingers rotating on a view:

// -----------------------------
// Two finger rotate  
// -----------------------------
UIRotationGestureRecognizer *twoFingersRotate = 
  [[[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(twoFingersRotate:)] autorelease];
[[self view] addGestureRecognizer:twoFingersRotate];

And finally, two finger pinch:

// -----------------------------
// Two finger pinch
// -----------------------------
UIPinchGestureRecognizer *twoFingerPinch = 
  [[[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(twoFingerPinch:)] autorelease];
[[self view] addGestureRecognizer:twoFingerPinch];

There are two additional gestures not shown above that you can also tinker with, UIPanGestureRecognizer and UILongPressGestureRecognizer.

Gesture Recognizer Action Methods

For each of the above definitions, below are the associated action methods.

/*--------------------------------------------------------------
* One finger, two taps 
*-------------------------------------------------------------*/
- (void)oneFingerTwoTaps
{
  NSLog(@"Action: One finger, two taps");
}
 
/*--------------------------------------------------------------
* Two fingers, two taps
*-------------------------------------------------------------*/
- (void)twoFingersTwoTaps {
  NSLog(@"Action: Two fingers, two taps");
} 
 
/*--------------------------------------------------------------
* One finger, swipe up
*-------------------------------------------------------------*/
- (void)oneFingerSwipeUp:(UISwipeGestureRecognizer *)recognizer 
{ 
  CGPoint point = [recognizer locationInView:[self view]];
  NSLog(@"Swipe up - start location: %f,%f", point.x, point.y);
}
 
/*--------------------------------------------------------------
* One finger, swipe down
*-------------------------------------------------------------*/
- (void)oneFingerSwipeDown:(UISwipeGestureRecognizer *)recognizer 
{ 
  CGPoint point = [recognizer locationInView:[self view]];
  NSLog(@"Swipe down - start location: %f,%f", point.x, point.y);
}
 
/*--------------------------------------------------------------
* Two finger rotate   
*-------------------------------------------------------------*/
- (void)twoFingersRotate:(UIRotationGestureRecognizer *)recognizer 
{
  // Convert the radian value to show the degree of rotation
  NSLog(@"Rotation in degrees since last change: %f", [recognizer rotation] * (180 / M_PI));
}
 
/*--------------------------------------------------------------
* Two finger pinch
*-------------------------------------------------------------*/
- (void)twoFingerPinch:(UIPinchGestureRecognizer *)recognizer 
{
  NSLog(@"Pinch scale: %f", recognizer.scale);
}

Source Code

To get a feel for how gestures and the corresponding action methods work, download the Xcode project below and install the application on a device from within Xcode – look at the console output as you perform the various gestures to see the log messages for each gesture as it’s recognized.

Gesture Recognizer Xcode Project

Encapsulating Begin Ignoring Events and End Ignoring Events

John Muchow — Mon, 19 Oct 2009 07:53:52 +0000

There are times when it’s really handy to stop event processing momentarily so you can perform an update to the UI (e.g. sliding a custom view into place using a timed animation) or you otherwise need to save the user from themselves by momentarily stopping touch events.

I’ve written previously on How to Suspend / Ignore Touch Events, which is as simple as:

// Begin ignoring events
[[UIApplicationsharedApplication] beginIgnoringInteractionEvents];
 
// Stop ignoring events
[[UIApplicationsharedApplication] endIgnoringInteractionEvents];

The problem with the above is that depending on when and where you make these calls, you can end up with the lines sprinkled about inside your code, which can make it troublesome to match one call with the other.

For example, if I make a call to begin ignoring events, and then move to a new view in which I then make a request to stop ignoring events, I now have the begin ignorning call in a different class from the end ignorning call. A big deal? Definitely not, however, when you see one call without the other, it can be both hard to know if you have a matching set, not to mention the questions that may arise when you revisit your code a few months down the road.

I get around this by writing a very simple set of methods for stopping and stopping the ignore events process. Here’s how this looks:

Interface Definition for SomeClass

@interface SomeClass : NSObject 
{
  ...
}
 
+ (void)enableEvents;
+ (void)startIgnoringEvents;
+ (void)stopIgnoringEventsAfter:(int)seconds;

Notice that the three methods shown are class methods. The implementation for SomeClass follows:

Implementation for SomeClass

@implementation SomeClass
 
...
 
+ (void)enableEvents
{
  [[UIApplication sharedApplication] endIgnoringInteractionEvents];
}
 
+ (void)startIgnoringEvents
{
  [[UIApplication sharedApplication] beginIgnoringInteractionEvents];
}
 
+ (void)stopIgnoringEventsAfter:(int)seconds
{
  [self performSelector:@selector(enableEvents) withObject:nil afterDelay:seconds];
}
 
@end

How to Start and Stop Ingoring Events

Now that I have these helper methods, I can keep all references to start and stop ignoring of events in one place, here’s how this might look:

// Stop events momentarily...
[SomeClass startIgnoringEvents];    
 
// This is the activity I don't want interrupted
[dropDownViewController showMsg];
 
// Stop ignoring events
[ShoppingListViewController stopIgnoringEventsAfter:2];

Again, these extra steps are not required, however, keeping related code together can be a good thing.

How Long was a Touch Event – Detecting When a Touch Event Starts and Ends

John Muchow — Wed, 14 Oct 2009 08:43:41 +0000

Here’s a quick tip that shows how to determine the length of time from a begin touch event to an end touch event. I used a similar snippet of code recently when I had to determine if a user tapped on an image or held their finger on the image for a pre-determined amount of time.

Start by creating a variable of type NSTimeInterval to hold the time the touch event began.

// Define this as an instance variable
NSTimeInterval touchStartTime;
 
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event;
{
  // When the touch event was detected
  touchStartTime = [event timestamp];
}

Inside the touchesBegan event, with some simple math, one can determine how long from the start event to the end.

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event;
{
  // Calculate how long touch lasted
  NSTimeInterval touchTimeDuration = [event timestamp] - touchStartTime;
 
  NSLog(@"Touch duration: %3.2f seconds", touchTimeDuration);
}

Suspend or Ignore Touch Events

John Muchow — Tue, 19 May 2009 12:34:34 +0000

There are times when you may need to temporarily stop receiving touch events. For example, when doing an animation or a screen transition rather than disable user enabled views (buttons, images, etc), you can tell the application to ignore user interaction events as shown below:

[[UIApplication sharedApplication] beginIgnoringInteractionEvents];

Turning event interaction back on is as follows:

[[UIApplication sharedApplication] endIgnoringInteractionEvents];

Where Was Touch – Determine if Touch/Point is Within Rectangle

John Muchow — Sat, 25 Apr 2009 23:11:23 +0000

I recently had to write a short chunk of code to determine when a user touches a specific rectangular region on the screen. Detecting this is nothing more than getting a reference to a CGPoint (x and y coordinates) of the location touched and checking to see if the point is within the rectangular bounds of interest.

The following example shows one approach, the workhorse is CGRectContainsPoint.

/*---------------------------------------------------------------------------
* Touches began
*--------------------------------------------------------------------------*/
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event 
{
  // Detect touch anywhere
  UITouch *touch = [touches anyObject];
 
  // Get the specific point that was touched
  CGPoint point = [touch locationInView:self.view]; 
  NSLog(@"pointx: %f pointy:%f", point.x, point.y);
 
  // See if the point touched is within these rectangular bounds
  if (CGRectContainsPoint(CGRectMake(5, 5, 40, 130), point))
  {
    do something...
  } 
}

I use CGRectMake to define the bounds of the rectangle and pass in the variable point that was obtained from the touch location.

As with CGRectContainsPoint, CGRectMake is a C function, which is defined as follows:

CGRect CGRectMake(CGFloat x, CGFloat y, CGFloat width, GFloat height);

The C structures you’ll need to put all the pieces together, are shown below:

struct CGRect 
{
   CGPoint origin;
   CGSize size;
};
 
struct CGPoint 
{
   CGFloat x;
   CGFloat y;
};
 
struct CGSize 
{
   CGFloat width;
   CGFloat height;
};

CGFloat is nothing more than a floating point number that is defined as a typedef, based on the system architecture. In other words, it’s just a float.

For more information about CGRect, CGSize and CGPoint, you can read this post.