CollectionView content under navigation bar


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.



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.

        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
3 hours ago
I never used snapkit, but it could be something like that using auto layout API, I’ve updated the answer