Container View getting pushed down as if it had a UINavigationBar?

Question

I have a UIViewController with a Container View. This Container View contains a UITableViewController.

The UIViewController is embedded in a UINavigationController. I configure the NavigationBar by changing the tint color, the bar tint color and the title text attributes, but when I try to change the translucency I have a problem. I've singled out the problem by removing all the other customization code. Whenever I do this in UIViewController's -viewDidLoad:

self.navigationController.navigationBar.translucent = NO;

the Container View adds some space on top of itself, as if it had it's own navigation bar. Whenever I set translucent to YES the view displays everything correctly. This only happens on a contained view whenever I set translucent to NO.

Is there something that I'm missing here?

I tried setting the translucency to YES on the contained view and also setting it to hidden, but nothing worked. Is somehow, the contained view inheriting properties from the parent's container? How do I avoid this extra space created on the contained view whenever I set the translucency to NO?

I would expect that setting the translucency only affects the translucency, but not the position of the views.

When translucent = YES

+---------------------------------+
|                                 |
|     UINavigationBar             |
|                                 |
+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|    UITableViewController        |
|    in a Contained View          |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
+---------------------------------+

when translucent = NO

+---------------------------------+
|                                 |
|     UINavigationBar             |
|                                 |
+---------------------------------+
|                                 |
|blank space created on top of view
|                                 |
+---------------------------------+
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|                                 |
|     UITableViewController       |
|     in a Contained View         |
|                                 |
+---------------------------------+

P.S. My View is more complex than this, I'm simplyfying.

Answer 1

What you are missing here is that a translucent navigation bar sits on top of your viewcontroller's view, while a non-translucent navigation bar pushes down your view controller's view (effectively resizing it).

So what is happening here is that with a translucent navigation bar, that white space is actually hidden underneath the bar, while when the bar is not translucent it's "pushed down".

There are a number of ways to go about it, and it mainly depends on whether you're using auto layout or not.

Answer 2

I fixed this issue by adding this line of code in -viewDidLoad:

self.extendedLayoutIncludesOpaqueBars = YES;

Answer 3

If this issue occurs with a storyboard (without touching the translucent property in the code), I found it helpful to check the NavigationBar settings and - if necessary - the storyboard source file.

(This does not fully apply to this question, but when I searched for the issue, basically only this question popped up and maybe the information helps others with the same issue.)

---

The details:

To access the Navigation Bar in the storyboard editor: Show the Document Outline (menu Editor -> Show Document Outline), select the Navigation Bar.

Then in the Utilities Pane on the right hand side in the Attributes inspector make sure, "Translucent" is unchecked.

If this does not help, open the storyboard file in TextEdit, look for the navigationBar element and check for opaque or translucent attributes. You want translucent="NO".

(To open the storyboard source: In Xcode in project navigator right click on the storyboard file. Select "Show in Finder" and in the Finder window, right click on the file and select "Open with..." and select TextEdit.)

EDIT: (I don't know, whether it was there all the time, but one can right click on the storyboard file in the project navigator and select "Open As" -> "Source Code". No need to go to the Finder.)