CollectionView content under navigation bar

Question

I want the content of the collectionView to start from the very top of the screen (top of status bar) because I have transparent navigation bar, I want to avoid magic numbers and it should work with iPhone X and other iPhones.

What I have tried ?

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

but it's not an elegant solution and it's not correct for iPhone X the inset needs to be increased

Any clean solution ?

Target iOS 10 and 11

set UICollectionView top 0 with Main View. no need to set contentInset. — Ujesh, Dec 11 '17 at 13:04

score 13 · Answer 1 · answered Feb 22 '18 at 14:57

13

Add this in the UIViewController containing the UICollectionView to prevent the collection view to go under the navigation bar. E.g. in the viewDidLoad method:

Swift 4

self.edgesForExtendedLayout = UIRectEdge.bottom

You can even set edgesForExtendedLayout = [] to prevent the collection view to go under UITabBars too.

answered Feb 22 '18 at 14:57

FBente

2,160
23
34

This one worked for me, but additionally I had to use -64 (nav bar + status bar) as a value for constraint on collection view using top Safe Area. – valdyr Apr 23 '18 at 11:16

score 3 · Answer 2 · edited Jul 29 '19 at 12:55

3

For Swift 5 Try this

self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
self.navigationController?.navigationBar.shadowImage = UIImage()
self.navigationController?.navigationBar.isTranslucent = true

and from the IB Size Inspector Tab set "content Insets" to "Never".

edited Jul 29 '19 at 12:55

ajmccall

2,024
23
42

answered Jul 29 '19 at 11:32

Suresh Reddy

41
1

score 2 · Answer 3 · answered Sep 22 '21 at 13:53

2

If your collection view is already fullscreen you should also set collectionView.contentInsetAdjustmentBehavior to .never

answered Sep 22 '21 at 13:53

maximkrouk

249
2
6

Andrea · Answer 4 · 2017-12-11T13:21:24.553

If you are using interface builder, this can be easily done by setting the top space constraint of the collection view to have 0 constant from the superview and not the safe area.

        view.addSubview(collectionView)
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
        collectionView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: 0).isActive = true
        collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
        collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true

Consider that this approach will work on iOS11, but will crash on iOS10. This is because I'm still using safe area for leading and trailing, safe area is not available in iOS10. Using Xcode 9 and interface builder you get a free conversion from safe area to layout guides.

is it possible with code ? I'm using `SnapKit` but I can use native code layout system — iOSGeek, Dec 11 '17 at 13:10
I never used snapkit, but it could be something like that using auto layout API, I've updated the answer — Andrea, Dec 11 '17 at 13:21

score 0 · Answer 5 · answered Feb 04 '22 at 02:37

0

Add this property on your viewcontroller containing the collectionview

self.edgesForExtendedLayout = []

answered Feb 04 '22 at 02:37

KingKongCoder

600
4
15

CollectionView content under navigation bar

5 Answers5