如何根据Label内容设置水平滚动CollectionView Cell的宽度？

嘿，这个需求我经常遇到，其实实现起来很 straightforward，主要靠 Auto Layout 和 CollectionView 的自动布局特性来搞定，我给你一步步拆解：

简单来说，就是让 Label 根据自身内容自动计算宽度，再通过 Auto Layout 把这个宽度传递给 Cell，最后让 CollectionView 的 FlowLayout 识别并应用每个 Cell 的动态宽度。

1. 配置 Cell 的 Auto Layout（关键！） #

不管是用代码还是 Storyboard 创建 Cell，核心是给 Label 加上正确的约束，让 Cell 的宽度跟着 Label 走：

• 给 Label 设置左右内边距（比如左右各16pt），上下也可以加内边距让内容不贴边；
• 确保 Label 的 numberOfLines 设置正确：如果是单行显示就设为1，多行则设为0；
• 一定要把 Label 的 translatesAutoresizingMaskIntoConstraints 设为 false（代码创建时），或者在 Storyboard 里取消“Use Auto Layout”以外的自动约束。

举个代码创建 Cell 的例子：

class ContentSizedCell: UICollectionViewCell {
    let titleLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 1 // 单行模式，多行改0
        label.lineBreakMode = .byTruncatingTail
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupLayout()
        // 确保contentView能随Cell自动调整大小
        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupLayout()
        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }
    
    private func setupLayout() {
        contentView.addSubview(titleLabel)
        NSLayoutConstraint.activate([
            titleLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
            titleLabel.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
            titleLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 8),
            titleLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -8)
        ])
    }
}

2. 配置 CollectionView 的 FlowLayout #

因为是水平滚动，首先把 FlowLayout 的滚动方向设为水平，然后开启自动计算 Cell 大小的功能：

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
// 关键：让FlowLayout自动根据Cell的约束计算大小
layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
// 可以设置Cell之间的间距
layout.minimumLineSpacing = 8

然后把这个布局传给 CollectionView 就好。

3. 填充数据（常规操作） #

在数据源方法里给 Label 设置文本，剩下的就交给系统自动计算宽度了：

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! ContentSizedCell
    cell.titleLabel.text = yourDataArray[indexPath.item]
    return cell
}

• 如果是多行 Label，记得把 numberOfLines 设为0，同时 CollectionView 的高度也可以设为自动（比如不固定高度，让 FlowLayout 计算）；
• 如果你需要更精确的控制，也可以手动实现 sizeForItemAt 方法，计算文本宽度后加上内边距：

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let text = yourDataArray[indexPath.item]
    let font = UIFont.systemFont(ofSize: 16)
    // 计算文本宽度
    let textSize = text.size(withAttributes: [.font: font])
    // 加上左右内边距
    let cellWidth = textSize.width + 32
    // 固定高度或者根据文本计算高度
    let cellHeight = CGFloat(60)
    return CGSize(width: cellWidth, height: cellHeight)
}

不过一般用 automaticSize 就足够省心了。

这样下来，你的 CollectionView Cell 就会根据 Label 的内容自动调整宽度啦！

内容的提问来源于stack exchange，提问作者Vineeth Krishnan Vijayan