Kanban board layout with UICollectionViewCompositionalLayout

Hi, I'm trying to code a kanban board (like Trello) with UICompositionalLayout, but I'm unable to create regular section headers. Instead section headers are overlapping the content cells. Here is a link to the demo project: demo project

Thank you.

Answered by DTS Engineer in 795853022

@rsusa7 Thanks for providing the sample project. Could you review Implementing Modern Collection Views Sample code. It contains examples of how to add headers and footers to sections and how to pin section headers to Sections. The examples should help address your issue. Thanks

@rsusa7 Thanks for providing the sample project. Could you review Implementing Modern Collection Views Sample code. It contains examples of how to add headers and footers to sections and how to pin section headers to Sections. The examples should help address your issue. Thanks

Hi @DTS Engineer thank you for your reply.

I have already reviewed the sample code prior to asking my question and it's also worth mentioning that I have implemented various compositional layout configurations with section headers without any problem.

However, when I attempted to implement this specific configuration (Kanban), I ran into issues with the headers. To clarify, I don't want the headers pinned, I want them to be on top of the content and scoll with the reste of the content when I scroll up and down, just like they would in a tableView.

I would appreciate some insights. Thank you.

@rsusa7
I reviewed the sample project you mentioned and made a few adjustments. I modified the absoluteOffset for the section header to align it properly with its default position, give this a try:

 func generateLayout() -> UICollectionViewCompositionalLayout {
        let layout = UICollectionViewCompositionalLayout {
            (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
            
            let itemSize = NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1.0),
                heightDimension: .fractionalHeight(1.0)
            )
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            
            let groupSize = NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1.0),
                heightDimension: .absolute(100)
            )
            let group = NSCollectionLayoutGroup.horizontal(
                layoutSize: groupSize,
                subitems: [item]
            )
            
            
            let section = NSCollectionLayoutSection(group: group)
            section.orthogonalScrollingBehavior = .continuous
            
            section.contentInsets = NSDirectionalEdgeInsets(top: 50, leading: 10, bottom: 50, trailing: 10)
            let headerSize = NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1.0),
                heightDimension: .estimated(44)
            )
            let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
                layoutSize: headerSize,
                elementKind: UICollectionView.elementKindSectionHeader,
                alignment: .top,
                absoluteOffset: CGPoint(x: 0, y: -40)
            )
            section.boundarySupplementaryItems = [sectionHeader]
            
            return section
            
        }
        let configuration = UICollectionViewCompositionalLayoutConfiguration()
        configuration.scrollDirection = .horizontal
        
        layout.configuration = configuration
        return layout
    }

Kanban board layout with UICollectionViewCompositionalLayout
 
 
Q