View source for An iPhone iOS 4 Gesture Recognition Tutorial (Xcode 4)

<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Identifying iPhone Gestures using iOS 4 Gesture Recognizers (Xcode 4)|Previous]]<td align="center">[[iPhone iOS 4 Development Essentials Xcode 4 Edition|Table of Contents]]<td width="20%" align="right">[[Drawing iOS 4 iPhone 2D Graphics with Quartz (Xcode 4)|Next]]</td>
<tr>
<td width="20%">Identifying iPhone Gestures using iOS 4 Gesture Recognizers (Xcode 4)<td align="center"><td width="20%" align="right">Drawing iOS 4 iPhone 2D Graphics with Quartz (Xcode 4)</td>
</table>
<hr>


<htmlet>ios9_upgrade</htmlet>


Having covered the theory of gesture recognition on the iPhone in the chapter entitled [[Identifying iPhone Gestures using iOS 4 Gesture Recognizers (Xcode 4)|Identifying iPhone Gestures using iOS 4 Gesture Recognizers]], the purpose of this chapter is to work through an example application which demonstrates the use of the various UIGestureRecognizer subclasses.
 
The application created in this chapter will configure recognizers to detect a number of different gestures on the iPhone display and update a status label with information about each recognized gesture.

== Creating the Gesture Recognition Project ==

Begin by invoking Xcode and creating a new iOS iPhone application project using the View-based application template and name the project ''recognizer''.

== Configuring the Label Outlet ==

The only component that will be present on our UIView object will be the label used to notify the user of the type of gesture detected. Since the text displayed on this label will need to be updated from within the application code it will need to be connected to an outlet. Within the Xcode Project navigator panel, select the ''recognizerViewController.h'' file and modify it as follows:

<pre>
#import <UIKit/UIKit.h>

@interface recognizerViewController : UIViewController
{
    UILabel *statusLabel;
}
@property (retain, nonatomic) IBOutlet UILabel *statusLabel;
@end
</pre>

Next, edit the ''recognizerViewController.m'' file and add the ''@synthesizer directive'' for the new outlet and code to release the allocated memory:

<pre>
#import "recognizerViewController.h"

@implementation recognizerViewController
@synthesize statusLabel;
.
.
- (void)dealloc
{
    [statusLabel release];
    [super dealloc];
}
.
.
- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.statusLabel = nil;
}
.
.
@end
</pre>

== Designing the User Interface ==

Select the ''recognizerViewController.xib'' file to display the interface builder panel. In addition to the UIView created for us by Xcode when the project was created the only user interface object that needs to be added is the status label. Display the Object library (''View -> Utilities -> Object Library'') and drag a Label object from the library to the center of the view. Once positioned, stretch the label to the outer edges of the view until the blue dotted lines representing the recommended margins appear and then modify the label properties to center the label text:


[[Image:iphone_ios_4_xcode_4_gesture_recognizer_ui.jpg|Designing the user interface for the iPhone iOS 4 Gesture Recognizer tutorial]] 


Ctrl+click on the ''File’s Owner'' object, drag the blue line to the label object release. From the resulting menu select the statusLabel outlet.

== Configuring the Gesture Recognizers ==

The application code will need to configure gesture recognizers for taps, swipes, rotations and pinches. Since these recognizers will need to be attached to the view object the ideal place to create them is in the viewDidLoad method of our recognizerViewController class, so select the ''recognizerViewController.m'' file and modify this method so that it reads as follows:

<pre>
- (void)viewDidLoad
{
    UITapGestureRecognizer *doubleTap = 
       [[UITapGestureRecognizer alloc]
       initWithTarget:self 
       action:@selector(tapDetected:)];
    doubleTap.numberOfTapsRequired = 2;
    [self.view addGestureRecognizer:doubleTap];
    [doubleTap release];

    UIPinchGestureRecognizer *pinchRecognizer = 
        [[UIPinchGestureRecognizer alloc]
        initWithTarget:self 
        action:@selector(pinchDetected:)];
    [self.view addGestureRecognizer:pinchRecognizer];
    [pinchRecognizer release];

    UIRotationGestureRecognizer *rotationRecognizer =
        [[UIRotationGestureRecognizer alloc]
        initWithTarget:self 
        action:@selector(rotationDetected:)];
    [self.view addGestureRecognizer:rotationRecognizer];
    [rotationRecognizer release];

    UISwipeGestureRecognizer *swipeRecognizer = 
       [[UISwipeGestureRecognizer alloc]
       initWithTarget:self 
       action:@selector(swipeDetected:)];
    swipeRecognizer.direction = UISwipeGestureRecognizerDirectionRight;
    [self.view addGestureRecognizer:swipeRecognizer];
    [swipeRecognizer release];

    UILongPressGestureRecognizer *longPressRecognizer = 
         [[UILongPressGestureRecognizer alloc]
         initWithTarget:self 
         action:@selector(longPressDetected:)];
    longPressRecognizer.minimumPressDuration = 3;
    longPressRecognizer.numberOfTouchesRequired = 1;
    [self.view addGestureRecognizer:longPressRecognizer];
    [longPressRecognizer release];
    [super viewDidLoad];
} 
</pre>

== Adding the Action Methods ==

Having configured the gesture recognizers, the next step is to write the action methods that will be called by each recognizer when the corresponding gesture is detected. These methods will also reside in the ''recognizerViewController.m'' file and will update the status label with information about the detected gesture:

<pre>
- (IBAction)longPressDetected:(UIGestureRecognizer *)sender {
    statusLabel.text = @"Long Press";
}

- (IBAction)swipeDetected:(UIGestureRecognizer *)sender {
    statusLabel.text = @"Right Swipe";
}

- (IBAction)tapDetected:(UIGestureRecognizer *)sender {
    statusLabel.text = @"Double Tap";
}

- (IBAction)pinchDetected:(UIGestureRecognizer *)sender {

    CGFloat scale = 
       [(UIPinchGestureRecognizer *)sender scale];
    CGFloat velocity = 
       [(UIPinchGestureRecognizer *)sender velocity];

    NSString *resultString = [[NSString alloc] initWithFormat:
         @"Pinch - scale = %f, velocity = %f",
         scale, velocity];
    statusLabel.text = resultString;
    [resultString release];
}

- (IBAction)rotationDetected:(UIGestureRecognizer *)sender {
    CGFloat radians = 
          [(UIRotationGestureRecognizer *)sender rotation];
    CGFloat velocity = 
          [(UIRotationGestureRecognizer *)sender velocity];

    NSString *resultString = [[NSString alloc] initWithFormat:
              @"Rotation - Radians = %f, velocity = %f",
              radians, velocity];
    statusLabel.text = resultString;
    [resultString release];
}
</pre>

== Testing the Gesture Recognition Application ==

The final step is to build and run the application. In order to fully test the pinching and rotation recognition it will be necessary to run the application on a physical device (since it is not possible to emulate two simultaneous touches within the iOS Simulator environment). Assuming provisioned device is attached (see [[Testing iOS 4 Apps on the iPhone – Developer Certificates and Provisioning Profiles (Xcode 4)|Testing iOS 4 Apps on the iPhone – Developer Certificates and Provisioning Profiles]] for more details) simply click on the Xcode Run button. Once the application loads perform the appropriate gestures on the display and watch the status label update accordingly.


<htmlet>ios9_upgrade</htmlet>



<htmlet>ezoicbottom</htmlet>
<hr>
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Identifying iPhone Gestures using iOS 4 Gesture Recognizers (Xcode 4)|Previous]]<td align="center">[[iPhone iOS 4 Development Essentials Xcode 4 Edition|Table of Contents]]<td width="20%" align="right">[[Drawing iOS 4 iPhone 2D Graphics with Quartz (Xcode 4)|Next]]</td>
<tr>
<td width="20%">Identifying iPhone Gestures using iOS 4 Gesture Recognizers (Xcode 4)<td align="center"><td width="20%" align="right">Drawing iOS 4 iPhone 2D Graphics with Quartz (Xcode 4)</td>
</table>