How do you configure collection view list cells to look inset with rounded corners?

Question

Curiosity OP

Created May ’22

Replies 2

Boosts 0

Views 2.4k

Participants 3

In the Health app, it appears that cells and not sections are styled in this way:

The closest I know of to getting to this appearance is setting the section to be inset grouped

    let listConfiguration = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let listLayout = UICollectionViewCompositionalLayout.list(using: listConfiguration)
    collectionView.collectionViewLayout = listLayout

but I'm not sure of a good approach to giving each cell this appearance like in the screenshot above. I'm assuming the list style collection view shown is two sections with three total cells, rather than three inset grouped sections.

Boost

Answer 1

makabaka1880 OP

May ’22

In SwiftUI, I know you can do this:

List(.....) { item in 
    Text("What ever you want here").background(Color.white.cornerRadius(10))
}

Add .cornerRadius to each of the items or its background
Not sure in UIKit
Use UIHostingView(or sth like that) to bridge?

0

Answer 2

Frameworks Engineer OP

Apple

May ’22

Create your compositional layout using the section provider initializer, and then modify the interGroupSpacing (documentation) of the NSCollectionLayoutSection from the default value of 0 to whatever value you like, such as 10:

UICollectionViewCompositionalLayout { section, layoutEnvironment in
    let config = UICollectionLayoutListConfiguration(appearance: .insetGrouped)
    let layoutSection =  NSCollectionLayoutSection.list(using: config, layoutEnvironment: layoutEnvironment)
    layoutSection.interGroupSpacing = 10
    return layoutSection
}

This will cause each cell to be its own group with rounded corners.

2