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

Wavy

set UICollectionView top 0 with Main View. no need to set contentInset. – Imes

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.

Lucialucian

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. – Leeuwenhoek

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

Nathalienathan

Answer 3

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

Overpowering

Answer 4

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.

Dreadfully

is it possible with code ? I'm using SnapKit but I can use native code layout system – Wavy

I never used snapkit, but it could be something like that using auto layout API, I've updated the answer – Dreadfully

Answer 5

Add this property on your viewcontroller containing the collectionview

self.edgesForExtendedLayout = []

Falster

Answer 6

this line of code worked for me

collectionView.contentInsetAdjustmentBehavior = .never

Canella