iPad Navigation Bar and Toolbar Height Changes in iOS 12
I just found a post iPad Navigation Bar height now 50 [on iOS 12] in the Apple Developer Forums. What!? This wasn’t mentioned in the Platforms State of the Union or What’s New in CocoaTouch. The post is 11 days old (as I write on 16th June 2018). I follow a lot of developers on Twitter, read a lot of blogs and listen to a lot of podcasts. How have I not heard about this change? Could this increase in iPad navigation bar height really be true? My Adaptivity app is the perfect tool to investigate…
Xcode 9 / iOS 11 and Earlier
Apps that were built with Xcode 9 or earlier (i.e. targetting iOS 11 or earlier) see the very familiar behaviour: the navigation bar and toolbar are 44 points tall, the status bar is 20 points tall, making the effective navigation bar height 64 points when the status bar is not hidden:
iOS 11’s large titles add 52 points to the navigation bar height, giving a total of 96 points without a status bar and 116 points with a status bar:
Running the same Xcode 9 build of Adaptivity on a real device or iPad simulator running iOS 12 beta 1 shows the new layout of the status bar contents. The time is now on the left, leaving space in the middle of the screen for a widely-expected notch! [EDIT: wrong!] The height of the navigation bar and toolbar, however, are unchanged. This is Apple’s backwards compatibility at work.
Xcode 10 / iOS 12
Building with Xcode 10 beta 1 (i.e. targetting iOS 12 beta 1) does indeed reveal the new iPad navigation bar and toolbar heights are 6 points taller at 50 points. Including the status bar, the navigation bar is now 70 points tall. For apps that show a navigation bar and a toolbar, that’s 12 fewer points of height available for your content: 😲
Large titles continue to add a further 52 points to the height of the navigation bar, giving a total of 102 points without a status bar and 122 points with a status bar:
The larger navigation and toolbars are also found in modally-presented view controllers when using form sheet, page sheet or popover presentation styles:
Update: Tab Bars Changed Too
In iOS 12, iPad tab bars have also changed height from 49 to 50 points tall. This removes the height differences between toolbars and tab bars on iPad. On iPhone tab bars remain 49 points tall in portrait and 32 points tall in landscape. iPhone X added extra height for the Home Bar to toolbars and tab bars and their sizes are unchanged from iOS 11: 83 points tall in portrait and 53 points tall in landscape.
Conclusion
As we’ve seen many times in the history of iOS when important behavioural changes occur, the larger iPad navigation and toolbar heights require a developer to implicitly opt in by building with Xcode 10. Old apps won’t suddenly appear differently on iOS 12 (well, not for this reason at least…!) Developers will be able to release updates to their apps built with Xcode 9 for the foreseeable future, maintaining the previous bar heights, even when run on iOS 12.
The 9.7", 10.5" and 12.9" iPad simulators running iOS 12 all show the same 6 point taller navigation bar and toolbar sizes. I have not seen any size changes on iPhone.
This is only iOS 12 beta 1, so things could still change. I suspect that these changes are preparation for a new iPad in September 2018 with Face ID. The changes to the layout of the status bar are a pretty big clue that an iPad with Face ID will include a notch [EDIT: wrong!]. As with iPhone X, that will likely increase the height of the status bar and, therefore, the effective height of navigation bars. If this theoretical new iPad also includes a Home Bar then the toolbar and tab bar heights will likely be increased further. As happened last year with the iPhone X, I expect Apple to letterbox / pillar box iPad apps that are not built with Xcode 10 when run on an iPad with Face ID.
These changes show that it is becoming increasingly important to design adaptive apps which don’t hard-code content size or make assumptions about the heights of navigation bars, toolbars or tab bars. Auto layout, layout margins/guides and, since iOS 11, the Safe Area are your friends!
Wait, What Did You Say?
Did I really run an Xcode 9 build of my app on an iOS 12 simulator? Yes:
- build the app on Xcode 9 (obviously!)
- find the
.appfile that it produced. The simplest way to do that is to expand theProductsfolder in the Xcode project navigator, right click and chooseShow in Finder. Copy the.appfile somewhere safe (e.g. to the Desktop) - quit Xcode 9 and, if it is running, the Xcode 9 simulator
- launch Xcode 10 and run any app to open the iOS 12 simulator you want to test with. You can probably manually launch the simulator, but it’s quickest to just run any app and have Xcode do it for you
- drag and drop the
.appfile from your Desktop onto the simulator to install it - you can now run your Xcode 9-built app on the iOS 12 simulator simply by tapping the icon on the home screen!
You won’t be able to launch and debug the app from Xcode, but you will be able to manually run apps built with Xcode 9 on the iOS 12 simulators this way. Attaching the Xcode 10 debugger to the process looks like it might work, but I was unable to get the app to stop at breakpoints.
This process, switching back and forth between Xcode 9 and 10 is a bit of a pain, but if you don’t have a real device running iOS 12, this is one way to try and check that your apps built with Xcode 9 aren’t going to immediately break on iOS 12. That can buy some time to work on building your app with Xcode 10, opting in to new iOS 12 behaviour and fixing any problems.
If you do have real devices running iOS 12 then it is possible to get Xcode 9 to recognise them by creating a symbolic link to Xcode 10’s iOS 12 device support files in your Xcode 9 installation. See Peter Steinberger’s gist for more information and update the paths accordingly. Thanks Peter. This trick has been very, very helpful to me with the last few iOS releases 😍
Adaptivity iOS App
The screenshots in this article were taken from the iOS simulator running my Adaptivity iOS app. Adaptivity is a tool for developers and designers to visualise the different screen sizes, layout margins, readable content guides, bar heights and Dynamic Type sizes that a modern, adaptive, iOS app uses when running on different devices and iPad multitasking sizes. More screenshots and information on all the features is available on my web site.
Other Articles That You Might Like
If you’re an iOS developer you might be interested in my long-running series of articles that show how apps adapt to newer device sizes depending on which Xcode version they are built with:
- How iPad Apps Adapt to the New 10.2" iPad
- How iPad Apps Adapt to the New 11" and 12.9" iPads Pro
- How Apps Adapt to the Series 4 Apple Watch Screen Sizes
- How iOS Apps Adapt to the iPhone XS Max and iPhone XR Screen Sizes
- How iOS Apps Adapt to the iPhone X Screen Size
The screenshots in those articles were also taken from the iOS simulator running my Adaptivity iOS app. There is an iPhone-only version of the app to show How iPhone-only Apps Appear on iPad (it changed in iOS 12).
I have also written about External Display Support on iOS and Working with Multiple Versions of Xcode. You must certainly have noticed the View Controller Presentation Changes in iOS 13.
If you found any of these articles helpful then please take a look at my apps in the iOS App Store to see if there’s anything that you’d like to download (especially the paid ones 😀). If you work with a lot of Xcode projects you might like my Mac Menu Bar utility XcLauncher.
