What is the height of Navigation Bar in iOS 7?

Question

I 've just created a simple iOS 7 app using the default Master Details template.

In the MasterViewController.m, viewDidAppear method, I logged for

self.navigationController.navigationBar.frame.size.height
self.navigationController.navigationBar.frame.origin.y

and received 44 and 20 accordingly. This seems weird, because from what I read, the Navigation Bar in iOS 7 should be 64 point height and start at 0 point, so that it sits underneath the Status bar. What I read are

1) iOS 7 UI Transition Guide

Because the status bar is transparent, the view behind it shows through

2) Using Background Image in Navigation Bar

If your app uses a custom image as the background of the bar, you’ll need to provide a “taller” image so that it extends up behind the status bar. The height of navigation bar is changed from 44 points (88 pixels) to 64 points (128 pixels).

Solution 1

I got this answer from the book Programming iOS 7, section Bar Position and Bar Metrics

If a navigation bar or toolbar — or a search bar (discussed earlier in this chapter) — is to occupy the top of the screen, the iOS 7 convention is that its height should be increased to underlap the transparent status bar. To make this possible, iOS 7 introduces the notion of a bar position.

UIBarPositionTopAttached

Specifies that the bar is at the top of the screen, as well as its containing view. Bars with this position draw their background extended upwards, allowing their background content to show through the status bar. Available in iOS 7.0 and later.

Solution 2

There is a difference between the navigation bar and the status bar. The confusing part is that it looks like one solid feature at the top of the screen, but the areas can actually be separated into two distinct views; a status bar and a navigation bar. The status bar spans from y=0 to y=20 points and the navigation bar spans from y=20 to y=64 points. So the navigation bar (which is where the page title and navigation buttons go) has a height of 44 points, but the status bar and navigation bar together have a total height of 64 points.

Here is a great resource that addresses this question along with a number of other sizing idiosyncrasies in iOS7: http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

Comments

[JaredH]

Check this out for more info on UIBarPositionTopAttached: developer.apple.com/library/ios/documentation/uikit/referenc‌​e/…