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

Answer 1

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.

Answer 2

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".

Answer 3

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.

Answer 4

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