Compositional Layout IOS 13 Group background color

Question

I was trying to find if there is an approach we can use to give background color to a group while using compositional layout. I tried to find a direct API that i can use but didn't find anything.

You may be looking for a decoration view, which can be set using the `decorationItems` property on an `NSCollectionLayoutSection`. It's also possible you can get what you're after using the cell itself. Can you provide an example of what you’re hoping to achieve? — JWK, May 27 '20 at 08:06
yup used the decoration view for the same . It worked . Thanks — suraj, Jun 15 '20 at 12:18

score 3 · Answer 1 · answered Jun 29 '20 at 19:30

3

For those looking for the answer, here you go.

        let sectionBackgroundDecoration = NSCollectionLayoutDecorationItem.background(
            elementKind: FollowingCollectionViewController.sectionBackgroundDecorationElementKind)
        section.decorationItems = [sectionBackgroundDecoration]

        let layout = UICollectionViewCompositionalLayout(section: section)
        layout.register(
            SectionBackgroundDecorationView.self,
            forDecorationViewOfKind: FollowingCollectionViewController.sectionBackgroundDecorationElementKind)

answered Jun 29 '20 at 19:30

Kyle Browning

5,374
1
19
30

9

This is useful for setting the background of a whole section but he asked for a Group – TylerJames Aug 11 '21 at 21:38
If you have any header of the collection view and to apply another color, or corner radius excluding the group, it won't work – Ankur Lahiry Mar 22 '22 at 03:42

score 0 · Answer 2 · answered Mar 13 '23 at 21:37

For me I wanted to add a background view to the whole section excluding the header. I didn't find anything online regarding that matter. One workaround is to add contentInsets to the backgroundDecorationView excluding the height/width of the supplementaryView:

let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1),
    heightDimension: .fractionalHeight(1))

let item = NSCollectionLayoutItem(layoutSize: itemSize)

// Group

let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1),
    heightDimension: .absolute(90))

let group = NSCollectionLayoutGroup.vertical(
    layoutSize: groupSize,
    subitem: item,
    count: 1)

// Header

let headerContentHeight: CGFloat = 15
let headerTopBottomInset: CGFloat = 7

let headerHeight = headerContentHeight+(headerTopBottomInset*2)

let headerSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .absolute(headerHeight))
let sectionHeader = NSCollectionLayoutBoundarySupplementaryItem(
    layoutSize: headerSize,
    elementKind: SectionHeaderView.identifier,
    alignment: .top)
sectionHeader.contentInsets = NSDirectionalEdgeInsets(top: headerTopBottomInset, leading: 40, bottom: headerTopBottomInset, trailing: 40)

// Background

let backgroundItem = NSCollectionLayoutDecorationItem.background(elementKind: RoundedBGDecoratorView.identifier)

let sectionInsets = NSDirectionalEdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20)

// we are only adding top insets because background views get drawn starting from the top directly without taking the top inset value in calculations
backgroundItem.contentInsets = NSDirectionalEdgeInsets(
    top: headerContentHeight+headerTopBottomInset+sectionInsets.top,
    leading: sectionInsets.leading,
    bottom: sectionInsets.bottom,
    trailing: sectionInsets.trailing)

let section = NSCollectionLayoutSection(group: group)
section.contentInsets = sectionInsets

section.boundarySupplementaryItems = [sectionHeader]
section.decorationItems = [backgroundItem]

Compositional Layout IOS 13 Group background color

2 Answers2