Grouped UICollectionView has extra 35 pixels of top padding

Question

I'm creating a grouped UICollectionView, and it seems that the top has 35 pixels of extra padding at the top I don't know how to get rid of.

It appears this is also a problem with UITableView and I've found some questions to address it here and here, but those solutions don't work for UICollectionView.

Here's how I initialize my UICollectionView:

var listConfig = UICollectionLayoutListConfiguration(appearance: .grouped)
UICollectionView(frame: .zero, collectionViewLayout: UICollectionViewCompositionalLayout.list(using: listConfig))
// More autolayout constraints code later

So far to fix this I've been applying a -35 constant to the topAnchor, but that doesn't work in all cases (when I want something directly above in the same view).

I also tried listConfig.headerTopPadding = 0 with no success.

How can I get rid of this extra top padding? (And side question...why does that exist?)

Answer 1

As you mentioned here

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

I don't think it's a good solution case the real reason is produced by .grouped. Controlling the whole contentView offset, contentInset should not be used to offset the effect of header(show below).

---

When you specify the UICollectionLayoutListConfiguration with .grouped mode, Without any other code your listConfig means listConfig.headerMode = .none and listConfig.footerMode = .none by default. The collectionView will produce a header and a footer for each section .

The 35 pixel comes from the height of your section header.In this case, I guess you only have one section, and as you are able to see, you must have the same extra padding at the bottom.

---

• Solution

1、listConfig.headerMode = .firstItemInSection

The convenient and simplest way

When you use this header mode, a UICollectionViewListCell object that appears as the first item in the section automatically uses a header appearance. When you configure your data source, make sure to account for the fact that the first item in the section (at index 0) represents the header, and the actual items in the section start at index 1.

2、listConfig.headerMode = .supplementary

You may totally custom your header within UICollectionViewDataSource

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if (kind == UICollectionView.elementKindSectionHeader) {
            let header = collectionView.dequeueReusableSupplementaryView(ofKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "your headerIdentifier", for: indexPath)
            ... // do some custom things
            return header
        }
        return UICollectionReusableView()
    }

and don't forget this

collectionView.register(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionHeader, withReuseIdentifier: "your headerIdentifier")

Answer 2

As I was writing this question I found one more stack overflow answer, which finally gave me an answer that worked for me. I used method 4:

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

This moves my content up and allows me to put things above my collectionView without having problems.