iOS 7 status and navigation bar different height in storyboard than in app

Question

This is a view controller than is modally presented and therefore full screen.

In the storyboard, the "top layout guide" is at y:64 . That is what I would expect when the status bar is height:20 and navigation bar is height:44 .

However, when the app runs, the "top layout guide" is y:52 . I have no idea how or why it's losing 12 points.

Answer 1

When you use Apple's Navigation controller which inserts a navigation bar, it will have different heights based on your orientation. For example, the navigation bar is 44 points in portrait and 32 points in landscape. In your case, I'm guessing when your app runs, it is in landscape, thus the "top layout guide" is y:52 (32+20).

See this related post: NavigationBar with rotation.

Answer 2

If you are trying to monitor these navigation bar height changes for example like this:

-(void) viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    CGFloat navBarHeight = self.navigationController.navigationBar.frame.size.height;
}

You will realize that, although app changed orientation to landscape mode, navBarHeight 's value is still the old one ( 44 ). To tackle this, use intrinsic size instead:

-(void) viewDidLayoutSubviews
    {
        [super viewDidLayoutSubviews];
        CGFloat navBarHeight = self.navigationController.navigationBar.intrinsicContentSize.height;
    }

Answer 3

In general , you can't be sure that the geometries of objects in storyboard (or a nib) will be the final on-screen geometries. The final on-screen geometries will depend upon not only device orientation, but also the screen dimensions (eg, 3.5-inch vs. 4-inch iPhone).

Unfortunately, it's easy to think otherwise. For example, if storyboard is simulating the 4-inch iPhone in portrait and you run the app in the 4-inch Simulator in portrait, then the final on-screen geometries will be the same as those in storyboard.

To simulate different orientations or screen dimensions in storyboard, visit the view controller's Attributes inspector:

If you're using Xcode 5, there's also a "floating" button on the IB canvas in the bottom-right-hand corner that allows you to quickly change which form factor is simulated.