iOS 7 | Navigation bar / Toolbar buttons very close to status bar

Question

I have a problem when dragging a navigation bar or toolbar (storyboard) to my view controller.

UINavigationBar:

As you can see in the image above, the right button is almost overlapping the status bar.

With a UIToolbar it happens the same:

This view controllers are intended to be used as a Modal, that's the reason I'm not using a UINavigationController.

In another section I use a UINavigationController and it appears as I expect:

How can I drag a UINavigationBar / UIToolbar to a view controller without overlapping the status bar?

Answer 1

The navigation bars or toolbars have to be at (0, viewController.topLayoutGuide.length) with bar positioning of UIBarPositionTopAttached. You should set the delegate of your navigation bar or your toolbar to your view controller, and return UIBarPositionTopAttached. If positioned correctly, you will have the result in your third image.

More information here: https://developer.apple.com/documentation/uikit/uibarpositioningdelegate?language=objc

Answer 2

Do these steps

Drag the NavigationBar to your ViewController in Xib, set the ViewController as its delegate. Note that the NavigationBar should be at (0, 20)

In ViewController, conform to the UINavigationBarDelegate

@interface ETPViewController () <UINavigationBarDelegate>

Implement this method

- (UIBarPosition)positionForBar:(id <UIBarPositioning>)bar
{
    return UIBarPositionTopAttached;
}

positionForBar tells the NavigationBar if it should extend its background upward the Status Bar

Answer 3

Please see my answer here, I've copied the content below for convenience:

https://stackoverflow.com/a/18912291/1162959

The easiest workaround I've found is to wrap the view controller you want to present inside a navigation controller, and then present that navigation controller.

MyViewController *vc = [MyViewController new];
UINavigationController *nav = [[UINavigationController alloc] 
    initWithRootViewController:vc];
[self presentViewController:nav animated:YES completion:NULL];

Advantages:

• No mucking with frames needed.
• Same code works on iOS 6 an iOS 7.
• Less ugly than the other workarounds.

Disadvantages:

• You'll probably want to leave your XIB empty of navigation bars or toolbars, and programatically add UIBarButtonItems to the navigation bar. Fortunately this is pretty easy.

Answer 4

You can resolve this issue by using Auto Layout, as per this techincal note (Preventing the Status Bar from Covering Your Views).

Here are some excerpts:

Add the Vertical Space Constraint to the top-most view

• Control drag from the UIToolbar to the "Top Layout Guide"
• In the popover, choose "Vertical Spacing"
• Change the "Vertical Space Constraint" Constant to 0 (zero)

If you have other subviews below the UIToolbar, anchor those views to the toolbar instead of the Top Layout Guide

This will support ios6 and ios7.

Answer 5

You can also manage it by increasing height of navigation bar by providing image of size 620x128 for ios version. And this image is used in :

if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0)?YES:NO) {
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"newImage.png"] forBarMetrics:UIBarMetricsDefault];
}else{
    [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"previousImage.png"] forBarMetrics:UIBarMetricsDefault];
}

Answer 6

I gave up and had to set the navbar height constraint to 64 in x xib based VC cause viewController.topLayoutGuide.length is 0 in viewDidLoad despite statusbar being present :-[ which means in a non universal app on ipad you'd have 20 px on the top of the view wasted (cause status bar is separate from the iphone simulation window)