iOS: Top UITableView row bleeds into carrier - ios

Question

The alignment of our table is working well except of the top alignment of the top cell which bleeds into the "carrier area". What is required to address this?
We're using self sizing cells:
override func viewDidLoad() {
super.viewDidLoad()
tableView.estimatedRowHeight = 68.0
tableView.rowHeight = UITableViewAutomaticDimension
Overview of the current constraints:

Answer 1

Basically Apple doesn't want you to do what you're doing. Look at Apple's apps (Settings, Mail, etc.). You will never see a full-screen table view without a navigation bar at the top. So imitate that. Instead of fighting the framework, wrap your view controller in a UINavigationController and let the navigation bar push the top of the table view down for you automatically.

Answer 2

Normally when you use a navigation controller to wrap the view controller, TopLayoutGuide (and BottomLayoutGuide will be set for you and with "Adjust Scroll View Insets" that you can set in the storyboard file, it will automatically set contentInsets of the outermost scrollview for you to accommodate that. But since you don't use a navigation controller to wrap your view controller here, you have like three options.
1. Manually set the frame of the table view to offset for the status bar's height.
We just move the table view down 20 points and make it 20 points shorter. The ideal place is somewhere in your code we know it will be called every time the superview's bound is changed. One of them is in viewDidLayoutSubviews.
Try putting this code in your view controller's code.
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.view.superview!.backgroundColor = UIColor.whiteColor()
let insets = UIEdgeInsets(top: 20, left: 0, bottom: 0, right: 0)
self.view.frame = UIEdgeInsetsInsetRect(self.view.superview!.bounds, insets)
}
Please note that I have to set the background color of the superview's to white because the superview (which is likely to be UIWindow) might have no background color and it will make the top part appears black. And normally in the production code, you might want to check whether the superview's bound has really changed before setting the frame.
2. Use UIViewController and add UITableView as subview.
This way Interface Builder will allow you to set the constraints all you want.
3. Just wrap this with UINavigationController
And it will appear like most apps that have a navigation bar on the top. This might not be what you want. But I rarely see a table view without wrapping by a navigation controller.

Answer 3

Select your table view. In the bottom right side of your screen (left of where you drag the objects to the screen) you will see 4 small buttons. If you click on the 2nd to the right (a square with 2 lines to it's sides) you will see a small sub-menu saying Add new constraints. Below it you have a square with 4 values (top-right-bottom-left). Make sure the top one is 0 and then click the semi-transparent dotted red line. It should become solid red. Now just click the "Add constraints" button at the bottom and you are done.