具有 UICollectionViewDelegateFlowLayout 和约束的单行 CollectionView

Single row CollectionView with UICollectionViewDelegateFlowLayout and constraints

提问人:smeshko 提问时间:11/15/2023 更新时间:11/15/2023 访问量:20

问:

我希望在屏幕底部有一个单行集合视图,并在其顶部有一个文本字段。红色矩形是文本字段,绿色矩形是集合视图。enter image description here

这是我的设置代码:

    view.addSubview(queryTextField)
    view.addSubview(suggestionsCollectionView)
    
    NSLayoutConstraint.activate([
        queryTextField.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        queryTextField.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        queryTextField.bottomAnchor.constraint(equalTo: suggestionsCollectionView.topAnchor),
        
        suggestionsCollectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
        suggestionsCollectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
        suggestionsCollectionView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        suggestionsCollectionView.heightAnchor.constraint(equalToConstant: 160)
    ])
...
private func createCollectionViewLayout() -> UICollectionViewCompositionalLayout {
    return UICollectionViewCompositionalLayout { (_, _) -> NSCollectionLayoutSection? in
        // item
        let item = NSCollectionLayoutItem(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1/3),
                heightDimension: .fractionalHeight(1)
            )
        )
        item.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 8)
        
        // group
        let group = NSCollectionLayoutGroup.horizontal(
            layoutSize: NSCollectionLayoutSize(
                widthDimension: .fractionalWidth(1),
                heightDimension: .absolute(140)
            ),
            repeatingSubitem: item,
            count: 3
        )
        group.contentInsets = NSDirectionalEdgeInsets(top: 16, leading: 0, bottom: 16, trailing: 0)
        
        // section
        let section = NSCollectionLayoutSection(group: group)
        section.orthogonalScrollingBehavior = .continuous
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20)
        
        // return
        return section
    }
}

我希望在不对集合视图设置高度约束的情况下实现此布局。我已经指定了组高度,因此我希望集合视图能够自行计算它。我怎样才能做到这一点?heightDimension: .absolute(140)

iOS Swift UIColictionViewCompositionalLayout

评论

0赞 DonMag 11/15/2023
A 根据集合视图的帧大小(和其他属性)对其单元格进行布局...如果你不给它一个高度,它会说“没有单元格适合”,你不会得到任何东西。UICollectionView
0赞 smeshko 11/15/2023
那么,我需要在哪里提供高度以及如何计算它?我是否只采用我提供的固定高度并添加所有插图?
0赞 DonMag 11/15/2023
从本质上讲,是的。你的代码说:“这个组的高度应该是 140 分”......因此,如果您的集合视图框高度为 500 磅,则该组将仅使用 140 磅。如果集合视图框高度为 200 磅,则该组仍将仅使用 140 磅。顺便说一句,目前尚不清楚为什么使用组合布局而不是流布局 -- (同样的设计问题也适用..您仍然需要设置集合视图的高度)。
0赞 smeshko 11/15/2023
那么,在哪里提供集合视图的高度呢?
0赞 DonMag 11/16/2023
在您发布的代码中,您有:1suggestionsCollectionView.heightAnchor.constraint(equalToConstant: 160)' ...这难道不是给了你你想要的吗?

答: 暂无答案