Swift UITableView左滑删除按钮图文上下排列

一、需求：

---

需要左滑删除按钮需要图文上下显示(UIBtutton的图文显示，可根据自己需求显示)

---

左滑删除按钮.jpeg

二、先两种情况

---

1、iOS11.0之前的系统版本
2、iOS11.0之后的系统版本(注意iOS13.0之后也有变化)

三、iOS11.0之前的系统版本代码如下

---

3.1UITableView 实现editActionsForRowAt代理方法

// 适配 iOS11.0之前
    func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
        if #available(iOS 11.0, *) {
            
        } else {
            let deleteAction = UITableViewRowAction(style: .destructive, title: "取消收藏") { (action, indexPath) in
                // TODO
            }
            
            let shareAction = UITableViewRowAction(style: .normal, title: "分享") { (action, indexPath) in
                // TODO
            }
            shareAction.backgroundColor =  MSFColor.RGBA(red: 255, green: 153, blue: 0, alpha: 1.0)
            return [deleteAction, shareAction]
        }
        return nil
    }

3.2修改侧滑按钮，在自定义cell中重写didTransition函数

// 适配 iOS11.0之前
    override func didTransition(to state: UITableViewCell.StateMask) {
        if state == .showingDeleteConfirmation {
            for subView in self.subviews {
                if NSStringFromClass(subView.classForCoder) == "UITableViewCellDeleteConfirmationView" {
                    if let deleteBtn: UIButton = subView.subviews.first as? UIButton  {
                        changeAction(sourceBtn: deleteBtn, title: "取消收藏", imageStr: "icon_collecton_delete")
                    }
                    if let shareBtn: UIButton = subView.subviews.last as? UIButton  {
                        changeAction(sourceBtn: shareBtn, title: "分享", imageStr: "icon_collecton_share")
                    }
                }
            }
        }
    }
    
    private func changeAction(sourceBtn: UIButton, title: String?, imageStr: String?) {
        let btn = UIButton(type: .custom)
        btn.frame = CGRect(x: 0, y: 0, width: sourceBtn.frame.width, height: sourceBtn.frame.height)
        btn.backgroundColor = sourceBtn.backgroundColor
        btn.setImage(UIImage(named: imageStr ?? ""), for: .normal)
        btn.setTitle(title, for: .normal)
        btn.titleLabel?.font = MSFFont.fontValue(size: 14, weight: .regular)
        btn.setTitleColor(UIColor.white, for: .normal)
        // 修改button的图文上下显示
        btn.updateBtnEdgeInsets(style: .Top, space: 1)
        btn.isUserInteractionEnabled = false
        sourceBtn.backgroundColor = .clear
        sourceBtn.addSubview(btn)
    }

四、iOS11.0之后的系统版本代码如下

---

4.1UITableView 实现trailingSwipeActionsConfigurationForRowAt代理方法

@available(iOS 11.0, *)
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let deleteAction = UIContextualAction(style: .normal, title: "") { [weak self] (action, view, resultClosure) in
            guard let `self` = self else {
                return
            }
            // TODO
        }
        let shareAction = UIContextualAction(style: .normal, title: "") { [weak self] (action, view, resultClosure) in
            guard let `self` = self else {
                return
            }
            // TODO
        }
        deleteAction.backgroundColor = .red
        shareAction.backgroundColor = MSFColor.RGBA(red: 255, green: 153, blue: 0, alpha: 1.0)
        let actions = UISwipeActionsConfiguration(actions: [deleteAction, shareAction])
        actions.performsFirstActionWithFullSwipe = false; // 禁止侧滑到最左边触发删除或者分享回调事件
        return actions
    }

4.2修改侧滑按钮 UITableView 实现willBeginEditingRowAt代理方法

//  适配iOS 11.0之后 修改侧滑删除、分享按钮
    func tableView(_ tableView: UITableView, willBeginEditingRowAt indexPath: IndexPath) {
        if #available(iOS 11.0, *) {
            for subView in tableView.subviews {
                if NSStringFromClass(subView.classForCoder) == "UISwipeActionPullView" {
                    if let deleteBtn: UIButton = subView.subviews.last as? UIButton  {
                        changeAction(sourceBtn: deleteBtn, title: "取消收藏", imageStr: "icon_collecton_delete")
                    }
                    if let shareBtn: UIButton = subView.subviews.first as? UIButton  {
                        changeAction(sourceBtn: shareBtn, title: "分享", imageStr: "icon_collecton_share")
                    }
                }  else if NSStringFromClass(subView.classForCoder) == "_UITableViewCellSwipeContainerView" {
                    // iOS13.0之后
                    for sub in subView.subviews {
                        if NSStringFromClass(sub.classForCoder) == "UISwipeActionPullView" {
                            if let deleteBtn: UIButton = sub.subviews.last as? UIButton  {
                                changeAction(sourceBtn: deleteBtn, title: "取消收藏", imageStr: "icon_collecton_delete")
                            }
                            if let shareBtn: UIButton = sub.subviews.first as? UIButton  {
                                changeAction(sourceBtn: shareBtn, title: "分享", imageStr: "icon_collecton_share")
                            }
                        }
                    }
                }
            }
        }
    }

    func changeAction(sourceBtn: UIButton, title: String?, imageStr: String?) {
        let btn = UIButton(type: .custom)
        btn.frame = CGRect(x: 0, y: 0, width: sourceBtn.frame.width, height: sourceBtn.frame.height)
        btn.backgroundColor = sourceBtn.backgroundColor
        btn.setImage(UIImage(named: imageStr ?? ""), for: .normal)
        btn.setTitle(title, for: .normal)
        btn.setTitleColor(UIColor.white, for: .normal)
       btn.titleLabel?.font = MSFFont.fontValue(size: 14, weight: .regular)
        if #available(iOS 13.0, *) {
            btn.titleLabel?.font = MSFFont.fontValue(size: 13, weight: .regular)
        } else {
            btn.contentHorizontalAlignment = .left
        }
      // 修改button的图文上下显示
        btn.updateBtnEdgeInsets(style: .Top, space: 1)
        btn.isUserInteractionEnabled = false
        sourceBtn.backgroundColor = .clear
        sourceBtn.addSubview(btn)
    }

五、修改button的图文上下排列

---

enum MSFBtnEdgeInsetsStyle {
    case Top                //image在上，label在下
    case Left               //image在左， label在右
    case Bottom             //image在下，label在上
    case Right              //image在右， label在左
}

extension UIButton {
    //更新btn的图文位置
   func updateBtnEdgeInsets(style: MSFBtnEdgeInsetsStyle, space: CGFloat) {
        let imageWidth = self.imageView?.frame.width ?? 0
        let imageHeight = self.imageView?.frame.height ?? 0
        
        let labelWidth = min(self.titleLabel?.intrinsicContentSize.width ?? 0, self.frame.width - imageWidth)
        let labelHeight = self.titleLabel?.intrinsicContentSize.height ?? 0
        
        var imageInsets = UIEdgeInsets.zero
        var labelInsets = UIEdgeInsets.zero
        
        switch style {
        case .Top:
            imageInsets = UIEdgeInsets.init(top: -(labelHeight + space) / 2, left: labelWidth / 2, bottom: (labelHeight + space) / 2, right: -labelWidth / 2 )
            labelInsets = UIEdgeInsets.init(top: (imageHeight + space) / 2, left: -imageWidth / 2, bottom: -(imageHeight + space) / 2, right: imageWidth / 2)
            break
        case .Left:
            imageInsets = UIEdgeInsets(top: 0, left: -space, bottom: 0, right: space)
            labelInsets = UIEdgeInsets(top: 0, left: space, bottom: 0, right: -space)
            break
        case .Bottom:
            imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: -(labelHeight + space / 2), right: -labelWidth)
            labelInsets = UIEdgeInsets(top: -(imageHeight + space / 2), left: -imageWidth, bottom: 0, right: 0)
            break
        case .Right:
            imageInsets = UIEdgeInsets(top: 0, left: labelWidth + space, bottom: 0, right: -(labelWidth + space))
            labelInsets = UIEdgeInsets(top: 0, left: -(imageWidth + space), bottom: 0, right: imageWidth + space)
            break
        }
        
        self.imageEdgeInsets = imageInsets
        self.titleEdgeInsets = labelInsets
        
    }
}