As we mentioned in a previous blog post on iOS 7, the latest version brings quite a few changes in both design and functionality. The iOS 7 UI transition guide on the iOS developer website goes into details of every UI element and how it should be handled. If you are one of the few developers that have already started porting Apps from iOS 6 to iOS 7, you will notice that as soon as you open your App in Xcode 5, your views would have shifted to the top – basically not accounting for the status bar and the navigation bar. See below.
View Controller Layout – iOS 6 View Controller Layout – iOS 7
In iOS 7 view controllers by default take the full screen layout (i.e. wantsFullScreenLayout is true by default). Apple designed iOS 7 screens to extend from edge to edge so that the app content is discernible through translucent UI elements (Status and Navigation bars in iOS 7 can be translucent). This allows users to view more data on the screen.
To fix this issue we need to change the edge of the view controller by using the property edgesForExtendedLayout which is available only in iOS7. Note that wantsFullScreenLayout is deprecated in iOS7 so changing this property will not have any effect on the UIViewController.
In your UIViewController add
self.edgesForExtendedLayout = UIExtendedEdgeNone;
Update: Apple changed UIExtendedEdgeNone to UIRectEdgeNone
self.edgesForExtendedLayout = UIRectEdgeNone;
in the viewDidLoad method or init method.
Make sure to also add a check for the SDK version else your App will crash on iOS 6.
if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7)
Making these edits becomes easier if your view controllers extend from a base controller.
Comparing the views after making this change, you’ll notice that your iOS 6 views show up as they were designed.