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
@end

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

-(IBAction)handleLongPress:(UILongPressGestureRecognizer*)sender{  
    if(UIGestureRecognizerStateBegan == sender.state) {
     // long press handler code
   }
}

-(IBAction)handleRotate:(UIRotationGestureRecognizer*)sender{
  if([sender state] == UIGestureRecognizerStateEnded) {
     // handler code for rotation end

   }

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

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

}

-(IBAction)handleZoom:(UIPinchGestureRecognizer*)sender{
    if([sender state] == UIGestureRecognizerStateEnded) {
        // handler code for pinch end
    }
    else if([sender state] == UIGestureRecognizerStateBegan){
      // handler code for pinch start
    }
    else{
        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




1 comment:

  1. Thankful such an awesome sum for sharing this glorious information! I am envisioning see more posts by you. I like visiting you site since I always come across interesting articles like this one. Great Job, I greatly appreciate that. Do keep sharing! Your information is good and friendly this article very helpful for me. Thanks for the post. After seeing the following post, I totally inspire from you and your blogs also respectively. It was nice articles and I also very enjoyed after read this. Thanks a lot sir. Visit here also: Best essay writing service

    ReplyDelete