UICollectionView三列流布局单元格尺寸异常问题求助

你的UICollectionView单元格布局溢出、重叠的核心原因有三点：

1. 流布局中设置的itemHeight（itemWidth * 1.3）不足以容纳单元格内的完整内容（ImageView+Label+各类padding/间距），导致内容突破单元格边界。
2. 单元格内的tvName标签没有添加底部约束，无法限制整体内容高度，使得内容可以无限向下延伸。
3. 初始化流布局时使用view.bounds.width，在视图未完成布局的场景下可能获取到错误的宽度值，导致itemSize计算偏差。

1. 修复单元格约束，限制内容边界 #

修改TvCellCollectionViewCell的set()方法，给tvName添加底部约束，同时确保ImageView的显示模式正确：

private func set() {
    addSubview(tvImage)
    addSubview(tvName)
    
    // 配置ImageView显示属性，避免图片拉伸变形
    tvImage.contentMode = .scaleAspectFill
    tvImage.clipsToBounds = true
    
    tvImage.translatesAutoresizingMaskIntoConstraints = false
    tvName.translatesAutoresizingMaskIntoConstraints = false
    let padding: CGFloat = 8
    
    NSLayoutConstraint.activate([
        // ImageView约束
        tvImage.topAnchor.constraint(equalTo: contentView.topAnchor, constant: padding),
        tvImage.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: padding),
        tvImage.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -padding),
        tvImage.heightAnchor.constraint(equalTo: tvImage.widthAnchor), // 保持1:1比例
        
        // Label约束
        tvName.topAnchor.constraint(equalTo: tvImage.bottomAnchor, constant: 12),
        tvName.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: padding),
        tvName.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -padding),
        tvName.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -padding), // 新增底部约束，限制内容不超出单元格
    ])
    // 可选：设置Label最多显示2行，避免高度过高
    tvName.numberOfLines = 2
}

2. 重新计算流布局的itemHeight，适配内容高度 #

修改WeeklyViewController的createThreeColumnFlowLayout()方法，根据实际内容高度计算itemHeight：

func createThreeColumnFlowLayout() -> UICollectionViewFlowLayout {
    let width = view.frame.width // 使用frame.width更可靠，避免视图未布局时的宽度偏差
    let padding: CGFloat = 12
    let minimumItemSpacing: CGFloat = 10
    let availableWidth = width - (padding * 2) - (minimumItemSpacing * 2)
    let itemWidth = availableWidth / 3

    // 根据内容实际高度计算itemHeight
    let imagePadding: CGFloat = 8
    let imageHeight = itemWidth - (imagePadding * 2) // ImageView的实际宽度是itemWidth减去左右padding
    let labelHeight: CGFloat = 40 // 预估两行文字的高度，可根据字体大小调整
    let totalVerticalSpacing = padding + 12 + padding // 顶部padding + Image与Label间距 + 底部padding
    let itemHeight = imageHeight + totalVerticalSpacing + labelHeight

    let flowLayout = UICollectionViewFlowLayout()
    flowLayout.sectionInset = UIEdgeInsets(top: padding, left: padding, bottom: padding, right: padding)
    flowLayout.itemSize = CGSize(width: itemWidth, height: itemHeight)
    flowLayout.minimumInteritemSpacing = minimumItemSpacing
    flowLayout.minimumLineSpacing = minimumItemSpacing

    return flowLayout
}

3. 适配屏幕旋转，动态更新布局 #

在WeeklyViewController中重写viewDidLayoutSubviews()，确保屏幕旋转时布局自动更新：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    guard let flowLayout = collectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
    let updatedLayout = createThreeColumnFlowLayout()
    flowLayout.itemSize = updatedLayout.itemSize
    flowLayout.sectionInset = updatedLayout.sectionInset
    flowLayout.minimumInteritemSpacing = updatedLayout.minimumInteritemSpacing
    flowLayout.minimumLineSpacing = updatedLayout.minimumLineSpacing
    collectionView.collectionViewLayout.invalidateLayout()
}

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