Interface Builder: Tab Bar Application and children views

This is something that always bothered me while designing an iPhone UI in Interface Builder: When making a "Tab Bar Application", my child/tab views were always messed up, and not rendered the same as what I would make in Interface Builder.

Of course the whole thing was a big neophyte mistake on my part, but I figured I would share my findings for others that have such a problem.

For the sake of this post, I am building an application called "DemoApp", from the "Tab Bar Application" template in XCode.  My UI design in Interface Builder looks like this:

For the sake of this demo, I have also thrown away the default "SecondView" that comes with the template, in favor of using my own custom one as an example.

So how does this render on the iPhone?  Not at all how it looks in Interface Builder...

It took me FOREVER to figure out why my Views were getting clipped, and generally rendered incorrectly whenever I made a custom view to go inside of a TabBarController.  The secret?  On your custom view, enable the bottom bar!

So now your interface should look like this in InterfaceBuilder:

Which makes it MUCH easier to arrange your UI to render correctly inside of a TabBarController.  This little checkbox and my own carelessness caused me much stress and anger towards Interface Builder - hopefully this post will help someone resolve the problem more quickly than it took me!