嵌入TableView的CollectionView Cell尺寸、间距、内容裁切问题如何解决

1. 修复Cell尺寸计算逻辑 #

你当前的尺寸计算没有考虑CollectionView的内边距和Item间距，导致实际Cell宽度超出可用空间，挤压内部文字出现裁切，修改后的尺寸计算代码如下：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else {
        return CGSize(width: 100, height: 100)
    }
    // 取当前Collection所在的TableView行索引，需在TableViewCell赋值该属性
    let tableRow = self.tableRow
    let totalInset = flowLayout.sectionInset.left + flowLayout.sectionInset.right
    var totalSpacing: CGFloat = 0
    var itemWidth: CGFloat = 0
    
    switch tableRow {
    case 0:
        // 一行2个，总间距为1个Item间距
        totalSpacing = flowLayout.minimumInteritemSpacing
        itemWidth = (collectionView.bounds.width - totalInset - totalSpacing) / 2
    case 1:
        // 一行3个，总间距为2个Item间距
        totalSpacing = flowLayout.minimumInteritemSpacing * 2
        itemWidth = (collectionView.bounds.width - totalInset - totalSpacing) / 3
    case 2:
        // 一行1个，直接减去左右内边距
        itemWidth = collectionView.bounds.width - totalInset
    default:
        itemWidth = 100
    }
    // 高度适配Collection可用高度
    let itemHeight = collectionView.bounds.height - flowLayout.sectionInset.top - flowLayout.sectionInset.bottom
    return CGSize(width: itemWidth, height: itemHeight)
}

2. 自定义分类间距 #

通过FlowLayout代理方法按分类设置不同的间距参数：

// 分区内边距
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 15)
}

// 行间距
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

// 同行Item间距
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 10
}

3. 修复Cell内部显示异常+圆角阴影配置 #

约束调整 #

• 图片控件：添加宽高比约束，contentMode设为.scaleAspectFill，开启clipsToBounds避免图片溢出
• 文本控件：设置numberOfLines = 2，换行模式设为.byTruncatingTail，避免长文字裁切

圆角阴影配置 #

避免阴影被裁切的正确实现，添加到CollectionViewCell类中：

override init(frame: CGRect) {
    super.init(frame: frame)
    setupStyle()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupStyle()
}

private func setupStyle() {
    contentView.backgroundColor = .white
    contentView.layer.cornerRadius = 8
    contentView.clipsToBounds = true
    
    layer.shadowColor = UIColor.black.withAlphaComponent(0.1).cgColor
    layer.shadowOffset = CGSize(width: 0, height: 2)
    layer.shadowRadius = 4
    layer.shadowOpacity = 1
    layer.masksToBounds = false
}

override func layoutSubviews() {
    super.layoutSubviews()
    layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: 8).cgPath
}

4. 常见问题排查 #

• 关闭CollectionView的自动尺寸估算：flowLayout.estimatedItemSize = .none
• TableView的行高要适配CollectionView的内容高度，不要定死过小的固定值
• 尺寸计算时统一使用collectionView的bounds参数，避免Cell复用导致尺寸错误

内容的提问来源于stack exchange，提问作者Faheem