CollectionView header content under status bar

Question

Here's a collection view constrained to top, left, right, and bottom of the superview with safe area layout guide enabled:

I want my collection view header to be shown under the status bar. I've achieved this for iPhone 4 - 8+ screen dimensions by unchecking Safe Area Layout Guide in the size inspector for the controller's main view, and adding the following code:

collectionView.contentInset = UIEdgeInsets(top: -20, left: 0, bottom: 0, right: 0)

This looks great for non iPhone X view sizes:

However, for the iPhone X, this leads to the following output:

The iPhone X has its own dimensions for the status bar. Adjusting the top inset further does work, but will over-offset the other device sizes. I am wondering if there's an more elegant way to achieve this behaviour.

score 10 · Accepted Answer · answered Feb 22 '18 at 20:06

10

Found a solution:

collectionView.contentInset.top = -UIApplication.shared.statusBarFrame.height

answered Feb 22 '18 at 20:06

Kelvin Lau

6,373
6
34
57

score 7 · Answer 2 · answered Nov 26 '19 at 16:38

7

The previous solutions work, but this might be the easiest one:

collectionView.contentInsetAdjustmentBehavior = .never

answered Nov 26 '19 at 16:38

Alexandru Motoc

582
7
14

3

Indeed, but this will cause the bottom to go under the bottom safe area. This is not something that you might want. – christostsang Apr 27 '20 at 20:28

score 3 · Answer 3 · answered Dec 25 '20 at 16:01

3

This will do

collectionView.contentInsetAdjustmentBehavior = .never

answered Dec 25 '20 at 16:01

Mjeed

51
2

this must be marked as accepted answer, you are my hero! – iago849 Jun 29 '21 at 11:24

score 2 · Answer 4 · edited Sep 05 '20 at 19:46

2

You should use safeAreaInsets for iphone X

if #available(iOS 11.0, *) {
    if let top = UIApplication.shared.keyWindow?.safeAreaInsets.top {
        collectionView.contentInset = UIEdgeInsets(top: -top, left: 0, bottom: 0, right: 0)
    }
} else {
    // Fallback on earlier versions
    collectionView.contentInset.top = -UIApplication.shared.statusBarFrame.height
}

edited Sep 05 '20 at 19:46

mojuba

11,842
9
51
72

answered Feb 28 '18 at 14:11

cekisakurek

2,474
2
17
28

score 1 · Answer 5 · answered Feb 28 '18 at 13:57

1

Add 2 constraints:

1) view - superview

2) view - safeArea

answered Feb 28 '18 at 13:57

maxwell

3,788
6
26
40

CollectionView header content under status bar

5 Answers5

Linked