651.288.7000 info@intertech.com

It’s no exaggeration when I say that most of my prototype-cell based table views are added to a navigation controller path.  However, the other day, I had a use case which required a stand alone table outside of a navigation controller.  I created the scene like normal: a UITableViewController subclass connected to a Table View Controller in the storyboard.  To my surprise, the table view rendered in a manner that caused the top header to be obscured underneath the status bar:

tableview-obscured

I tried everything I could think of to get the table view to move below the status bar: checked and unchecked view controller options in the “Extend Edges” section, tried to drag the table view away from the top, turned off Autolayout…

Nothing.  Nada.  When the table view is in the context of a navigation controller, it properly anchors to the bottom of the nav bar.  Without it, the table view anchors to the very top of the window.

Then I remembered a few experiments I had tried in the past with a smaller table view being added as a child to a “plain old” view in a “plain old” view controller.  I figured if I was able to successfully make small tables with this method, I should be able to anchor the table view to the bottom of the status bar.

The Solution

To create this type of a layout, start by creating a UITableViewController subclass.  Although we’re going to modify this code to inherit from UIViewController, I prefer to start this way because this template includes most of the table view data source and delegate methods that I need.

tableview-newclass

Once the class has been generated, open up the header file and change the parent class from UITableViewController to UIViewController.  In addition, specify that the class conforms to the datasource and delegate protocols.

@interface IntertechTableViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>

Depending on the version of Xcode you are using, you’ll likely have a method in the implementation file called initWithStyle: – since this is a table view controller method (the style referred to here is the table cell grouping style), we must delete it.

tableview-deletemethod

In the storyboard, add a table view to a plain old view controller (not a table view controller).  Anchor the top of it to the bottom of the status bar.  Notice in the document outline that the table view is NOT the root view for the controller.

tableview-addtableview

Associate the custom view controller class with this scene.

tableview-customclass

When we use a table view controller class with a table view controller scene, the datasource and delegate outlets are automatically hooked up.  With this strategy, we have to remember to make these connections manually.

tableview-delegates

Finally, create the prototype cells as you would normally.  The only difference here is that the table view starts with zero prototype cells.  Select the table view and choose the number of prototype cells you need in the attributes inspector.

tableview-prototype

Once you are finished, you should see the table view unobscured by the status bar.

tableview-properlayout