组合布局中的动态单元格宽度

Question

我希望实现下图。本质上，它是 UICompositionalLayout 中的水平 'section'，其中单元格的大小与文本一致。

我遇到的问题是，如果单元格不适合屏幕，它将偏移到下一个屏幕页面。

这是我的代码：

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
    }

这是它推动最后一个单元格的效果

更新

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]()

在 ViewDidLoad 中：

sections = [HomeSection(title: nil, subtitle: nil, section_type: "navigationButtons", item: navigationButtons)]

Answer 1

以下应该有效并提供您想要的结果。我们将使用 itemSize 作为组大小，并为确保项目是分开的，我们将向该部分添加一些 interGroupSpacing 以分散组。

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

Answer 2

您只需在部分添加 interGroupSpacing 并将相同的 NSCollectionLayoutSize 添加到项目和组

 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
    }

组合布局中的动态单元格宽度

Dynamic Cell Width In Compositional Layout

uikit

collectionview

swift

uicollectionviewcompositionallayout

更新