Google+
Aug 19 2013

iOS 7 UI Transition – Porting View Controller Layouts from iOS 6

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.   

iOS Simulator Screen shot 16 Aug 2013 7.02.17 PM                 iOS Simulator Screen shot 16 Aug 2013 7.02.42 PM

    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)
{
   self.edgesForExtendedLayout = UIRectEdgeNone;
}

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.

iOS Simulator Screen shot 16 Aug 2013 7.02.17 PM      final2

If you are designing your App for iOS 7, we highly recommend leveraging the full screen layout that Apple recommends. There are also many other nifty controls in iOS 7 for view controllers, transitions and other UI widgets. Explore the iOS 7 transition guide and subscribe to our blog to learn how we are resolving these issues. 
wp user avatar 96x96

About

Sourabh is an iOS Developer at Mobinett Interactive and specifically focuses on iOS 7

Loading Facebook Comments ...