Collection View Compositional Layout with estimated height not working

Question

I want my app to be optimized for every accessibility options including the text size.

I made a collectionView layout based on sections with a compositional layout. So I need my cell's height to grow with it's content. I thought using .estimated(constant) would do the job but it doesn't seem to work. The inner constraints seems good to me.

Here is the layout I'm working with :

let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.42), heightDimension: .estimated(90))
let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(90)))
item.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 12.0, bottom: 5.0, trailing: 12.0)
let group = NSCollectionLayoutGroup.vertical(layoutSize: size, subitem: item, count: 1)
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 0.0, leading: 6.0, bottom: 0.0, trailing: 0.0)
section.orthogonalScrollingBehavior = .groupPaging

When I set a higher text size on the accessibility settings here is what happens :

The cell is supposed to contain 2 labels here is the autoLayoutConstraints :

    NSLayoutConstraint.activate([
        self.titleLabel.topAnchor.constraint(equalTo: self.container.topAnchor, constant: 10),
        self.titleLabel.leftAnchor.constraint(equalTo: self.container.leftAnchor, constant: 20),
        self.titleLabel.rightAnchor.constraint(equalTo: self.container.rightAnchor, constant: -20)
    ])

    NSLayoutConstraint.activate([
        self.subtitleLabel.topAnchor.constraint(equalTo: self.titleLabel.bottomAnchor, constant: 10),
        self.subtitleLabel.leftAnchor.constraint(equalTo: self.container.leftAnchor, constant: 20),
        self.subtitleLabel.rightAnchor.constraint(equalTo: self.container.rightAnchor, constant: -20),
        self.subtitleLabel.bottomAnchor.constraint(equalTo: self.container.bottomAnchor, constant: -10)
    ])

Thanks in advance for your help.

Answer 1

What solved the issue for me was to set the same height dimension to both the item and the group.

I know it's the case in the question's shared code, and @Que20's solution definitely helped. But in case the problem persists you might wanna check that.

---

Example

I'm trying to display a cell containing a single UIButton pinned to the cell's margins. The button has a 44 points high height constraint.

Original Attempt

static func mapSection() -> NSCollectionLayoutSection {
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: .fractionalHeight(1)) // Here: a fractional height to the item
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                           heightDimension: .estimated(100)) // There: estimated height to the button cell
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section = NSCollectionLayoutSection(group: group)

    return section
}

Despite everything being configured correctly, the button's height constraint breaks and the "estimation" becomes an absolute value.

Successful implementation

static func mapSection() -> NSCollectionLayoutSection {
    /* 
     Notice that I estimate my button cell to be 500 points high
     It's way too much. But since it's an estimation and we're doing things well,
     it doesn't really matter to the end result.
    */
    let heightDimension = NSCollectionLayoutDimension.estimated(500)

    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: heightDimension)
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                           heightDimension: heightDimension)
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section = NSCollectionLayoutSection(group: group)

    return section
}

The only real difference lies in the fact that both the item and the group are set to the same estimated height dimension. But it works now!

Answer 2

I found that making my LayoutGroup horizontal instead of vertical fixed the issue. Here is my final layout :

        let estimatedHeight = CGFloat(100)
        let layoutSize = NSCollectionLayoutSize(widthDimension: .estimated(200), heightDimension: .estimated(estimatedHeight))
        let item = NSCollectionLayoutItem(layoutSize: layoutSize)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: layoutSize, subitem: item, count: 1)
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        section.interGroupSpacing = 10
        section.orthogonalScrollingBehavior = .groupPaging

Hope it'll help ^^