如何在UITableViewCell中实现可换行可点击标签云（无第三方库）

当然可以实现，完全不需要依赖第三方库！不过你之前的思路有个核心误区——UIStackView本身是线性布局容器，只能在单一方向（水平/垂直）排列子视图，根本没法自动换行。要实现你要的「左对齐、超出单行自动换行」的标签流，我们有两个原生方案可选：

方案一：使用UICollectionView（推荐，灵活且高性能） #

UICollectionView配合UICollectionViewFlowLayout的自动尺寸特性，是实现标签流最常用的原生方案，支持视图复用，性能更好，还能轻松扩展更多功能（比如滚动、选中状态等）。

实现步骤： #

1. 在UITableViewCell中嵌入UICollectionView，设置约束让它铺满contentView
2. 配置FlowLayout，开启自动计算标签尺寸，设置间距和内边距
3. 自定义CollectionViewCell来承载标签按钮，处理点击事件
4. 给UITableView设置自动行高，让Cell根据CollectionView的高度自适应

代码示例： #

自定义UITableViewCell

final class ProfileFollowedTopicsCell: UITableViewCell {
    static let reuseID = "ProfileFollowedTopicsCell"
    
    var topics: [String] = ["Topic #01", "Topic #02", "Topic #03", "Topic #04", "Topic #05", "Topic #06", "Topic #07", "Engineering", "Code", "Whiskey"] {
        didSet {
            collectionView.reloadData()
        }
    }
    
    // 标签点击回调，可传递给ViewController处理
    var tagTapHandler: ((String) -> Void)?
    
    private let collectionView: UICollectionView = {
        let layout = UICollectionViewFlowLayout()
        // 开启自动尺寸计算，让标签宽度根据文本自适应
        layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        layout.minimumInteritemSpacing = 8 // 标签之间的横向间距
        layout.minimumLineSpacing = 8 // 行与行之间的纵向间距
        layout.sectionInset = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8) // 容器内边距
        
        let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
        cv.translatesAutoresizingMaskIntoConstraints = false
        cv.backgroundColor = .clear
        cv.register(TagCollectionViewCell.self, forCellWithReuseIdentifier: TagCollectionViewCell.reuseID)
        return cv
    }()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        contentView.addSubview(collectionView)
        collectionView.dataSource = self
        collectionView.delegate = self
        
        NSLayoutConstraint.activate([
            collectionView.topAnchor.constraint(equalTo: contentView.topAnchor),
            collectionView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            collectionView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            collectionView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
    }
}

// MARK: - UICollectionView DataSource & Delegate
extension ProfileFollowedTopicsCell: UICollectionViewDataSource, UICollectionViewDelegate {
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        topics.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: TagCollectionViewCell.reuseID, for: indexPath) as! TagCollectionViewCell
        cell.configure(with: topics[indexPath.item])
        cell.tagButton.addTarget(self, action: #selector(onTagTapped(_:)), for: .touchUpInside)
        return cell
    }
    
    @objc private func onTagTapped(_ sender: UIButton) {
        guard let tagText = sender.title(for: .normal) else { return }
        tagTapHandler?(tagText)
    }
}

// MARK: - 自定义标签CollectionViewCell
final class TagCollectionViewCell: UICollectionViewCell {
    static let reuseID = "TagCollectionViewCell"
    
    let tagButton: UIButton = {
        let button = UIButton(type: .system)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.setTitleColor(.black, for: .normal)
        button.titleLabel?.font = .systemFont(ofSize: 14)
        button.backgroundColor = .lightGray.withAlphaComponent(0.3)
        button.layer.cornerRadius = 12
        // 设置内边距，让标签更美观，避免文本紧贴边缘
        button.contentEdgeInsets = UIEdgeInsets(top: 4, left: 12, bottom: 4, right: 12)
        return button
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        contentView.addSubview(tagButton)
        NSLayoutConstraint.activate([
            tagButton.topAnchor.constraint(equalTo: contentView.topAnchor),
            tagButton.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            tagButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            tagButton.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
    }
    
    func configure(with text: String) {
        tagButton.setTitle(text, for: .normal)
    }
}

在ViewController中配置TableView

别忘了开启TableView的自动行高，否则Cell不会自适应标签流的高度：

override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.register(ProfileFollowedTopicsCell.self, forCellReuseIdentifier: ProfileFollowedTopicsCell.reuseID)
    // 开启自动行高
    tableView.rowHeight = UITableView.automaticDimension
    // 设置一个估计高度，帮助TableView快速计算布局
    tableView.estimatedRowHeight = 100
}

// 实现TableView数据源方法
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: ProfileFollowedTopicsCell.reuseID, for: indexPath) as! ProfileFollowedTopicsCell
    // 设置标签点击回调
    cell.tagTapHandler = { tagText in
        print("点击了标签：\(tagText)")
        // 这里可以添加你的业务逻辑
    }
    return cell
}

方案二：自定义View手动布局标签 #

如果你的标签数量很少，也可以直接自定义一个View，手动计算每个标签的位置实现换行。这种方式代码更简洁，但没有视图复用，标签数量多时性能不如CollectionView。

代码示例： #

自定义标签容器View

final class TagContainerView: UIView {
    var tags: [String] = [] {
        didSet {
            setupTagButtons()
        }
    }
    
    var tagTapHandler: ((String) -> Void)?
    
    // 配置参数
    private let spacing: CGFloat = 8 // 标签间距
    private let padding: CGFloat = 8 // 容器内边距
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        translatesAutoresizingMaskIntoConstraints = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupTagButtons() {
        // 移除旧标签
        subviews.forEach { $0.removeFromSuperview() }
        
        // 创建新标签按钮
        tags.forEach { tagText in
            let button = UIButton(type: .system)
            button.setTitle(tagText, for: .normal)
            button.setTitleColor(.black, for: .normal)
            button.titleLabel?.font = .systemFont(ofSize: 14)
            button.backgroundColor = .lightGray.withAlphaComponent(0.3)
            button.layer.cornerRadius = 12
            button.contentEdgeInsets = UIEdgeInsets(top: 4, left: 12, bottom: 4, right: 12)
            button.addTarget(self, action: #selector(onTagTapped(_:)), for: .touchUpInside)
            addSubview(button)
        }
    }
    
    @objc private func onTagTapped(_ sender: UIButton) {
        guard let tagText = sender.title(for: .normal) else { return }
        tagTapHandler?(tagText)
    }
    
    // 手动计算标签布局
    override func layoutSubviews() {
        super.layoutSubviews()
        
        var currentX = padding
        var currentY = padding
        var maxRowHeight: CGFloat = 0
        
        subviews.forEach { view in
            guard let button = view as? UIButton else { return }
            button.sizeToFit()
            
            // 当前行放不下，换行
            if currentX + button.frame.width + padding > bounds.width {
                currentX = padding
                currentY += maxRowHeight + spacing
                maxRowHeight = 0
            }
            
            // 设置按钮位置
            button.frame.origin = CGPoint(x: currentX, y: currentY)
            currentX += button.frame.width + spacing
            maxRowHeight = max(maxRowHeight, button.frame.height)
        }
        
        // 更新容器高度，让父视图自适应
        let totalHeight = currentY + maxRowHeight + padding
        bounds.size.height = totalHeight
        invalidateIntrinsicContentSize()
    }
    
    // 告诉AutoLayout容器的自适应高度
    override var intrinsicContentSize: CGSize {
        CGSize(width: UIView.noIntrinsicMetric, height: bounds.height)
    }
}

在UITableViewCell中使用

final class ProfileFollowedTopicsCell: UITableViewCell {
    static let reuseID = "ProfileFollowedTopicsCell"
    
    var topics: [String] = ["Topic #01", "Topic #02", "Topic #03", "Topic #04", "Topic #05", "Topic #06", "Topic #07", "Engineering", "Code", "Whiskey"] {
        didSet {
            tagContainer.tags = topics
        }
    }
    
    var tagTapHandler: ((String) -> Void)? {
        didSet {
            tagContainer.tagTapHandler = tagTapHandler
        }
    }
    
    private let tagContainer = TagContainerView()
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupUI() {
        contentView.addSubview(tagContainer)
        
        NSLayoutConstraint.activate([
            tagContainer.topAnchor.constraint(equalTo: contentView.topAnchor),
            tagContainer.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            tagContainer.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            tagContainer.trailingAnchor.constraint(equalTo: contentView.trailingAnchor)
        ])
    }
}

同样，ViewController中需要设置TableView的自动行高，和方案一一致。

对你原有代码的问题分析 #

1. UIStackView无法换行：这是核心问题，UIStackView是线性布局，只能单行/单列排列，不支持自动换行，所以这个思路本身走不通。
2. 空UIView挤压标签：你给StackView添加了空UIView作为最后一个子视图，它会抢占所有剩余空间，导致前面的标签被压缩到不可辨认。
3. 按钮宽度计算忽略内边距：你用文本宽度设置按钮宽度，但没有考虑按钮的contentEdgeInsets，导致按钮实际显示的文本被截断。

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