Screen Edge Swipe Gesture on iPhone using the UIScreenEdgePanGestureRecognizer Tutorial

UIScreenEdge Gesture Recognizer for iPhone Side Swipe Detection

I was working on updating my Mat Border Calculator app, and I ran into a bug with the new UIScreenEdgePanGestureRecognizer. It doesn't really have much documentation, and didn't behave as I expected.

It's only property is a edges attribute, but when I set the property to a set of edges (left and right) nothing happened. I thought there were issues with the view hierarchy in my app, so I created this test project. Because it wasn't intuitive and because I didn't see any working code I've posted the project on github so that you can learn how to use it to.

Edge Swipe Demo Video

In my sample view you can see how I can use the x-coordinate to move the entire ViewController's view (iPhone screen) to the left and to the right! It's pretty crazy, check it out here: 

Edge Swipe Gesture Code

1. Declare an ivar at the top of your ViewController.m file in the top as part of the Class Extension

#import "ViewController.h"

@interface ViewController () <UIGestureRecognizerDelegate> {
    CGFloat _centerX;
}
@end

2. Create a UIScreenEdgePanGestureRecognizer in your -viewDidLoad method. Add it to your self.view, so that it will work across the entire iPhone screen.

- (void)viewDidLoad {
    [super viewDidLoad];
    
    UIScreenEdgePanGestureRecognizer *leftEdgeGesture = [[UIScreenEdgePanGestureRecognizer alloc] initWithTarget:self action:@selector(handleLeftEdgeGesture:)];
    leftEdgeGesture.edges = UIRectEdgeLeft;
    leftEdgeGesture.delegate = self;
    [self.view addGestureRecognizer:leftEdgeGesture];

    // Store the center, so we can animate back to it after a slide
    _centerX = self.view.bounds.size.width / 2; 
}

3. Add a new method to handle the gesture and do whatever you want with the translation variable. I only care about the x coordinate, so that's what I'm using in this demo.

- (void)handleLeftEdgeGesture:(UIScreenEdgePanGestureRecognizer *)gesture {
    // Get the current view we are touching
    UIView *view = [self.view hitTest:[gesture locationInView:gesture.view] withEvent:nil];
    
    if(UIGestureRecognizerStateBegan == gesture.state ||
       UIGestureRecognizerStateChanged == gesture.state) {
        CGPoint translation = [gesture translationInView:gesture.view];
        // Move the view's center using the gesture
        view.center = CGPointMake(_centerX + translation.x, view.center.y);
    } else {// cancel, fail, or ended
        // Animate back to center x
        [UIView animateWithDuration:.3 animations:^{
            
            view.center = CGPointMake(_centerX, view.center.y);
        }];
    }
}

4. Conform to the UIGestureRecognizerDelegate delegate protocol (optional). See #1 above on how to conform to the delegate in the .m file using the Class Extension syntax.

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    // You can customize the way in which gestures can work
    // Enabling multiple gestures will allow all of them to work together, otherwise only the topmost view's gestures will work (i.e. PanGesture view on bottom)
    return YES;
}

Sample Code on GitHub

Download the sample code and see how quick an easy it is to use it in your iPhone apps.

https://github.com/PaulSolt/UIScreenEdgePanGestureDemo