iOS开发：为UILabel添加右上角删除按钮的实现方案问询

嘿，这个需求在标签类场景里特别常见，我来给你拆解下可行的方案，顺便解答你的疑问～

直接给每个Label绑定按钮确实能实现功能，但会带来两个明显问题：一是代码冗余，每个Label都要重复写按钮创建、约束、点击事件的逻辑；二是约束容易混乱，按钮的布局依赖Label的frame或约束，一旦Label位置变动，按钮的约束也得跟着调整，维护成本很高。

更推荐的做法是把Label和删除按钮封装成一个自定义容器View，这样所有内部布局逻辑都被封装起来，外部使用时就像操作一个普通控件一样，完全不用担心约束混乱的问题。

我给你写一个完整的Swift示例，你可以直接参考：

import UIKit

class TagView: UIView {
    // 内部的文本Label
    private let contentLabel = UILabel()
    // 右上角的删除按钮
    private let deleteButton = UIButton(type: .system)
    
    // 点击删除按钮的回调，外部可以监听这个闭包处理删除逻辑
    var onDeleteTapped: (() -> Void)?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupUI()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupUI()
    }
    
    // 设置内部控件和约束
    private func setupUI() {
        // 给容器View设置样式（圆角、背景色）
        backgroundColor = UIColor.systemGray5
        layer.cornerRadius = 14
        clipsToBounds = false // 允许按钮稍微超出容器，实现参考图的效果
        
        // 配置文本Label
        contentLabel.font = UIFont.systemFont(ofSize: 14)
        contentLabel.textColor = .label
        
        // 配置删除按钮
        deleteButton.setTitle("×", for: .normal)
        deleteButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 16)
        deleteButton.tintColor = .darkGray
        deleteButton.addTarget(self, action: #selector(handleDeleteTap), for: .touchUpInside)
        
        // 添加子控件到容器View
        addSubview(contentLabel)
        addSubview(deleteButton)
        
        // 关闭自动布局转换
        contentLabel.translatesAutoresizingMaskIntoConstraints = false
        deleteButton.translatesAutoresizingMaskIntoConstraints = false
        
        // 设置内部约束
        NSLayoutConstraint.activate([
            // Label的内边距，让文本和按钮、容器边缘有间距
            contentLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
            contentLabel.topAnchor.constraint(equalTo: topAnchor, constant: 6),
            contentLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -6),
            contentLabel.trailingAnchor.constraint(equalTo: deleteButton.leadingAnchor, constant: -6),
            
            // 删除按钮的位置：右上角稍微超出容器
            deleteButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 2),
            deleteButton.topAnchor.constraint(equalTo: topAnchor, constant: -6),
            deleteButton.widthAnchor.constraint(equalToConstant: 20),
            deleteButton.heightAnchor.constraint(equalToConstant: 20)
        ])
    }
    
    // 按钮点击事件
    @objc private func handleDeleteTap() {
        onDeleteTapped?()
    }
    
    // 外部设置文本的方法
    func setTagText(_ text: String) {
        contentLabel.text = text
    }
}

在你的ViewController里，只需要创建TagView实例，设置文本、监听删除回调，再把它加到父视图即可：

let sampleTag = TagView()
sampleTag.setTagText("我是带删除按钮的标签")
sampleTag.onDeleteTapped = { [weak self] in
    sampleTag.removeFromSuperview()
    // 这里可以添加其他删除后的逻辑，比如更新数据源
}

// 把标签加到父视图并设置约束（比如加到一个水平栈视图里）
yourStackView.addArrangedSubview(sampleTag)

这种方式的优势很明显：所有内部布局逻辑都封装在TagView里，外部不用关心Label和按钮的约束关系，复用性极强——你需要多少个带删除按钮的标签，就创建多少个TagView实例就行，完全不会出现约束混乱的问题。

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