iOS: Top UITableView row bleeds into carrier

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:

Check Top space of tableview. is it start from TopLayout(after status bar) Or View ? — Mohamed Jaleel Nazir, Apr 27 '16 at 18:38
Check the constraints. Topspace of tableview is start from TopLayout( y position from 20) ? Or from Viewcontr view origin ( y = 0) ? — Mohamed Jaleel Nazir, Apr 27 '16 at 18:47
[Preventing the Status Bar from Covering Your Views](https://developer.apple.com/library/ios/qa/qa1797/_index.html)check to see if this post solve your problem — ilovecomputer, Apr 27 '16 at 18:47
[http://stackoverflow.com/q/28766210/...](http://stackoverflow.com/q/28766210/3177007) Check this QA — Mohamed Jaleel Nazir, Apr 27 '16 at 19:03
Will try. You're suggesting we add a top constraint on the table view (not the table cell). That right? — Marcus Leon, Apr 27 '16 at 19:11
Are you using a `UITableViewController` or `UIViewController`? — yusuke024, Apr 27 '16 at 19:27
Do you plan for this to support other orientation too (like landscape)? — yusuke024, Apr 27 '16 at 19:29
Ideally but I haven't got that far :) Added a screen grab of current constraints. — Marcus Leon, Apr 27 '16 at 19:30

score 3 · Accepted Answer · answered Apr 27 '16 at 19:57

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.

yusuke024 · Answer 2 · 2016-04-27T20:11:52.940

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.

score 0 · Answer 3 · answered Apr 27 '16 at 19:19

0

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.

answered Apr 27 '16 at 19:19

Lawrence413

1,976
1
14
28

I think the top one should be 20 isn't it? To accommodate the height of the status bar. – yusuke024 Apr 27 '16 at 19:25
@sikhapol if "constrain to margins" is selected, then it is 0. Otherwise 20. – Lawrence413 Apr 27 '16 at 19:40

iOS: Top UITableView row bleeds into carrier

3 Answers3