Dynamic Cell Width In Compositional Layout

user_6738168 0
Viewed 813

I am looking to achieve the below illustration. Essentially it is a horizontal 'section' within a UICompositionalLayout where the cells size to the text.

illustration of horizontal section

The issue I am having is that if the cell doesn't fit onto the screen it will offset to the next screen page.

Here is my code:

fileprivate func createNavigationButtonSection(using section: HomeSection) -> NSCollectionLayoutSection {
        let estimatedHeight: CGFloat = 40
        let estimatedWidth: CGFloat = 100
        let itemSize = NSCollectionLayoutSize(widthDimension: .estimated(estimatedWidth),
                                              heightDimension: .estimated(estimatedHeight))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)
        item.edgeSpacing = NSCollectionLayoutEdgeSpacing(leading: nil,
                                                         top: nil,
                                                         trailing: .fixed(8),
                                                         bottom: nil)
        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                               heightDimension: .estimated(estimatedHeight))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                       subitems: [item])
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 0)
        return section
    }

This is the effect it is giving where it pushes the last cell

gif illustration

UPDATE

fileprivate var navigationButtons: [NavigationButton] = [
        NavigationButton(image: UIImage(named: "heart"), title: "Saved", query: "item_saved"),
        NavigationButton(image: UIImage(named: "grid"), title: "Categories", query: "item_categories"),
        NavigationButton(image: UIImage(named: "deal"), title: "Deals", query: "item_deals"),
        NavigationButton(image: UIImage(named: "clock"), title: "Latest", query: "item_latest"),
    ]

fileprivate var sections = [HomeSection]()

In ViewDidLoad:

sections = [HomeSection(title: nil, subtitle: nil, section_type: "navigationButtons", item: navigationButtons)]
uicollectionviewcompositionallayout collectionview swift uikit
2 Answers

The following should work and provide the outcome you're after. We'll use the itemSize for the group size and to make sure the items are separated we'll add some interGroupSpacing to the section to spread the groups out.

let group = NSCollectionLayoutGroup.horizontal(layoutSize: itemSize, subitems: [item])
...
section.interGroupSpacing = 20
user_156251730

You have to just add interGroupSpacing in section and Put Same NSCollectionLayoutSize to item and group

 fileprivate func createNavigationButtonSection(using section: HomeSection) -> NSCollectionLayoutSection {
        let estimatedHeight: CGFloat = 40
        let estimatedWidth: CGFloat = 100
        let size = NSCollectionLayoutSize(widthDimension: .estimated(estimatedWidth),
                                              heightDimension: .estimated(estimatedHeight))
        let item = NSCollectionLayoutItem(layoutSize: size)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: size,
                                                       subitems: [item])
        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = 8
        section.orthogonalScrollingBehavior = .continuous
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 16, bottom: 0, trailing: 0)
        return section
    }
user_161463700
Related