CollectionViewCell 自适应高度的正确姿势！

Android

2023-07-13 20:47:10

高度自适应的CollectionView Cell：一劳永逸

在 iOS 应用开发中，CollectionView 经常用于展示数据。但要实现完美的高度自适应，避免内容裁剪或空白，却是一大难题。

高度自适应的必要性

当使用固定高度的 Cell 时，若内容较少，会出现空白浪费；若内容过多，则会部分裁剪。因此，高度自适应至关重要，让 Cell 根据内容动态调整高度。

实现高度自适应的三种方法

1. 设置 layout 的 estimatedItemSize 属性

这种方法最简单，只需在 layout 的 estimatedItemSize 属性中设置估计值。但仅适用于高度相对固定、变化幅度小的 Cell。

// 设置 estimatedItemSize 属性
flowLayout.estimatedItemSize = CGSize(width: 100, height: 100)

2. 为 Cell 内部控件添加上下约束

此法较复杂，需要在 Cell 内部控件上下添加约束，确保控件撑满高度。适用于控件数量和类型不固定的 Cell。

// 添加顶部约束
topConstraint = cell.contentView.topAnchor.constraint(equalTo: cell.topAnchor, constant: 10)
topConstraint.isActive = true

// 添加底部约束
bottomConstraint = cell.contentView.bottomAnchor.constraint(equalTo: cell.bottomAnchor, constant: -10)
bottomConstraint.isActive = true

3. 重写 preferredLayoutAttributesFitting 方法

此法最灵活，可自定义高度计算方式。通过重写 preferredLayoutAttributesFitting 方法，返回包含高度信息的 UICollectionViewLayoutAttributes 对象。

// 重写 preferredLayoutAttributesFitting 方法
override func preferredLayoutAttributesFitting(_ layoutAttributes: UICollectionViewLayoutAttributes) -> UICollectionViewLayoutAttributes {

    // 计算 Cell 高度
    let height = calculateHeight()

    // 设置高度信息
    layoutAttributes.frame.size.height = height

    return layoutAttributes
}

总结

根据需求选择合适的自适应方法：

简单 Cell：estimatedItemSize 属性
复杂 Cell（控件数量和类型不固定）：约束
高度自定义需求：重写 preferredLayoutAttributesFitting 方法

常见问题解答

哪种方法效率最高？

根据 Cell 复杂度而定。estimatedItemSize 效率最高，约束次之，重写方法最慢。
为什么 estimatedItemSize 不适用于变化幅度大的 Cell？

估计值不准确，导致高度计算错误，出现空白或裁剪。
如何确定约束的 constant 值？

根据 Cell 内容的实际边距和控件大小进行调整。
重写 preferredLayoutAttributesFitting 方法时有哪些需要注意？

确保计算的高度准确，并考虑不同设备的屏幕尺寸和布局。
如何实现 Cell 内多行文字的自动换行？

使用 UILabel 的 lineBreakMode 属性，将其设置为 NSLineBreakByWordWrapping。