Transitioning an iOS 6 design to iOS 7: A quick, helpful tip
Use the assistant view and iOS 6/7 deltas to update your app
Like it or not, iOS 7 is here and it’s not going anywhere. The next time you open a pre iOS 7 app in the new Xcode 5, you’re going to be prompted to upgrade the project for iOS 7. The major difference is obviously the new UI style, and chances are some components of your app are not going to transition smoothly between iOS 6 (or less) and iOS 7. Here is a quick tip to help you on your journey.
Once you upgrade your Xcode project for iOS 7, you’ll notice things have changed considerably in the Interface Builder. Open up your Storyboard or any view and you’ll see what I mean. To Apple’s credit, the vast majority of your interface should still layout properly, but there are some common issues. One of these issues is the drastic change in how the UI Navigation Bar is presented (aka the Title Bar). The height and the spacing have been altered in a way that causes your iOS 7 layout and iOS 6 layout to differ in vertical placement.
It’s tempting to start rearranging everything that looks out of place and get your app back to a functioning state, but before you do, here is a handy trick to help you maintain the usability of pre-iOS 7 devices as well.
Step 1
In Xcode 5, open your storyboard or view you want to edit.
Step 2
Next, in the upper right corner of the screen, click the “Assistant” view button.
This will open up a split screen view of the interface. By default, it will show you iOS7 short screen on the left and iOS7 tall screen on the right.
Step 3
In the lower right corner of the Interface Builder, click the dropdown that says “iOS 7.0 and Later” and change it to “iOS 6.1 and earlier”.
Now you will have a view of how your app looks on both pre and post iOS 7 devices.
Step 4
Finally, and most importantly, you have the ability to specify element position changes that are specific to pre iOS 7 devices. Select the Size Inspector on the right toolbar and you’ll see a section labeled iOS 6 / 7 Deltas.
Using those deltas, you can adjust the size and position of your elements for iOS 6 only and use the normal X,Y,Width,Height fields for iOS 7.
Xcode to the rescue
This was a lifesaver for me once I was made aware of it. Don’t forget to test your application on both pre and post iOS 7 devices!
Read more of Matthew Mombrea's ByteStream blog and follow Matt on Twitter (@mombrea) and Google+. For the latest IT news, analysis and how-tos, follow ITworld on Twitter and Facebook.
