Screen Edge Swipe Gesture on iPhone using the UIScreenEdgePanGestureRecognizer Tutorial

 
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



Auto Layout Bug with the Top Layout Guide for Xcode 5

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

Xcode Fix: Show the iPhone Simulator Skin on a Retina Display

My students get confused when they’re working on an iPhone app and they run the iOS Simulator and only see a rectangular screen. Contrary to popular belief, you don’t need to see the “iPhone skin” to make an iPhone app. You won’t see the skin if your working on iOS 7 apps, scaling the iOS Simulator to something other than 100%, or making iPad apps. There’s two options to get the iPhone Skin to work, and I’ll explain what the retina iPhone screen means.

Option 1: Turn Off Scaling

If you scale the size of the iPhone simulator to 50% or 75% the skin will not display. It’s not documented behavior. I believe that Apple did this because it prevents screenshots of iPhone apps that are blurry or distorted. If you need to take screenshots for marketing, Apple offers iOS device .PSD files for Photoshop that include the skin that you can use for promotional purposes.

iPhone 5S for marketing your apps.

iPhone 5S for marketing your apps.

Option 2: Get a Retina Display

On iOS 7 there are no non-retina iPhone’s that can run the OS. You’ll be targeting an iPhone 4, iPhone 4S, iPhone 5, or iPhone 5S as the minimum system requirements. Because of this new restriction, when you go to make your iPhone app, the screen that you’re going to see on your computer is going to be a retina iPhone screen. It’ll be a 1-to-1 pixel representation and it will be huge!

If you’re on a non-retina display (i.e. external monitor, Macbook Air, iMac, or older Macbook Pro) you will not see the “iPhone skin” Instead you’ll see one of two things. Either a popup window that looks like the dimensions of the screen, or you’ll see a strange black frame around a very large window.

What is a retina iPhone Screen?

There are a ton of pixels on a retina screen, it’s double the size of what the original iPhone shipped with, which was 480x320 pixels (height x width). To top it off, Apple launched a new iPhone 5 with even more pixels in the vertical direction. Here are the current iPhone screen sizes. Take a look at how big these iPhone screens look at full resolution.

  • iPhone 4/4S: 960x640 pixels (height x width)
  • iPhone 5: 1136x640 pixels (height x width)

iPhone 4 (3.5" retina screen) 

iPhone 5 (4" retina screen)

Desktop Retina Screens

Mobile device screens have been far ahead of the desktop screen sizes since the first introduction of Apple’s retina display on the iPhone 4. At the time, the increase in pixel density was a huge upgrade and cutting edge. Now the mobile market has caught up, but pixel density on desktop displays is still behind. The retina Macbook Pro’s are one of the few options for a large (i.e. 15”) monitor, unless you’re willing to spend $3,500 on a 32” 4k display from Sharp.

 

Buying the Sharp 4k display won’t solve your desire for more pixels either. The graphics power required for a display of that size is enormous. To power a desktop sized retina monitor your computer needs a very, very fast graphics card. These graphics cards are expensive (and will be for the next several years). You’ll need a 2013+ Retina Macbook Pro or the new 2013+ Mac Pro to show all of the pixels on 4K monitors (3840x2160 pixels).

 

Retina Macbook Pro

The 15” retina display on my Macbook Pro has 2880x1800 pixels (width x height). That’s just enough pixels to display a retina version of the iPhone 5 Simulator. If you’re on the Macbook Pro 13” your resolution is 2560x1600 which is too small to display the retina iPhone 5 skin, but large enough to display the retina iPhone 4 skin.

  • iPhone 4 Skin - 1488 x 792 (height x width)
  • iPhone 5 Skin - 1668 x 828 (height x width)
iPhone 4 Skin - 1488 x 792 (height x width)

iPhone 4 Skin - 1488 x 792 (height x width)

iPhone 5 Skin - 1668 x 828 (height x width)

iPhone 5 Skin - 1668 x 828 (height x width)

Bug Fix: Multiple Monitors and the iPhone Skin

I’m on a Retina display, but I connect to an external display. When I move the iPhone Simulator between screens it doesn’t update to show the retina iPhone skin. In order to get it to redraw itself with the skin, you can just change the current device that you’re simulating. Toggle between the iPhone 4” and iPhone 3.5” screens from the Menu Bar.

Go to the Menu > Hardware > Device > iPhone Retina (4-inch)

You can also do this fix after you’ve detached from a non-retina display and are now back to just working off of your Retina Macbook display.

Connect

  1. Join my iPhone mailing list to keep learning how to make iPhone apps.
  2. For more structured learning, signup for my online iPhone app course.

Top 3 Projects from How to Make an iPhone App for iOS 7 in January 2014

We ran another successful app challenge in my new course How to Make an iPhone App for iOS 7! There were 47 projects submitted for the competition and it was narrowed down to three winners. Each of these students has built an app from scratch and taught themselves Objective-C and iOS app development along the way.

The students started with sketches based on their app ideas, moved to paper prototyping, and then began writing code to bring the app to life. Checkout the project pages and leave some love!

1st Place

Thread List: Embroidery Floss/Thread Manager

by Josh Greco

"There are hundreds of different colored embroidery flosses and it can be difficult to keep track of what you have on-hand versus what you need for any given project. This application aims to simplify this task and help ensure you always have enough of the materials you need.

Features:

  1. Maintain a database of embroidery floss on-hand.
  2. Maintain a database of personal projects and their embroidery floss requirements.
  3. Maintain a database of all available embroidery floss produced by the DMC manufacturer.

My wife is an avid "stitcher" and has thusfar been unhappy with existing apps which advertise similar functionality. If I can make something she can use and enjoy, it stands to reason that others would find it useful."

2nd Place

ClimbNotes

by Trish Ang

"ClimbNotes is an app for rock climbers! More specifically, it's a personal note-taking app for any projects that a climber is working on. A project is a climbing route that requires multiple tries and sometimes long periods of time to complete. 

This app is actually a sub-function of a larger app I'm developing, SuperBeta: an interactive guide for outdoor climbing. Since the functionality is a lot more simple, however, I'm focusing on learning the basics of objective C and also learning how to customize the UI through Xcode. 

Below is an early sketch and a test walkthrough is available here. The functions for ClimbNotes are basically:

  • Add a new route
    A route requires at least one image. You can add a title, a difficulty grading, a quality grading, and tie it to a location. You can also add supplemental information like a description, categorize the type of climb it is, etc. If possible, I'd also like the user to be able to trace the route onto the photo.
  • Take notes on your progress
    On routes you've already recorded, you can make notes for each attempt you make. For example, I can say I tried the route again last Sunday and got two moves further, but still fall around 70% through."

ClimbNotes Video Link

3rd Place

Brewer Note

by Andy Culler

"What's the biggest problem with homebrewing? Forgetting an awesome recipe! From brewday to cracking that first bottle is at least 3 weeks, which is plenty of time to not write it down.  Why not record your recipe as you're brewing, complete with notifications for every step of the way?  BrewerNote brings this all to your phone along with brew history, recipe sharing, and more

Recipes

The recipes section will be used to store the detailed ingredients and steps to brew each recipe that the user inputs.  These will be associated with brews, both current and completed.

Current Brews

The current brews section tracks brews that are currently either being brewed (still in the kettle) or in some stage of fermentation. The main reason that this is important is for timers. These timers include:

  • Hop additions
  • Fermentation stages
  • Carbonation

Completed Brews

The completed brews section is a history of past brews.  This is helpful when, down the line, you crack open an old bottle of brew. So long as it's labeled, this section will allow you to go back and see what ingredients were used, how long it was fermenting, and how long it aged."

Learn About Auto Layout for Xcode 5 and Interface Builder

When we design an iPhone/iPad app, the positions of the buttons, images, and text fields is called layout. Apple created Auto Layout to help automate the process of positioning our user interface (UI) elements, and to reduce the amount of code we write. 

Xcode’s Interface Builder is a great tool to quickly layout your user interface for your iPhone or iPad app. The way it works has changed from Xcode 4 and I'm going to explain how it works in Xcode 5.

No Automatic Layout Constraints in Xcode 5

In Xcode 5, when you first design your iPhone interface there are no automatically generated layout constraints (blue barbells). In Xcode 4 after dragging a button onto the canvas the layout constraints (blue barbells) appeared around the button. The layout constraints snapped to the closest edges and changed every time you moved a button or label.  The feature was suppose to be helpful in setting up layout constraints, but it was problematic and made layout very, very frustrating.

New Xcode 5 Behavior 

The Xcode 5 layout setup and behavior has changed for the better. It's easier to use after you understand how it currently works. Layout can be one of the most frustrating things, and layout on Xcode 5 is a lot less frustrating. When you position a button you won't see the layout constraints (blue barbells) immediately. The initial placement of views, buttons, and images will match what you see on the iPhone.

Auto Layout Constraints in Xcode 5 as blue barbells

Auto Layout Constraints in Xcode 5 as blue barbells

Running the iPhone App with Initial Drag-and-Drop Placement

If you run the iPhone app with the new buttons you dragged onto the screen, everything will appear exactly as you placed it. Imagine a push-pin in the top left corner of every button or text field. That push-pin holds the button on the iPhone app, until you explicitly tell Xcode to move it. The same concept applies to dimensions (sizes), both the width and the height you set will match what you see on the iPhone simulator.

Layout Constraints Need to Describe Position and Size

Layout is describes where something will appear and how big it will be. A button can be 80 x 40 points big and with it's top left corner at (x, y) coordinate (100, 100). 

Auto Layout provides a lot of flexibility in how we can describe these attributes. We can describe position and size in relation to left, right, top, bottom of other user interface elements. Widths of different buttons in a game menu can be equal, and the buttons can be centered along the Y-axis (vertical axis) to create a single centered column layout. We can even make a profile image stick to the top left corner of the screen.

Using Auto Layout to center and match button widths for Bomb Dodge.

Using Auto Layout to center and match button widths for Bomb Dodge.

Conflicting Directions are Easy

It's possible to send conflicting directions with Auto Layout. As an example, if I told you to take a left down main street and a right down main street there are three outcomes. You might go left, right, or ask me for directions again. When Xcode is given conflicting directions it will make a decision to either go left or to go right. The same concept applies to position and size layout constraints. Xcode will try to layout your user interface, but if you provide conflicting constraints the app may look different every time you open it.

Points Not Pixels

We work with points when we describe layout. A button 100 pixels wide, on a non-retina iPad Mini (1024x768 pixels), would look twice as long as a button with a width of 100 pixels on a retina iPad Mini (2048x1536 pixels). If we tried to use pixels, we’d have to make special cases for retina and non-retina displays, which would add more code and potential bugs. To simplify the problem, Apple introduced points, which are related to pixels, but there is a scale factor. On a retina display in 2013 we can convert points to pixels using the scale factor of 2. On a non-retina display the scale factor is 1. Using points, a 100 point wide button would appear to be the same size visually. However, it would be 200 pixels wide on a retina screen and 100 pixels wide on a non-retina screen.

Layout Example

Let's make a button that is positioned relative to the edges of the iPhone. It will span the area 10 points from the left side to 10 points from the right side. The positional layout provides a flexible width. On a portrait iPhone 5 (568x320 points) that would make it 300 (320 - 10 - 10) points long. If you rotate the iPhone 5, you'd have a button that was 548 (568 - 10 - 10) points long. That works great!

Auto Layout Problems

Let's add a requirement from our artist. The button needs to be exactly 200 points long. If we combine this width constraint with our existing position constraints, we will have a conflict. Xcode isn't sure if the button should be on the left side, the right side, or if it should be bigger than 200 points long. The new width constraint conflicts with the left and right position constraints. 

Auto Layout conflicts can cause unexpected behavior.

Auto Layout conflicts can cause unexpected behavior.

  1. The top button has 2 constraints, to hold it to the left and right edges. These position constraints also describe the width as 300 points.
  2. Adding an artists constraint for a button, forces a conflicting width constraint of 200 points.
  3. The bottom three buttons are what can happen when there is a conflict. The Auto Layout system will break one of the three constraints so that there is not a conflict.
  4. Breaking the constraint results in the button hugging the left side, the right side, or ignoring the width constraint (hugging both sides).
Rotating Auto Layout can expand or shrink buttons on iPhone

Rotating Auto Layout can expand or shrink buttons on iPhone

Ambiguous Layout

When we have a conflict of constraints we get unpredictable behavior in Xcode. The layout is called ambiguous since one of the constraints, or statements will need to be broken. That means that the buttons, views, or images will not appear where you want, and may change every time you run the iPhone app. Ambiguous layout is something we need to learn to avoid, and with a little practice you can avoid it.

Next Learn Practical Layout Examples

In my next post, I'll explain how to use Auto Layout to achieve various placements of images, buttons, and iPhone app UI.

Connect

  1. Join my iPhone newsletter to keep learning how to make iPhone apps.
  2. For more structured learning, signup for my online iPhone app course.

What is Auto Layout?

Auto Layout is used to create position and size relationships between buttons, images, views, and text in iPhone apps. In Xcode 5, the Interface Builder works even better with Auto Layout. If you need more control, complex layouts can be created in Objective-C code that respond to touch.

Read More