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

【问题标题】：Dynamic Cell Width In Compositional Layout组合布局中的动态单元格宽度
【发布时间】：2021-11-23 06:09:38
【问题描述】：

我希望实现下图。本质上，它是 UICompositionalLayout 中的一个水平“部分”，其中单元格大小与文本相符。

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

这是我的代码：

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

【问题讨论】：

您能告诉我们您更新数据源的位置吗？看起来最后一项可能在它自己的部分中。
@Owen26 我已经更新了问题。我认为这与组宽度有关。如果我将 let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1), 更改为小数宽度为 (2)，它会正确间隔，但组末尾的填充是关闭的。
在组声明中使用以下内容会发生什么情况：let group = NSCollectionLayoutGroup.horizontal(layoutSize: itemSize, subitems: [item])
@Owen26 这似乎有效，它将所有项目放在一起，我只需要在它们之间放置间距。因为他们都在感人。
然后您可以使用group.interItemSpacing = .fixed(20) 来分隔组中的项目。

标签： swift uikit collectionview uicollectionviewcompositionallayout

【解决方案1】：

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

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

【讨论】：

【解决方案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
    }

【讨论】：