UITableView appears stuck under Nav Bar when configured in Storyboard (maybe corrupted?) but not when configured with code

Viewed 43

I know it might be hard to diagnose this, but I'll try to give all the relevant info I can without overwhelming the post but it needs a ton of info. I've done this a hundred times over the last decade of iOS coding, but something had gone weird this time.

I have a UINavigationController which is created in code. I have a UIViewController (with a UITableView) that is configured in the storyboard and instantiated using a Storyboard ID. When the view controller is displayed, the content of the UITableView is stuck under the nav bar. (I've tried using a true UITableViewController but it has the same problem.)

However, in viewDidLoad, if I remove all of the subviews and then recreate them programmatically and create the same constraints programmatically, then it works as expected. See below.

two side-by-side screenshots showing the problem

Here are the constraints for the UITableView in the storyboard:

side-by-side screenshot of xcode storyboard constraints, trailing space to superview, leading space to superview, bottom space to Tab Bar, top space to Top Layout Guide. 2nd screenshot of details of top space constraint, tableview.top = top layout guide.bottom

When I try doing it programmatically, in viewDidLoad I remove all of the subviews in self.view, recreate them and set up constraints:

self.tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
self.tableView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.tableView];


[self.tableView.topAnchor constraintEqualToAnchor:self.view.layoutMarginsGuide.topAnchor].active = YES;
[self.tableView.bottomAnchor constraintEqualToAnchor:self.tabbar.topAnchor].active = YES;
[self.tableView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
[self.tableView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;

In viewDidLayoutSubviews I printed out frames and content insets for the table. Here are the values for storyboard and code configured (there is a difference in the height of the tabbar which is below the UITableView, not really sure why they are different, but the problem still remains even if I remove the tab bar so it doesn't seem to be the problem):

When configured in storyboard:

viewDidLayoutSubviews: self.view: {{0, 88}, {414, 808}}
viewDidLayoutSubviews: self.tableView: {{0, 0}, {414, 691}}
viewDidLayoutSubviews: self.tableView: content insets: {0, 0, 0, 0}
viewDidLayoutSubviews: self.tabBar: {{0, 691}, {414, 83}}
viewDidLayoutSubviews: _UILayoutGuide<0x7fc8ad469290>: {{0, 0}, {0, 0}}
viewDidLayoutSubviews: _UILayoutGuide<0x7fc8ad4dcfc0>: {{0, 774}, {0, 34}}



When configured in code:
viewDidLayoutSubviews: self.view: {{0, 88}, {414, 808}}
viewDidLayoutSubviews: self.tableView: {{0, 0}, {414, 725}}
viewDidLayoutSubviews: self.tableView: content insets: {0, 0, 0, 0}
viewDidLayoutSubviews: self.tabBar: {{0, 725}, {414, 49}}

self.view's frame is at y=88 in both the storyboard and the programmatic versions so anything in it shouldn't be obscured by the nav bar. The UITableView content insets are all 0s in both storyboard and programmatic versions, so there's no reason why the storyboard table should appear to be obscured by the nav bar.

Am I missing something? Any idea what could be going wrong with the storyboard configured view controller? I've never had anything like this happen to me before and I've created countless UITableViewControllers as well as UIViewControllers with UITableViews in them.

I've created 3 copies of the view controller in the storyboard to see if maybe something went wrong with the first creation, but all 3 have this same problem. Is there maybe something else in the storyboard that is corrupting the rest of it or something? I'm so confused.

1 Answers

I believe it's because you're constraining your table view to the Layout Guide.

If I constrain it to the Safe Area:

enter image description here

enter image description here

I get this:

enter image description here

Related