美文网首页
[001][iOS-Swift]TableViewCell左滑删

[001][iOS-Swift]TableViewCell左滑删

作者: 快乐捣蛋鬼 | 来源:发表于2019-07-25 12:06 被阅读0次

    Github: https://github.com/ZIYOCHIRO/DesignTips/tree/master/UITableView-Delete

    CornerRectCell
    customDeleteButton

    1.自定义圆角TableViewCell

    新建DeleteTableViewCell以及DeleteTableViewCell.xib文件

    customTableViewCell
    在DeleteTableViewCell的ContentView中添加一个View作为CornerView,并设置其Top及Bottom Constraints与ContentView的间隔为7.5,以实现每个cell中间的间隔。
    AddCornerViewAndLabel
    将CornerView以及Lable连接到DeleteTableViewCell 的文件里,设置cornerView
    的CornerRadiuscornerView.setCornerRadius(with: 10), 设置Cell的选中样式为无self.selectionStyle = .none
    //  DeleteTableViewCell.swift
    //  UITableView-Delete
    import UIKit
    
    class DeleteTableViewCell: UITableViewCell {
        @IBOutlet weak var cornerView: UIView!
        
        @IBOutlet weak var contentLabel: UILabel!
        
        override func awakeFromNib() {
            super.awakeFromNib()
            cornerView.setCornerRadius(with: 10)
            // Initialization code
        }
    
        override func setSelected(_ selected: Bool, animated: Bool) {
            super.setSelected(selected, animated: animated)
            self.selectionStyle = .none
    
            // Configure the view for the selected state
        }
        
    }
    
    extension UIView {
        
        func setCornerRadius(with Radius: CGFloat) {
            self.layer.cornerRadius = Radius
        }
        
        func setShadow(withRadius Radius: CGFloat) {
            self.layer.cornerRadius = Radius
            self.layer.shadowOffset = CGSize(width: 0, height: 0)
            self.layer.shadowColor = UIColor.lightGray.cgColor
            self.layer.shadowOpacity = 0.4
            self.layer.shadowRadius = 4
            self.layer.masksToBounds = false
            
        }
    }
    
    

    2.自定义侧滑删除按钮

    自定义TableView的侧滑删除按钮,实际上就是要自定义一个TableView,改变其侧滑View里的button样式。
    cellHeight 为每个cell的实际高度,也就是Cell的Corner View的高度,而不是Content View 的高度
    buttonColor 为侧滑删除按钮的颜色

    //  DeleteTableView.swift
    //  UITableView-Delete
    
    import UIKit
    
    class DeleteTableView: UITableView {
        
        @IBInspectable var cellHeight: CGFloat = 60 {
            didSet {
                layoutSubviews()
            }
        }
        
        @IBInspectable var buttonColor: UIColor = .red {
            didSet {
                layoutSubviews()
            }
        }
        
        var buttonTitle: String = "删除"
        
        override func layoutSubviews() {
            super.layoutSubviews()
            
            if #available(iOS 11.0, *) {
                for subview in self.subviews where subview.isKind(of: NSClassFromString("UISwipeActionPullView")!) {
                    
                    for view in subview.subviews where view.isKind(of: NSClassFromString("UISwipeActionStandardButton")!) {
                        
                        
                        view.frame = CGRect.init(x: 0, y: 7.5, width: 60, height: cellHeight)
                        
                        for subSubView in view.subviews where view.isKind(of: UIButton.self) {
                            subSubView.removeFromSuperview()
                        }
                     
                        let deleteButton = setDeleteButton(frame: view.frame)
                        view.addSubview(deleteButton)
                        view.bringSubviewToFront(deleteButton)
                        
                    }
                }
                
            } else {    // IOS 10以及以下
                for subview in subviews where subview.isKind(of: NSClassFromString("UITableViewCellDeleteConfirmationView")!) {
                    subview.backgroundColor = buttonColor
                    
                    for view in subview.subviews where view.isKind(of: UIButton.self) {
                        view.backgroundColor = buttonColor
                        
                        view.backgroundColor = UIColor.clear
                        view.frame = CGRect.init(x: 0, y: 7.5, width: 60, height: cellHeight )
                        
                        let deleteButton = setDeleteButton(frame: view.frame)
                        view.addSubview(deleteButton)
                        view.bringSubviewToFront(deleteButton)
                    }
                }
            }
        }
        
        private func setDeleteButton(frame: CGRect) -> UIButton {
            let deleteButton = UIButton(type: .custom)
            deleteButton.frame = CGRect.init(x: 10, y: 0, width: cellHeight, height: cellHeight )
            deleteButton.backgroundColor = buttonColor
            deleteButton.setTitle(buttonTitle, for: .normal)
            deleteButton.setTitleColor(UIColor.white, for: .normal)
            deleteButton.titleLabel?.numberOfLines = 0
            deleteButton.titleLabel?.font = UIFont.systemFont(ofSize: 15)
            deleteButton.setCornerRadius(with: cellHeight / 2)
            
            return deleteButton
        }
    
    }
    
    

    3.使用自定义的TableView(带有自定义的侧滑按钮)以及自定的Cell

    添加一个TableView,设置其class为DeleteTableView,并设置其cell高度,Button的颜色


    DeleteTableView
    setCellHeightAndButtonColor

    将tableView连接到viewController,在viewDidLoad方法里为tableView注册自定义的cell,不要忘了设置cell的identifier

    //  ViewController.swift
    //  UITableView-Delete
    
    import UIKit
    
    class ViewController: UIViewController {
        
        var exampleContent: [String] = ["item1", "item2", "item3", "item4", "item5"]
    
        @IBOutlet weak var exampleTableView: UITableView!
        override func viewDidLoad() {
            super.viewDidLoad()
            
            exampleTableView.delegate = self
            exampleTableView.dataSource = self
            exampleTableView.separatorStyle = .none
            exampleTableView.register(UINib.init(nibName: "DeleteTableViewCell", bundle: nil), forCellReuseIdentifier: "DeleteTableViewCell")
            
        }
    }
    
    extension ViewController: UITableViewDelegate, UITableViewDataSource {
        
        func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
            return 80
        }
        
        func numberOfSections(in tableView: UITableView) -> Int {
            return 1
        }
        
        func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
            return exampleContent.count
        }
        
        func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
            return 10
        }
        
        func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
            let view = UIView()
            view.backgroundColor = UIColor.clear
            return view
        }
        
        func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
            let cell = tableView.dequeueReusableCell(withIdentifier: "DeleteTableViewCell", for: indexPath) as! DeleteTableViewCell
            cell.contentLabel.text = exampleContent[indexPath.row]
            
            return cell
        }
        
        func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
            let delete = UITableViewRowAction.init(style: .default, title: "删除") { (action, indexpath) in
            }
            delete.backgroundColor = UIColor.lightGray
            return [delete]
        }
        
        
    }
    
    
    

    相关文章

      网友评论

          本文标题:[001][iOS-Swift]TableViewCell左滑删

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