Section headers in UICollectionView, only first one appears - swift

Question

I have created a class for a section header and am loading it into my UICollectionView. I am able to display the first header (albeit oddly, see below), however any following section headers are blank. The size is being referenced, the content (background color, label) won't appear though.
And then also...the one section header that does show, it is displayed with an indentation of approx. 150px for no apparent reason. Are headers center aligned by default? If so, how would I left align those?
My Section Header class:
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
switch kind {
case UICollectionView.elementKindSectionHeader:
let section = indexPath.section
switch section {
case 0:
let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TagsHeaderView", for: indexPath) as! SectionHeaderView
tagsHeader.headerString = "Recent Tags"
tagsHeader.backgroundColor = .green
return tagsHeader
default:
let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TypeHeaderView", for: indexPath) as! SectionHeaderView
tagsHeader.headerString = "Type"
tagsHeader.backgroundColor = .blue
return tagsHeader
}
default:
return UICollectionReusableView()
}
}
In my UICollectionView
func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
switch kind {
case UICollectionView.elementKindSectionHeader:
let section = indexPath.section
switch section {
case 0:
let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TagsHeaderView", for: indexPath) as! SectionHeaderView
tagsHeader.headerString = "Recent Tags"
tagsHeader.backgroundColor = .green
return tagsHeader
default:
let tagsHeader = searchCollectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "TypesHeaderView", for: indexPath) as! SectionHeaderView
tagsHeader.headerString = "Type"
tagsHeader.backgroundColor = .blue
return tagsHeader
}
default:
return UICollectionReusableView()
}
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
if section == 0 {
return CGSize(width: view.frame.width, height: 18 + 22 + 6)
} else {
return CGSize(width: view.frame.width, height: 100)
}
}
This is how I instantiate my UICollectionView
let searchCollectionView: UICollectionView = {
let layout = LeftAlignedCollectionViewFlowLayout()
layout.minimumInteritemSpacing = 6
layout.minimumLineSpacing = 6
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
cv.isScrollEnabled = false
cv.register(TokenCell.self, forCellWithReuseIdentifier: "TokenCell")
cv.register(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "TagsHeaderView")
cv.register(SectionHeaderView.self, forSupplementaryViewOfKind:UICollectionView.elementKindSectionHeader, withReuseIdentifier: "TypesHeaderView")
cv.backgroundColor = .white
cv.showsVerticalScrollIndicator = false
cv.alwaysBounceVertical = false
cv.translatesAutoresizingMaskIntoConstraints = false
return cv
}()
My CollectionViewFlowLayout
class LeftAlignedCollectionViewFlowLayout: UICollectionViewFlowLayout {
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributes = super.layoutAttributesForElements(in: rect)
var leftMargin = sectionInset.left
var maxY: CGFloat = -1.0
attributes?.forEach { layoutAttribute in
if layoutAttribute.frame.origin.y >= maxY {
leftMargin = sectionInset.left
}
layoutAttribute.frame.origin.x = leftMargin
leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
maxY = max(layoutAttribute.frame.maxY , maxY)
}
return attributes
}
}
Here is a screenshot of the current result. You can see that the first header appears, however indented. The second header has its space, but none of its content appears.

Answer 1

I got the same problem when making my tag view.
The problem is in your CollectionViewFlowLayout.
let attributes = super.layoutAttributesForElements(in: rect)
This line is getting all the attributes including cells, supplementaryviews and decorationviews, which means you are changing attributes for header and footer too.
We can change the code to:
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let attributes = super.layoutAttributesForElements(in: rect)
var leftMargin = sectionInset.left
var maxY: CGFloat = -1.0
attributes?.forEach { layoutAttribute in
//check if the layoutAttribute is for cell
if layoutAttribute.representedElementCategory == .cell {
if layoutAttribute.frame.origin.y >= maxY {
leftMargin = sectionInset.left
}
layoutAttribute.frame.origin.x = leftMargin
leftMargin += layoutAttribute.frame.width + minimumInteritemSpacing
maxY = max(layoutAttribute.frame.maxY , maxY)
}
}
return attributes
}
In order to apply the attribute to just cell. Then your header and footer will appear properly.