Is there a way to change the height of a UINavigationBar in Storyboard without using a UINavigationController?

Question

I want to use a custom UINavigationBar in one of my views, which is not a part of any UINavigationController-hierarchy. When I drag a UINavigationBar into Storyboard, it shows like this:

This bar is 44px, which would be enough if the status bar wouldn't share this space. Because iOS7 lets us use the entire screen, including the space for the status bar, the UINavigationBar should be 64px tall, not 44px.

If I connect the view to a UINavigationController's hierarchy, then it shows correct:

I read somewhere that if the UINavigationBar has the property barPosition: set to UIBarPositionTopAttached, then the bar would be 64px. This is, however, a readonly-property.

My search results have only shown something I consider a "work-around". By adding a useless UINavigationController before this UIViewController, I can pretend to have a hierarchy, and it will add the UINavigationBar with 64px automatically.

Is there really no way to have a 'rogue'(without the help of a navigation controller) UINavigationBar that covers 64px? If that is the case, is there any valid reasons as to why?

(I'm not saying the UINavigationBar should be 64px by default, but there should be an option for it in the inspector)

(I also see people answering with programmatic ways to solve this. Even though these answers works, I'd still have to design the storyboard with that in mind (a gap). What I want to know is if it's possible to set this in storyboard, or rather, why isn't it allowed?)

Solution 1

You can set the property barPosition to UIBarPositionTopAttached another way!

1. Add a delegate to your UINavigationBar.

2. Implement -positionForBar: in the delegate class:

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

Your navigation bar's top must also be anchored to the Top Layout Guide.

Solution 2

You can change the nav bar height programmatically:

[navBar setFrame:CGRectMake(0, 0, 320, 64)];

Edit: As I wrote in the comments, you may have to put this line in viewDidLayoutSubviews to circumvent autolayout.

Solution 3

You can set it to attach to the top of the view using 'User Defined Runtime Attributes' in 'Identity Inspector' in Interface Builder. Set the barPosition property.

Here's the documentation for the barPosition property: https://developer.apple.com/library/ios/documentation/uikit/reference/UIBarPositioning_Protocol/Reference/Reference.html

Solution 4

There is a way to accomplish this WITHOUT using a UINavigationController or setting it programmatically. Just set a height constraint on the navigation bar to whatever you want, 64 in this instance.

You can accomplish the same thing programmatically as such:

[self.view addConstraint:[NSLayoutConstraint constraintWithItem:navigationBar attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1 constant:64.0f]];

EDIT:

As @nerdist-colony pointed out, when working with Autolayout it's always been to set translatesAutoresizingMaskIntoConstraints to NO otherwise there may be conflicts in the constraints.

Solution 5

I'm using a standalone UINavigationBar too and I encountered the same issue, and I found there is two ways fixing this properly.

I fixed it using constraints, and a parent UIView. I set this UIView in the storyboard as the parent view of my UINavigationBar with a {0, 0, 320, 64} frame. You can add a constraint or a set of constraints forcing the UINavigationBar to have the desired size. And given that your parent UIView has the correct frame in your storyboard, you can layout as usual your other views in your storyboard.

Now if autolayout is disabled you can change the bar height programmatically as described in Lindsey's answer. -(void)viewDidLayoutSubviews seems to be a good spot to do it.

View more solutions