Reconciling iOS 6 and iOS 7 with Interface Builder

Written by: on December 11, 2013

iOS 7 is out, but we can't completely forget about iOS 6 just yet.

One of the biggest challenges you face in updating your app for iOS 7 is making sure you don’t abandon those users who haven’t updated yet (we’re looking at you, Aunt Beverly). Here are a few tips to ensure your app is both visually appealing and technically functional in both iOS 6 and 7:

Configuring Interface Builder Files

Top and Bottom Layout Guides in Interface Builder.

Setting up your Interface Builder Storyboards and/or XIBs correctly can go a long way in making developing for both iOS 6 and iOS 7 easier. Our first suggestion is to create Storyboards for all of your UIViewControllers that are complex or control views that span the entire height of the screen. If you are working with a project that is already developed using XIBs (and no Storyboards), the Storyboards can be as simple as your 'UIViewController' with a view container for a view that you later load from a NIB. The primary reason we suggest using Storyboards is that they give you access to the Top and Bottom Layout Guides in Interface Builder.

Interface Builder's "View as" setting. This is set on a per-file (NIB or Storyboard) basis.

Additionally, we suggest that you change the View as setting on all of your XIBs and Storyboards to iOS 7 and Later. Having all of your XIBs and Storyboards set this way will make dropping iOS 6 support in the future much easier. Moreover, if you aren't using Auto Layout, this will make using the iOS 6/7 Deltas easier and more intuitive.

Adjusting for the Status Bar

In iOS 7, the area behind the status bar becomes useable screen space. As a result, the window in iOS 7 is 20 points taller than it is in iOS 6. This can cause content at the top of the screen to appear underneath the status bar in iOS 7. Adjusting views to make use of or avoid this extra space in iOS 7 frequently causes views to be misplaced in iOS 6.

Content under the Status Bar in iOS 7.
Content being pushed off of the bottom of the screen in iOS 6.

If your project doesn’t use Auto Layout, issues caused by the status bar differences between iOS 6 and iOS 7 can be resolved by using Springs, Struts, and iOS 6/7 Deltas. In order to prevent the content from being placed under the status bar, simply move the content down, however many points are necessary, to get the content out from under the status bar. However, this causes the content to be moved down in iOS 6 as well, which we didn’t want, since the content wasn’t under the status bar in iOS 6. To remedy this, use iOS 6/7 Deltas to set a negative Y Delta, equal to the number of points that we moved the content down for iOS 7. For example, if we moved content down 20 points for iOS 7, then we set a Y Delta of -20 points. For content near the bottom of the screen, it is often easier and more robust to simply use correctly configured struts and springs, instead of iOS 6/7 Deltas, to position the content relative to the bottom of the screen. A very similar tactic can be used when adjusting views that span the entire height of the screen. Adjust the height and/or origin in your Storyboard or XIB to achieve the size and position you would like in iOS 7, and then use Y and/or Height Deltas, in combination with Springs and Struts, to resolve the size and/or position in iOS 6. Below, I have provided a simple example, using two image views (one at the top of the screen and one at the bottom of the screen).

Interface Builder settings for the top UIImageView to keep it directly under the Status Bar in iOS 7 and iOS 6.
Interface Builder settings for the bottom UIImageView to prevent it from being pushed off of the bottom of the screen.

Auto Layout makes solving issues caused by the status bar differences simpler, assuming you are using Storyboards, as mentioned before. Simply use the Top and Bottom Layout Guides provided by Interface Builder. If you make your top and bottom NSLayoutConstraints relative to the Top and Bottom Layout Guides (instead of the top and bottom of the root view), then iOS will automatically make the adjustments necessary to have everything laid out on screen and out from under the status bar, in both iOS 6 and iOS 7. If you aren't able to use Storyboards, you will likely need to use code to access the Top and Bottom Layout Guides. Below is the same example as before but resolved using Auto Layout and NSLayoutConstraints that are relative to the Top and Bottom Layout Guides.

The top UIImageView's top constraint set relative to Top Layout Guide.
The bottom UIImageView's bottom constraint set relative to Bottom Layout Guide.

And now, regardless of whether Struts, Springs, and iOS 6/7 Deltas or Auto Layout with Top and Bottom Layout Guides are used, everything is laid out correctly in iOS 6 and iOS 7.

iOS 7 after making the adjustments in Interface Builder.
iOS 6 after making the adjustments in Interface Builder.

Adjusting for a UINavigationController with iOS 7's Translucent UINavigationBar

Translucent setting for UINavigationBar in Interface Builder.

One of the more common challenges when simultaneously supporting iOS 6 and iOS 7 with Interface Builder is setting a UINavigationController’s UINavigationBar to translucent for iOS 7. Making the UINavigationBar translucent can have a fairly large impact on your views and will likely require you to make some changes.

Extend Edges setting in Interface Builder.

If Extend Edges is set to Under Top Bars for a UIViewController, you will notice that toggling the Translucent setting on the UINavigationBar in Interface Builder will cause the views to move up and down. Setting the UINavigationBar to translucent causes views to move up under the UINavigationBar in iOS 7. In iOS 6, nothing changes; the views stay below the UINavigationBar. This is due to translucent UINavigationBars deprecation in iOS 6. You will notice that the Black Translucent UIBarStyle is now marked as deprecated, and the other UIBarStyles create opaque UINavigationBars in iOS 6. This causes a situation very similar to the new status bar that we discussed in the previous section, where the useable screen space is taller in iOS 7 than it is in iOS 6.

Most of the issues that adjusting the translucency of the UINavigationBar creates can be fixed using the same methodology as discussed in the previous section. However, an extra step may be necessary if one or more of the views that gets moved up under the UINavigationBar is a UIScrollView (or a subclass of UIScrollView, such as UITableView). If you are using a Storyboard to build out the UIScrollView (or subclass) that gets moved up under the UINavigationBar, then the content insets will likely get set automatically. The automatically adjusted content insets ensure that the content within the UIScrollView will have an initial offset that puts it below the UINavigationBar, and, thus, immediately visible to the user. However, if the UIScrollView (or subclass) that gets moved up under the UINavigationBar is handled in a less direct way (for example if it is built in a XIB and later loaded into a container view), then you may need to set the content insets yourself.

It is possible to set content insets in Interface Builder, but, in this case, I would suggest doing so in code, for a couple of reasons. First, we only want to set the insets for iOS 7 and not iOS 6, which is not possible in Interface Builder. Second, since we only want to set the content insets when running in iOS 7, we can use the Top Layout Guide to help us set the content insets (even if your Storyboard or XIB doesn't use Auto Layout). Below is an example of how this can be accomplished. In the example, I used a UITableView instead of a UIScrollView, since that is a more common case. Be sure you are on iOS 7 or later before accessing the topLayoutGuide property of UIViewController`.

Making your app visually appealing and fully functional on both iOS 6 and 7 can be quite the challenge, particularly since every app is uniquely constructed. Anticipating and covering every possible situation that developers will run into when supporting iOS 6 and iOS 7 simultaneously is nearly impossible; hopefully, this article will help with some common cases and put you on the right track for handling the rare or complex cases.

Like solving problems like these? Interested in a career in iOS Development? If you think you’d be a good fit for our team, we’d love to talk!

Taylor Case

Taylor Case

Taylor Case is a Software Engineer at POSSIBLE Mobile specializing in iOS Development. Taylor also enjoys cycling, pina coladas, and getting caught in the rain. Follow Taylor on Twitter or visit his website.
Article


Add your voice to the discussion: