Screen Edge Swipe Gesture on iPhone using the UIScreenEdgePanGestureRecognizer Tutorial

by Paul Solt in


 
UIScreenEdge Gesture Recognizer for iPhone Side Swipe Detection

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



Posted by Paul Solt.

Auto Layout Bug with the Top Layout Guide for Xcode 5

by Paul Solt in


Update (3/14/14): Xcode 5.1 fixes this bug. When you drag to the top it'll add the appropriate top constraint and won't send your views offscreen or offset them incorrectly.

I do a lot of UI work in Xcode 5 with Interface Builder. I'm building class materials and this is a very common bug, that I didn't figure out a good solution until now. These types of bugs can make Auto Layout very frustrating to learn because it doesn't behave like you might expect. I'll describe the bug below, the solution, and a video solution for the curious.

Top Layout Guide Bug

If you add a view to a .storyboard or .xib file, you can align it to the top edge or just under the status bar. This edge under the status bar in Xcode 5 is called the Top Layout Guide. The guide is a helper for setting up constraints, but unfortunately it doesn't work as you might expect most of the time.

When you Right-click + Drag (Ctrl + Left-click + Drag) to add constraints to the Top Layout Guide it'll add the wrong constraint and your iPhone app layout will not be what you expect.

The layout doesn't match what we would expect. Label is squashing our status bar text!

The layout doesn't match what we would expect. Label is squashing our status bar text!

Instead of adding a constraint from the top of the view to the Top Layout Guide, it adds a constraint from the bottom of the view to the Top Layout Guide. For some reason this creates a constraint that pushes your view upwards and it conflicts with the status bar, or it'll go above the status bar.

Solution

The work around is to use the Menu bar options to add the constraint using the Pin menu. You can't add the constraints with the Right-click + Drag menu. Note: Delete any previous constraints to the Top Layout Guide, or the steps below won't help.

Editor > Pin > Top Space to Superview

Pin the Top Space to the Superview and you'll fix your bug.

Pin the Top Space to the Superview and you'll fix your bug.

After we add the Pin to the superview, we'll have to add all the normal constraints. You should see the following constraints (visually) if you look at the top view.

Correct Auto Layout Constraints for the Top Layout Guide

Correct Auto Layout Constraints for the Top Layout Guide

4 Layout Constraints to specify the size and position 

4 Layout Constraints to specify the size and position 

Using the new layout, the label will appear on the iPhone Simulator in the correct spot, and so will the red UIView. Now using this powerful tip you can make your app match your design.

Proper Auto Layout for a UIView that is near the top of an iPhone.

Proper Auto Layout for a UIView that is near the top of an iPhone.

 

Solution Video

Posted by Paul Solt.