具有估計高度的集合視圖組合布局不起作用

Question

我希望我的應用針對包括文本大小在內的每個可訪問性選項進行優化。

我根據具有組合布局的部分制作了一個 collectionView 布局。 所以我需要我的細胞的高度隨着它的內容而增長。 我認為使用.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

不確定它是否與系統可訪問性有關，但 AFAIK 你不能在項目上使用.estimated()和.contentInsets 。

它有時確實有效，但不可靠。 即使嘗試將插圖應用於組時，我也在努力爭取這一點（雖然它是項目的子類，但我會想象它會起作用）：（