美文网首页以后备用技术Swiftswift专栏
Swift UITableView左滑删除按钮图文上下排列

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

作者: 烟雨痕 | 来源:发表于2020-08-05 10:21 被阅读0次
    一、需求:

    需要左滑删除按钮需要图文上下显示(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
            
        }
    }
    

    相关文章

      网友评论

        本文标题:Swift UITableView左滑删除按钮图文上下排列

        本文链接:https://www.haomeiwen.com/subject/tarnrktx.html