2022-08-23

UICollectionView: make first item's width different from the rest

I'm currently trying to achieve the following layout using NSCollectionLayoutSection. Do you have any advice on only making the first item 50px wide while keeping the rest of the items 100px (could be any number of items)? The solution has to be an NSCollectionLayoutSection.

enter image description here

I'm currently displaying them in the same width using which is not the desired result:

    let item = NSCollectionLayoutItem(layoutSize: .init(widthDimension: .fractionalWidth(1.0), heightDimension: .fractionalHeight(1.0)))
    item.contentInsets = NSDirectionalEdgeInsets(top: 0,
                                                 leading: 0,
                                                 bottom: 0,
                                                 trailing: 8)
    
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .absolute(100),
                                             heightDimension: .absolute(100)), subitems: [item])
    
    let section = NSCollectionLayoutSection(group: group)
    section.contentInsets = NSDirectionalEdgeInsets(top: 16,
                                                   leading: 16,
                                                   bottom: 16,
                                                   trailing: 16)
    section.orthogonalScrollingBehavior = .continuous

enter image description here

I've also tried using absolute widths but didn't have much luck with that approach.

Thank you!



No comments:

Post a Comment