Issue with UICollectionViewCompositionalLayout, items scrolling above the decoration background

42 Views Asked by At

I am developing an iOS app in which I am trying to use compositional layout to design a screen . I am facing a weird issue now in designing. Following is the UICollectionViewCompositionalLayout I am using to design a section

{

            let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                  heightDimension: .estimated(80))
            
            let item = NSCollectionLayoutItem(layoutSize: itemSize)
            let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.2),
                                                   heightDimension: .estimated(80))
            let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])
            let section = NSCollectionLayoutSection(group: group)
            section.interGroupSpacing = Constants.trailAndLeadWidthOfNudge
            section.contentInsets.top = Constants.trailAndLeadWidth
            section.contentInsets.bottom = Constants.trailAndLeadWidth
            section.contentInsets.leading = Constants.trailAndLeadWidth
            section.contentInsets.trailing = Constants.trailAndLeadWidth
            section.orthogonalScrollingBehavior = .continuous
            
            section.decorationItems = [
                NSCollectionLayoutDecorationItem.background(elementKind: RoundedBackgroundView.reuseIdentifier)
            ]
            
            // Add header
            let headerSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                                          heightDimension: .estimated(44))
            let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
                layoutSize: headerSize,
                elementKind: UICollectionView.elementKindSectionHeader, alignment: .top)
            section.boundarySupplementaryItems = [sectionHeader]
            return section
        }

The problem now is the section is scrolling above the decoration item background (As below image), I am expecting to keep the scrolling within the background of section

enter image description here

Did anyone face a similar issue like this ... Looking for a support in fixing this issue

0

There are 0 best solutions below