具有估计高度的集合视图组合布局不起作用

Question

我希望我的应用程序针对每个辅助功能选项进行优化，包括文本大小。

我根据具有组合布局的部分制作了一个 collectionView 布局。所以我需要我的单元格的高度随着它的内容增长。我认为 using.estimated(constant)可以完成这项工作，但它似乎不起作用。内部约束对我来说似乎很好。

这是我正在使用的布局：

let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.42), heightDimension: .estimated(90))
let item = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(90)))
item.contentInsets = NSDirectionalEdgeInsets(top: 5.0, leading: 12.0, bottom: 5.0, trailing: 12.0)
let group = NSCollectionLayoutGroup.vertical(layoutSize: size, subitem: item, count: 1)
let section = NSCollectionLayoutSection(group: group)
section.contentInsets = NSDirectionalEdgeInsets(top: 0.0, leading: 6.0, bottom: 0.0, trailing: 0.0)
section.orthogonalScrollingBehavior = .groupPaging

当我在辅助功能设置上设置更高的文本大小时，会发生什么：

单元格应该包含 2 个标签，这里是 autoLayoutConstraints ：

    NSLayoutConstraint.activate([
        self.titleLabel.topAnchor.constraint(equalTo: self.container.topAnchor, constant: 10),
        self.titleLabel.leftAnchor.constraint(equalTo: self.container.leftAnchor, constant: 20),
        self.titleLabel.rightAnchor.constraint(equalTo: self.container.rightAnchor, constant: -20)
    ])

    NSLayoutConstraint.activate([
        self.subtitleLabel.topAnchor.constraint(equalTo: self.titleLabel.bottomAnchor, constant: 10),
        self.subtitleLabel.leftAnchor.constraint(equalTo: self.container.leftAnchor, constant: 20),
        self.subtitleLabel.rightAnchor.constraint(equalTo: self.container.rightAnchor, constant: -20),
        self.subtitleLabel.bottomAnchor.constraint(equalTo: self.container.bottomAnchor, constant: -10)
    ])

在此先感谢您的帮助。

Answer 1

对我来说解决问题的是为item 和 group 设置相同的高度尺寸。

我知道问题的共享代码就是这种情况，@Que20 的解决方案肯定有帮助。但如果问题仍然存在，您可能需要检查一下。

例子

我试图显示一个单元格，其中包含一个固定在单元格边缘的 UIButton。该按钮具有 44 点的高度限制。

最初的尝试

static func mapSection() -> NSCollectionLayoutSection {
    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: .fractionalHeight(1)) // Here: a fractional height to the item
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                           heightDimension: .estimated(100)) // There: estimated height to the button cell
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section = NSCollectionLayoutSection(group: group)

    return section
}

尽管一切都配置正确，但按钮的高度约束被打破，“估计”变成了一个绝对值。

成功实施

static func mapSection() -> NSCollectionLayoutSection {
    /* 
     Notice that I estimate my button cell to be 500 points high
     It's way too much. But since it's an estimation and we're doing things well,
     it doesn't really matter to the end result.
    */
    let heightDimension = NSCollectionLayoutDimension.estimated(500)

    let itemSize = NSCollectionLayoutSize(
        widthDimension: .fractionalWidth(1),
        heightDimension: heightDimension)
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1),
                                           heightDimension: heightDimension)
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: [item])

    let section = NSCollectionLayoutSection(group: group)

    return section
}

唯一真正的区别在于项目和组都设置为相同的估计高度维度。但它现在有效！

Answer 2

我发现让我的 LayoutGroup 水平而不是垂直解决了这个问题。这是我的最终布局：

        let estimatedHeight = CGFloat(100)
        let layoutSize = NSCollectionLayoutSize(widthDimension: .estimated(200), heightDimension: .estimated(estimatedHeight))
        let item = NSCollectionLayoutItem(layoutSize: layoutSize)
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: layoutSize, subitem: item, count: 1)
        let section = NSCollectionLayoutSection(group: group)
        section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10)
        section.interGroupSpacing = 10
        section.orthogonalScrollingBehavior = .groupPaging

希望能帮到你^^

Answer 3

在 iOS13+ 上，如果您想创建单元格约束决定单元格高度的布局 - 试试这个：

private func configureCollectionView() {
    collectionView.collectionViewLayout = createLayout()
}

private func createLayout() -> UICollectionViewLayout {
    let layout = UICollectionViewCompositionalLayout {
        (sectionIndex: Int, layoutEnvironment: NSCollectionLayoutEnvironment) -> NSCollectionLayoutSection? in
        let size = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(10))
        let item = NSCollectionLayoutItem(layoutSize: size)
        item.edgeSpacing = NSCollectionLayoutEdgeSpacing(leading: nil, top: NSCollectionLayoutSpacing.fixed(20), trailing: nil, bottom: NSCollectionLayoutSpacing.fixed(0))
        let group = NSCollectionLayoutGroup.vertical(layoutSize: size, subitems: [item])
        group.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
        let section = NSCollectionLayoutSection(group: group)
        return section
    }
    return layout
}

确保单元格中的约束、拥抱和压缩阻力具有优先级 - 1000（必需），所有这些：堆栈视图、标签等。

你应该得到这样的东西：

或者，如果您想要分页水平滚动，只需添加：

section.orthogonalScrollingBehavior = .groupPaging

到您的部分属性，在布局创建时，您将得到如下内容：

享受 ：）

Answer 4

不确定它\xe2\x80\x99s 与系统可访问性相关，但据我所知，你可以\xe2\x80\x99t.estimated()与.contentInsets项目一起使用。

\n\n

它有时确实有效，但不可靠。即使在尝试将插图应用到一个组时，我\xe2\x80\x99m 也在与这个权利作斗争（尽管它是项目的子类，会想象它会起作用）:(

\n