How to have full screen UITableView (with header) in iPhone X?

Question

I'm updating my app with Xcode 9 for the iPhone X compatibility. I use auto layout and "Use safe Area Layout Guide" is marked.

I have a header in my UITableView, and, as you can see in the screenshot below, the header view strictly respects the top safe area. The header doesn't follow my tableview top constraint (which is bigger than the safe area)

My tableview constraints :

How can I do to modify my header in order to fill the top of the screen (white area on the screenshot)?

From the picture you posted, notice equals: 45 for top layout guide. Make it 0. — Desdenova, Oct 06 '17 at 14:17

score 39 · Answer 1 · answered Dec 21 '17 at 06:27

39

In the size inspector of your tableview, set Content Insets to Never

answered Dec 21 '17 at 06:27

LauraHaworth

391
3
4

1

Thanks. Helped me a lot – NCFUSN Feb 21 '18 at 12:56
That's spot on ! – Asadullah Ali Dec 23 '18 at 18:36
This helped me too! – Yuri Mar 26 '19 at 20:44
3

Programmatically, this is done by setting `tableView.contentInsetAdjustmentBehavior = .never` (Swift 4.2) – Caleb H. Jul 18 '19 at 22:06
Perfect! It should be an accepted answer! – LightNight Feb 05 '21 at 21:57

score 8 · Accepted Answer · edited Jan 09 '19 at 13:50

8

That's probably due to your constraints are badly set.

You just need to change the top constraint of your Header by double clicking on it.

The screen where you should double click:

The screen where you should double click

And change the Safe Area constraint by the Superview item.

here

edited Jan 09 '19 at 13:50

Yassine ElBadaoui

450
7
16

answered Oct 06 '17 at 14:02

Antoine Rucquoy

128
1
10

I"ve added header programatically, how can I do this? – Feroz Nov 04 '17 at 16:55
@Feroz Set preservesSuperviewLayoutMargins of your rootViewController to true might help. After, you need to activate your top constraint – Antoine Rucquoy Dec 06 '17 at 15:31
@Feroz have you figured out how to do it programmatically? – user6520705 Nov 26 '18 at 03:41

score 5 · Answer 3 · answered Oct 11 '19 at 06:16

To achieve this set the top area of the table with respect to the superview instead of safearea.

In viewdidload, write this

if #available(iOS 11.0, *) {
    self.tableView.insetsContentViewsToSafeArea = false;
    self.tableView.contentInsetAdjustmentBehavior = .never;
}

How to have full screen UITableView (with header) in iPhone X?

3 Answers3