Question 72198 in IOS Swift Question posted in
The official documentation can be found here.

Grouped UICollectionView has extra 35 pixels of top padding – Ios swift

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?)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    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")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search