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!

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.

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

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.

Solution Video

Play a YouTube Video URL from your iPhone App on iOS 7

Brewing coffee with Chemex and freshly roasted beans

Update 4/28/14: Pavel suggested checking out YouTube's resources for iOS.

I'm working on an update for my app Artwork Evolution. In the process of updating it for iOS 7.0, I wanted to display a video to show a demo on how to use the app. I thought that I could take advantage of the MPMoviePlayerController to play/pause the movie within my app, but it doesn't work with YouTube links (i.e. Coffee brewing with Chemex http://www.youtube.com/watch?v=Jeh40KFFS5Y).

YouTube doesn't give direct links to the movie files, instead it's a proxy webpage. You need to use the official HTML YouTube player to play a YouTube video on a mobile device. It's also against the terms of service to play the movie file directly. The work around is to use a UIWebView and HTML code to display the video. I don't like this approach because it feels unresponsive and requires a lot of code. You can see example code on StackOverflow, but you might have to massage it to get it working. It does keep the user inside the app, but I feel that the experience is worse than opening up the video in Safari or the YouTube app.

The easiest way to play a video from YouTube (or any other website) is to write a single line of code. If you copy/paste the YouTube video link into an NSString literal, you can create the URL and open it.

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=Jeh40KFFS5Y"]];

The Bigger Picture - App Tutorials

In Artwork Evolution, I'm designing a paging view controller (PagingViewController) that uses the UICollectionView and Auto Layout to display image and text content. Along the bottom I have a button to play a video tutorial and the Next button. When the user reaches the end of the tutorial, the next button becomes a Done button, and the tutorial screen can be removed from the screen.

Tutorial screens for Artwork Evolution with video playback

I display the tutorial screen when the app is first opened. When you launch a new version of the app, you can update the tutorial content and video link to feature the new content or functionality. 

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

Update 2-22-15: Xcode 6 doesn't show the Simulator Skin anymore. You should use the .PSD documents from Apple instead.

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.

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)

View fullsize

iPhone 4 (3.5" retina screen) 

View fullsize

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 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.