如何设置TableViewCell右滑时图标底部的标题？

我明白你的需求——想让TableView右滑操作的标题显示在图标正下方，而不是默认的并排布局。这个问题其实是因为系统默认的UIContextualAction（或者低版本的UITableViewRowAction）是水平排列图标和标题的，我们需要自定义布局来实现垂直排列。下面分版本给你具体的解决方案：

iOS13及以后引入了UIContextualAction的contentView属性，我们可以直接自定义这个视图来实现图标在上、标题在下的垂直布局：

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    // 1. 创建自定义的动作容器视图
    let actionView = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: tableView.rowHeight))
    
    // 2. 添加图标视图
    let iconImageView = UIImageView(image: UIImage(systemName: "trash.fill")) // 替换成你的图标
    iconImageView.tintColor = .white
    iconImageView.translatesAutoresizingMaskIntoConstraints = false
    actionView.addSubview(iconImageView)
    
    // 3. 添加标题标签
    let titleLabel = UILabel()
    titleLabel.text = "删除" // 替换成你的标题
    titleLabel.textColor = .white
    titleLabel.font = UIFont.systemFont(ofSize: 12)
    titleLabel.textAlignment = .center
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    actionView.addSubview(titleLabel)
    
    // 4. 设置约束实现垂直居中排列
    NSLayoutConstraint.activate([
        iconImageView.centerXAnchor.constraint(equalTo: actionView.centerXAnchor),
        iconImageView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: -4), // 图标和标题的间距
        titleLabel.centerXAnchor.constraint(equalTo: actionView.centerXAnchor),
        titleLabel.centerYAnchor.constraint(equalTo: actionView.centerYAnchor, constant: 8) // 微调整体位置，让布局更美观
    ])
    
    // 5. 创建右滑动作
    let deleteAction = UIContextualAction(style: .destructive, title: nil) { [weak self] (action, view, completionHandler) in
        // 这里写你的业务逻辑，比如删除行
        self?.tableView.deleteRows(at: [indexPath], with: .automatic)
        completionHandler(true)
    }
    
    // 6. 配置动作样式
    deleteAction.backgroundColor = .systemRed // 替换成你的背景色
    deleteAction.contentView = actionView // 绑定自定义视图
    
    // 7. 返回右滑配置
    let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
    return configuration
}

如果需要兼容iOS12及更低版本，我们需要使用UITableViewRowAction的customView属性来实现：

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    // 1. 创建右滑动作
    let deleteAction = UITableViewRowAction(style: .destructive, title: nil) { [weak self] (action, indexPath) in
        // 业务逻辑
        self?.tableView.deleteRows(at: [indexPath], with: .automatic)
    }
    
    // 2. 创建自定义按钮作为动作视图
    let actionButton = UIButton(type: .custom)
    actionButton.backgroundColor = .systemRed
    actionButton.frame = CGRect(x: 0, y: 0, width: 80, height: tableView.rowHeight)
    
    // 3. 添加图标和标题（和上面的约束逻辑一致）
    let iconImageView = UIImageView(image: UIImage(named: "trash_icon")) // 替换成你的本地图标
    iconImageView.tintColor = .white
    iconImageView.translatesAutoresizingMaskIntoConstraints = false
    actionButton.addSubview(iconImageView)
    
    let titleLabel = UILabel()
    titleLabel.text = "删除"
    titleLabel.textColor = .white
    titleLabel.font = UIFont.systemFont(ofSize: 12)
    titleLabel.textAlignment = .center
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    actionButton.addSubview(titleLabel)
    
    NSLayoutConstraint.activate([
        iconImageView.centerXAnchor.constraint(equalTo: actionButton.centerXAnchor),
        iconImageView.bottomAnchor.constraint(equalTo: titleLabel.topAnchor, constant: -4),
        titleLabel.centerXAnchor.constraint(equalTo: actionButton.centerXAnchor),
        titleLabel.centerYAnchor.constraint(equalTo: actionButton.centerYAnchor, constant: 8)
    ])
    
    // 4. 绑定自定义视图到动作
    deleteAction.backgroundColor = .clear // 隐藏系统默认背景，用自定义按钮的背景色
    deleteAction.customView = actionButton
    
    return [deleteAction]
}

• 一定要把动作的title设为nil，避免系统默认的标题干扰自定义布局
• 可以根据需求调整图标和标题的间距、字体大小、视图宽度，让布局更贴合你的设计
• 如果使用系统SF图标，UIImage(systemName:)仅支持iOS13+，低版本请替换为本地图片

内容的提问来源于stack exchange，提问作者Prathap Reddy Jakkireddy