具有 2 列网格和动态高度的 UICollectionViewCell

Question

我正在尝试使用具有 2 列但动态高度的集合视图。我使用了 Autolayout 并为 Cell

提供了所需的约束

通过这种方式我可以计算动态高度但是它的列网格失败了。

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
       let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "Cell", for: indexPath) as! MenuListCollectionViewCell
       cell.frame.size.width = collectionView.frame.width/2
    cell.menuList = self.menuList[indexPath.row]
    let resizing = cell.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize, withHorizontalFittingPriority: UILayoutPriority.required, verticalFittingPriority: UILayoutPriority.fittingSizeLevel)
       return resizing
}

这就是我想要的样子

Answer 1

不确定 "its column grid fails" 是什么意思。

无论如何，您需要编写自定义 collection 视图布局。默认的 (UICollectionViewFlowLayout) 允许您通过提供 sizeForItemAt 来更改单元格的高度，但这不会改变始终将单元格排列在相同高度（高度最高的单元格）。

如果我没理解错的话，您只需要 this raywenderlich tutorial 的相同布局即可。

基本上：

创建 UICollectionViewLayout 的子class 实现它的方法：
collectionViewContentSize: return collection 视图内容的宽度和高度
prepare：在这里你可以计算单元格的大小和 collection查看内容
layoutAttributesForElements: 你在哪里 return 给定的 UICollectionViewLayoutAttributes 数组矩形
layoutAttributesForItem：你们return哪里是同类属性，这次特定于一个项目
将此 class 的 object 分配给 collection 视图布局属性

Answer 2

你可以用这个

此代码以某种方式编写，您可以更改节插入或 minimumInteritemSpacing，并使用此参数计算和调整大小

您可以使用此代码或从 Github

下载项目

 func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

        let numberofItem: CGFloat = 2

        let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout

        let collectionViewWidth = self.collectionView.bounds.width

        let extraSpace = (numberofItem - 1) * flowLayout.minimumInteritemSpacing

        let inset = flowLayout.sectionInset.right + flowLayout.sectionInset.left

        let width = Int((collectionViewWidth - extraSpace - inset) / numberofItem)

        return CGSize(width: width, height: width)
    }

Answer 3

我通过执行以下操作实现了您想要的结果。

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return 20
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    return CGSize(width: (self.view.frame.size.width/2 - 5), height: 100)
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = customCollectionView.dequeueReusableCell(withReuseIdentifier: "test", for: indexPath)

    cell.layer.backgroundColor = UIColor.red.cgColor

    return cell
}

确保您已实现所有正确的委托

UICollectionViewDelegate
UICollectionViewDatasource
UICollectionViewDelegateFlowLayout

在您看到高度的地方：根据您在问题中指定的高度，将其设为您自己想要的高度。

关键：确保在故事板中将集合视图的 estimate size 设置为 NONE -> 否则代码将无法按预期工作

具有 2 列网格和动态高度的 UICollectionViewCell

UICollectionViewCell With 2 column grid and dynamic height

ios

uicollectionview

uicollectionviewcell

swift