IOS

IPad

Xcode 10

Ios 12

iPad Navigation Bar and Toolbar Height Changes in iOS 12

7 min readJun 16, 2018

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:

Xcode 9.4 / iOS 11 build of Adaptivity running on 10.5" iPad Pro simulator running iOS 11 with small titles

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:

Xcode 9.4 / iOS 11 build of Adaptivity running on 10.5" iPad Pro simulator running iOS 11 with large titles

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 9.4 / iOS 11 build of Adaptivity running on 10.5" iPad Pro simulator running iOS 12 beta 1 with small titles

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: 😲

Xcode 10 beta 1 / iOS 12 build of Adaptivity running on 10.5" iPad Pro simulator running iOS 12 beta 1 with small titles

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:

Xcode 10 beta 1 / iOS 12 build of Adaptivity running on 10.5" iPad Pro simulator running iOS 12 beta 1 with large titles

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 .app file that it produced. The simplest way to do that is to expand the Products folder in the Xcode project navigator, right click and choose Show in Finder. Copy the .app file 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 .app file 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.