Draw beautiful diagram effortlessly on ipad. Click here to know more..

Saturday, February 2, 2013

Touch gestures in iOS (iPhone, iPad) sdk

iOS sdk provides simple and powerful touch gesture API. With few lines of code, you can make your app touch/multitouch aware.
In this blog post, I am posting code snippet for using touch gesture in iOS app. The code snippet is taken from a drawing app: Lekh Diagram
The Lekh Diagram heavily uses touch gestures. Here are touch gestures used by Lekh Diagram

  • pan
  • two finger drag
  • tap
  • double tap
  • long press
  • pinch
  • rotate
All these gestures are used in the app on the drawing canvas. The Lekh Diagram registers and handles all multitouch events except "two finger drag". The two finger drag is handled by UIScrollView. 

Here is code snippet for registering gesture events:

The Lekh Diagram has drawing canvas which derives from UIView as
@interface DrawingView : UIView

In the constructer of this class, following code registers for events.

// *******************************************************************
    UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc
                                          initWithTarget:self action:@selector(handlePanGesture:)];
    panGesture.minimumNumberOfTouches = 1;
    panGesture.maximumNumberOfTouches = 1;
    [self addGestureRecognizer:panGesture];

// ****************************************************************
    UITapGestureRecognizer *doubleTap = 
    [[UITapGestureRecognizer alloc]
     initWithTarget:self action:@selector(handleDoubleTapGesture:)];
    [doubleTap setNumberOfTapsRequired:2];
    [self addGestureRecognizer:doubleTap];

// ****************************************************************
    UITapGestureRecognizer *tapGest = 
    [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];
    [tapGest requireGestureRecognizerToFail:doubleTap];
    [self addGestureRecognizer:tapGest];

// *******************************************************************
    UILongPressGestureRecognizer *longPressGesture = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handleLongPress:)];
    longPressGesture.minimumPressDuration = 1;
    [self addGestureRecognizer:longPressGesture];

// *********************************************************************
    UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(handleZoom:)];
[self addGestureRecognizer:pinchRecognizer];
// *******************************************************************
    UIRotationGestureRecognizer *rotationRecognizer = [[UIRotationGestureRecognizer alloc] initWithTarget:self action:@selector(handleRotate:)];
[self addGestureRecognizer:rotationRecognizer];

Here are event handler functions

    if(UIGestureRecognizerStateBegan == sender.state) {
     // long press handler code

  if([sender state] == UIGestureRecognizerStateEnded) {
     // handler code for rotation end


    else if([sender state] == UIGestureRecognizerStateBegan){

       // handler code for rotation start
        double rotation = [sender rotation]; // amount of rotation
        // handler code for rotation in progress


    if([sender state] == UIGestureRecognizerStateEnded) {
        // handler code for pinch end
    else if([sender state] == UIGestureRecognizerStateBegan){
      // handler code for pinch start
        CGFloat scale = [(UIPinchGestureRecognizer*)sender scale]; // amount of pinch
       // handler code for pinch progress


-(IBAction)handlePanGesture:(UIPanGestureRecognizer *)sender{
     CGPoint location = [sender locationInView:self];  // current touch position
      if(sender.state == UIGestureRecognizerStateEnded){
        // handler code for panning end
      else if(sender.state == UIGestureRecognizerStateBegan){
         // handler code for panning starts
      else {
         // handler code for panning in progress


- (IBAction)handleTapGesture:(UIGestureRecognizer *)sender {
    CGPoint location = [sender locationInView:self]; // tap location
   // handler code for tap

- (IBAction)handleDoubleTapGesture:(UIGestureRecognizer *)sender {
    CGPoint location = [sender locationInView:self]; // double tap location
    // handler code for double tap

Here is demo of Lekh Diagram, you can see touch gesture in action in this video

No comments:

Post a Comment