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?)
CodePudding user response:
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.
CodePudding user response:
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")