2 years ago

#42626

test-img

zslavman

How to create specific UICollectionViewCompositionalLayout with non-interleaving NSCollectionLayoutGroup

Expected result


I attempting to create UICollectionView like on picture above, using UICollectionViewCompositionalLayout. I don't want split it to sections, because I'm using pinned SectionHeader and during scrolling another sections hiding my SectionHeader. Here is my code that describes groups creation:

    // - - - - - - - - - - - - -
    //     create Group 1       |
    // - - - - - - - - - - - - -
    
    // mainItem
    let mainItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(2/3),
                                              heightDimension: .fractionalWidth(2/3))
    let mainItem = NSCollectionLayoutItem(layoutSize: mainItemSize)
    mainItem.contentInsets = contentInset
    
    // smallItem
    let smallItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                              heightDimension: .fractionalHeight(0.5))
    let smallItem = NSCollectionLayoutItem(layoutSize: smallItemSize)
    smallItem.contentInsets = contentInset
    
    // smallPairGroup
    let smallPairGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3),
                                                   heightDimension: .fractionalHeight(1))
    let smallPairGroup = NSCollectionLayoutGroup.vertical(layoutSize: smallPairGroupSize,
                                                         subitem: smallItem, count: 2)
    
    // mainWithPairGroup
    let mainWithPairGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                       heightDimension: .fractionalWidth(2/3))
    let mainWithPairGroup = NSCollectionLayoutGroup.horizontal(layoutSize: mainWithPairGroupSize,
                                                               subitems: [mainItem, smallPairGroup])
    // - - - - - - - - - - - - -
    //     create Group 2       |
    // - - - - - - - - - - - - -
    
    // tripletItem
    let tripletItemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3),
                                                 heightDimension: .fractionalWidth(1/3))
    let tripletItem = NSCollectionLayoutItem(layoutSize: tripletItemSize)
    tripletItem.contentInsets = contentInset
    
    // tripletGroup
    let tripletGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                  heightDimension: .fractionalWidth(1/3))
    let tripletGroup = NSCollectionLayoutGroup.horizontal(layoutSize: tripletGroupSize,
                                                          subitem: tripletItem, count: 3)
    
    // totalGroup
    let totalGroupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                                 heightDimension: .fractionalWidth(1))
    let totalGroup = NSCollectionLayoutGroup.vertical(layoutSize: totalGroupSize,
                                                       subitems: [mainWithPairGroup, tripletGroup])

But I cannot get the desired result, Group1 + Group2 (totalGroup in code) are repeats over and over... How can I do properly NSCollectionLayoutGroup like on picture? I will be grateful for any help!

swift

uicollectionview

uicollectionviewcell

uicollectionviewflowlayout

uicollectionviewcompositionallayout

0 Answers

Your Answer

Accepted video resources