iPad Navigation Bar and Toolbar Height Changes in iOS 12

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

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.

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!

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:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Geoff Hackworth

Geoff Hackworth

Independent and freelance software developer for iPhone, iPad and Mac