42

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

UINavigationBar:

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:

UIToolbar

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:

UINavigationController

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

Cœur
  • 32,421
  • 21
  • 173
  • 232
Axort
  • 1,944
  • 2
  • 22
  • 23
  • Can you tell exactly what you did to solve this issue? I tried the comments under the correct answer but they didn't help. I am having the same issue with the uitoolbar that i dragged in the storyboard. – AJ112 Sep 21 '13 at 19:23
  • Hi @AJ112. Are you using auto layout? If not, try setting the fixed point of the UIToolbar to the upper left corner. Then, put the code in the comments below (the frame code). It should work. – Axort Sep 21 '13 at 21:24
  • Yes i am using the Autolayout. Toolbar is already set as the fixed point to the upper left corner but it didn't work. Here is my question:http://stackoverflow.com/questions/18935821/ios-7-uitoolbar-overriding-with-status-bar/ – AJ112 Sep 21 '13 at 21:33
  • Just to confirm... Is your toolbar at (0,20)? Have you implemented UIToolbarDelegate on your UIViewController? if so... Have you set the delegate to your IBOutlet UIToolbar in viewDidLoad? You view controller has the implementation of UIToolbarDelegate? (positionForBar:) – Axort Sep 21 '13 at 21:46
  • and this http://stackoverflow.com/questions/18737186/position-of-navigation-bar-for-model-view-ios7/18753695#18753695 – DogCoffee Oct 22 '13 at 06:26
  • As of 2019 you just need to set the top layout constraints to 0 (the top). Otherwise you end up with a nav bar negatively positioned somehow. – Tofu Warrior Mar 05 '19 at 01:32

6 Answers6

48

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

Leo Natan
  • 55,734
  • 8
  • 140
  • 186
  • 1
    Hi! Thank you. I tried what you suggest but it didn't work. This is what I did: .h -> @property (weak, nonatomic) IBOutlet UIToolbar *toolbar; AND UIViewController ||then in .m (viewDidLoad) -> [this.toolbar setDelegate:self]; Then I added to .m -> #pragma mark UIToolbarDelegate - -(UIBarPosition)positionForBar:(id)bar { return UIBarPositionTopAttached; } || Am I doing something wrong? – Axort Sep 19 '13 at 18:57
  • 3
    You have to position the bar at (0,20), otherwise it would not work. In `viewDidLoad`: `CGRect frame = self.toolbar.frame; frame.origin.y = 20; self.toolbar.frame = frame;`. If you target only for iOS6 and iOS7, you can do this 20pt move entirely in Xcode using `iOS6/7 deltas`. – Leo Natan Sep 19 '13 at 19:01
  • Thank you so much! The problem was that the anchor point of the toolbar was to the left (between the corners) not to the left corner so it wasn't working. (I'm not using auto layout :P). I wonder why the storyboard doesn't put the uinavigationbar or uitoolbar at (0, 20) as a default position. Thanks again! – Axort Sep 19 '13 at 19:19
  • Does the UIBarPositionTopAttached have to be set programmatically, or is there an IB equivalent? – Ryan Sep 26 '13 at 21:13
  • It has to be returned in a delegate method. – Leo Natan Sep 26 '13 at 21:13
  • @Cœur Thank you for taking the time to edit my answers with updated documentation links. Please add links to ObjC documentations for questions where ObjC was expected. – Leo Natan Jul 02 '17 at 09:16
25

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

onmyway133
  • 38,911
  • 23
  • 231
  • 237
10

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.
Community
  • 1
  • 1
bobics
  • 2,263
  • 2
  • 21
  • 24
5

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.

David
  • 8,635
  • 5
  • 57
  • 64
  • 6
    Just worth mentioning that top and bottom layout guides are only available in storyboards, where views are embedded in view controllers. Using nib files, the process is more complex. – Leo Natan Nov 08 '13 at 15:55
0

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];
}
David
  • 8,635
  • 5
  • 57
  • 64
Utkarsh Goel
  • 235
  • 1
  • 5
0

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)

Anton Tropashko
  • 4,300
  • 3
  • 31
  • 53