CollectionView单元格动态高度实现问题：基于AutoLayout适配需求

嘿，我来帮你搞定这个动态高度的CollectionView单元格需求！其实核心就是让AutoLayout自动帮我们计算单元格高度，结合CollectionView的自动尺寸特性就能轻松实现。下面是具体的步骤和代码：

一、先配置CollectionView的布局 #

首先要让CollectionView知道它需要根据单元格内部的约束来自动计算高度，这一步很关键。你可以在viewDidLoad里补充这段代码：

override func viewDidLoad() {
    super.viewDidLoad()
    homeCollection.delegate = self
    homeCollection.dataSource = self
    
    // 关键：设置FlowLayout的自动估算尺寸
    if let flowLayout = homeCollection.collectionViewLayout as? UICollectionViewFlowLayout {
        flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        // 可以根据需求设置间距和内边距
        flowLayout.minimumLineSpacing = 16
        flowLayout.minimumInteritemSpacing = 16
        flowLayout.sectionInset = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
    }
    
    // 别忘了注册单元格
    homeCollection.register(ProductCell.self, forCellWithReuseIdentifier: "ProductCell")
}

二、完善Product Cell的AutoLayout约束 #

单元格内部的约束必须形成完整的约束链，从顶部的图片到底部的StackView，所有元素的约束都要连贯，这样系统才能算出准确的高度。

假设你的单元格里有productImageView（商品图）、infoStackView（包含原价、折扣价、TimerLabel的栈视图），在单元格的init或者awakeFromNib里添加这些约束：

class ProductCell: UICollectionViewCell {
    let productImageView = UIImageView()
    let infoStackView = UIStackView()
    let originalPriceLabel = UILabel()
    let discountPriceLabel = UILabel()
    let timerLabel = UILabel()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
        setupConstraints()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupViews()
        setupConstraints()
    }
    
    private func setupViews() {
        // 配置图片视图
        productImageView.contentMode = .scaleAspectFill
        productImageView.clipsToBounds = true
        contentView.addSubview(productImageView)
        
        // 配置栈视图
        infoStackView.axis = .vertical
        infoStackView.spacing = 4
        infoStackView.alignment = .leading
        infoStackView.addArrangedSubview(originalPriceLabel)
        infoStackView.addArrangedSubview(discountPriceLabel)
        infoStackView.addArrangedSubview(timerLabel)
        contentView.addSubview(infoStackView)
        
        // 配置标签样式（可选）
        originalPriceLabel.textColor = .gray
        originalPriceLabel.attributedText = NSAttributedString(string: "", attributes: [.strikethroughStyle: NSUnderlineStyle.single.rawValue])
        discountPriceLabel.textColor = .red
        timerLabel.textColor = .orange
    }
    
    private func setupConstraints() {
        productImageView.translatesAutoresizingMaskIntoConstraints = false
        infoStackView.translatesAutoresizingMaskIntoConstraints = false
        
        NSLayoutConstraint.activate([
            // 图片约束：顶部、左右贴contentView，宽高比1:1（可根据需求调整）
            productImageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            productImageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            productImageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            productImageView.widthAnchor.constraint(equalTo: productImageView.heightAnchor, multiplier: 1.0),
            
            // 栈视图约束：贴图片底部，左右留边，底部贴contentView底部
            infoStackView.topAnchor.constraint(equalTo: productImageView.bottomAnchor, constant: 8),
            infoStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 8),
            infoStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -8),
            infoStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
    }
}

这里要注意：所有约束都要加在contentView上，而不是单元格本身，这是CollectionViewCell的规范哦！

三、处理TimerLabel的显示/隐藏逻辑 #

当商品没有优惠时，直接设置timerLabel.isHidden = true就可以了，AutoLayout会自动忽略隐藏的视图，栈视图的高度会自动缩小，进而带动整个单元格高度变化。

在数据源方法里这样配置单元格：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "ProductCell", for: indexPath) as! ProductCell
    let product = yourProductArray[indexPath.item]
    
    // 配置商品信息
    cell.productImageView.image = product.image
    cell.originalPriceLabel.text = "¥\(product.originalPrice)"
    cell.discountPriceLabel.text = product.hasDiscount ? "¥\(product.discountPrice)" : "¥\(product.originalPrice)"
    
    // 控制TimerLabel的显示
    if product.hasDiscount {
        cell.timerLabel.isHidden = false
        // 这里可以添加倒计时逻辑，比如设置优惠结束时间
        cell.timerLabel.text = "优惠剩余：\(product.discountRemainingTime)"
    } else {
        cell.timerLabel.isHidden = true
        // 如果没有优惠，也可以隐藏折扣价标签，根据需求调整
        cell.discountPriceLabel.isHidden = true
    }
    
    // 强制更新约束，确保高度计算准确
    cell.layoutIfNeeded()
    return cell
}

四、额外注意事项 #

• 如果你的商品图是网络图片，加载完成后记得调用collectionView.reloadItems(at: [indexPath])，因为图片加载完成后尺寸变化会影响单元格高度，重新加载才能让系统重新计算高度。
• 不要给单元格或者内部视图设置固定高度，所有高度都由AutoLayout自动计算，这样动态高度才会生效。
• 如果你用的是xib创建单元格，确保约束同样是从顶部到底部连贯的，没有缺失的约束。

这样设置完之后，你的CollectionView就能根据商品是否有优惠自动调整单元格高度啦！

内容的提问来源于stack exchange，提问作者ahmed alaa hamza