基于Auto Layout实现UITableViewCell内多行自适应标签布局方案问询

嘿，正好有两个纯Auto Layout驱动的方案能解决你的UITableViewCell标签布局问题——完全不用手动计算宽度或者监听屏幕旋转，完美适配屏幕旋转和单元格宽度变化，一起来看看吧！

方案一：用UICollectionView实现自动换行标签（最省心） #

这个方案利用UICollectionView的流式布局特性，天生支持自动换行，而且Auto Layout绑定宽度后，屏幕旋转时会自动重新排列标签，几乎不用额外处理：

步骤1：搭建UITableViewCell的结构 #

在你的cell里添加两个子视图：

• 顶部的标题UILabel（比如叫titleLabel），给它设置顶部、左右边距的约束，高度设置为自适应内容。
• 下方的UICollectionView（比如叫tagsCollectionView），给它设置：
  • 顶部与titleLabel底部的间距约束
  • 左右边距与cell的contentView对齐
  • 底部与contentView底部的间距约束
  • 关键：添加widthAnchor.constraint(equalTo: contentView.widthAnchor)，确保collectionView宽度始终和cell一致，旋转时自动更新。

步骤2：配置流式布局 #

给collectionView设置UICollectionViewFlowLayout，并实现代理方法让标签宽度自适应：

// 在cell的初始化方法里配置布局
let flowLayout = UICollectionViewFlowLayout()
flowLayout.scrollDirection = .vertical
flowLayout.minimumInteritemSpacing = 8 // 标签之间的水平间距
flowLayout.minimumLineSpacing = 8 // 行之间的垂直间距
tagsCollectionView.collectionViewLayout = flowLayout
tagsCollectionView.isScrollEnabled = false // 禁止滚动，让collectionView高度自适应内容
tagsCollectionView.delegate = self
tagsCollectionView.dataSource = self

// 实现UICollectionViewDelegateFlowLayout的方法，返回标签的自适应大小
extension YourTableViewCell: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let tagText = yourTagArray[indexPath.item]
        let font = UIFont.systemFont(ofSize: 14)
        // 计算文本的原始宽度
        let textSize = tagText.size(withAttributes: [.font: font])
        // 加上标签的内边距（比如左右各8，上下各4）
        return CGSize(width: textSize.width + 16, height: textSize.height + 8)
    }
}

步骤3：自定义标签CollectionViewCell #

给collectionView创建一个自定义cell，里面放一个UILabel，设置圆角、背景色、内边距，然后给label添加约束填充整个cell的contentView，这样标签就会根据文本自动调整大小。

步骤4：让UITableViewCell高度自适应 #

在你的UITableView设置：

tableView.estimatedRowHeight = 100 // 随便给一个预估高度
tableView.rowHeight = UITableView.automaticDimension

这样cell的高度会自动根据collectionView的内容高度调整，旋转时也会自动更新。

方案二：自定义TagContainerView（纯Auto Layout手动布局） #

如果你不想用CollectionView，可以写一个自定义的UIView，让它自动管理标签的排列和换行，完全用Auto Layout约束驱动：

步骤1：实现TagContainerView #

class TagContainerView: UIView {
    // 标签之间的间距
    var tagSpacing: CGFloat = 8
    // 标签的内边距
    var tagContentInsets: UIEdgeInsets = .init(top: 4, left: 8, bottom: 4, right: 8)
    
    override func addSubview(_ subview: UIView) {
        super.addSubview(subview)
        subview.translatesAutoresizingMaskIntoConstraints = false
        // 添加标签的基础约束
        subview.topAnchor.constraint(greaterThanOrEqualTo: topAnchor).isActive = true
        subview.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor).isActive = true
        // 更新所有标签的布局约束
        updateTagLayoutConstraints()
    }
    
    private func updateTagLayoutConstraints() {
        let tags = subviews.filter { $0 is UILabel }
        guard !tags.isEmpty else { return }
        
        // 先移除之前的旧约束
        constraints.forEach { $0.isActive = false }
        
        var previousTag: UIView?
        var currentRowFirstTag = tags[0]
        
        for (index, tag) in tags.enumerated() {
            // 让标签宽度自适应文本，加上内边距
            let widthConstraint = tag.widthAnchor.constraint(equalToConstant: tag.intrinsicContentSize.width + tagContentInsets.left + tagContentInsets.right)
            widthConstraint.priority = .defaultHigh
            widthConstraint.isActive = true
            
            // 设置标签的高度
            tag.heightAnchor.constraint(equalToConstant: tag.intrinsicContentSize.height + tagContentInsets.top + tagContentInsets.bottom).isActive = true
            
            if let prevTag = previousTag {
                // 水平方向：当前标签和前一个标签的间距
                let horizontalConstraint = tag.leadingAnchor.constraint(greaterThanOrEqualTo: prevTag.trailingAnchor, constant: tagSpacing)
                // 垂直方向：默认和当前行第一个标签顶部对齐
                let topAlignConstraint = tag.topAnchor.constraint(equalTo: currentRowFirstTag.topAnchor)
                // 确保标签不超出容器右侧
                let trailingConstraint = tag.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -tagSpacing)
                trailingConstraint.priority = .defaultHigh
                // 如果水平放不下，就换行（低优先级约束，只有当水平约束不满足时生效）
                let wrapConstraint = tag.topAnchor.constraint(greaterThanOrEqualTo: prevTag.bottomAnchor, constant: tagSpacing)
                wrapConstraint.priority = .defaultLow
                
                NSLayoutConstraint.activate([horizontalConstraint, topAlignConstraint, trailingConstraint, wrapConstraint])
                
                // 判断是否需要换行：如果水平约束的实际常数大于0，说明放不下，更新当前行第一个标签
                if horizontalConstraint.constant > 0 {
                    currentRowFirstTag = tag
                }
            } else {
                // 第一个标签的左侧约束
                tag.leadingAnchor.constraint(equalTo: leadingAnchor, constant: tagSpacing).isActive = true
            }
            
            previousTag = tag
        }
        
        // 最后一个标签的底部约束，让容器高度自适应
        tags.last?.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -tagSpacing).isActive = true
        // 最后一个标签的右侧约束
        tags.last?.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor, constant: -tagSpacing).isActive = true
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        // 布局变化时（比如旋转）更新约束
        updateTagLayoutConstraints()
    }
}

步骤2：在UITableViewCell中使用 #

在cell里添加titleLabel和TagContainerView，设置约束：

• titleLabel的顶部、左右约束，高度自适应
• TagContainerView的顶部与titleLabel底部的间距、左右边距、底部约束，宽度等于cell的contentView宽度

然后给TagContainerView添加UILabel标签即可，每个标签设置好文本、字体、背景色、圆角等。

步骤3：UITableView自适应高度 #

同样设置UITableView的estimatedRowHeight和rowHeight = UITableView.automaticDimension，cell高度会自动适配。

为什么之前的嵌套StackView方案不行？ #

嵌套垂直+水平StackView的方式需要手动计算每个水平StackView的总宽度，判断是否需要换行，这种方式依赖于当前的固定宽度，当屏幕旋转宽度变化时，StackView不会自动重新计算布局，除非你手动触发更新，而监听旋转事件又不够优雅。上面的两个方案都是让布局系统自动处理宽度变化，完全符合你的“纯Auto Layout”需求。

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