0

I have a section in a collection view with an orthogonal scrolling group. The cell has an 1:1 image, a title label below and two detail labels sticking to the bottom of the cell. All UILabels can be multiline and will have different line count per cell. I am trying to achieve a specific layout behaviour with the UICollectionViewCompositionalLayout but I can't find the right solution. I have two scenarios of what I can currently achieve:

1. item with fractional height, group with estimated height

Preview:

enter image description here

Code:

    func createLayout() -> UICollectionViewCompositionalLayout {
    
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),
                                           heightDimension: .fractionalHeight(1))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)

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

        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }

2. item with estimated height, group with estimated height

Preview:

enter image description here

Code:

    func createLayout() -> UICollectionViewCompositionalLayout {
    
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.5),
                                           heightDimension: .estimated(100))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.contentInsets = NSDirectionalEdgeInsets(top: 8, leading: 8, bottom: 8, trailing: 8)

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

        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }

I need to somehow combine these solutions. The group must resize itself to the highest cell and all cells need to expand themself to the group/highest cell either. Is this easily doable? Or can I calculate the group height myself with some delegate methods? Thanks in advance.

jplabs
  • 33
  • 1
  • 7

0 Answers0