Swift - 自定义tableViewCell滑动事件按钮2（使用iOS11的滑动按钮接口）

作者：hangge | 2017-12-20 08:10

在之前的文章中我演示了如何使用 editActionsForRowAt 这个代理方法，来实现单元格左滑按钮（点击查看）。但这个方法功能有限，像是 iOS 系统里的邮件 App，除了可以左滑，还能够右滑（如下图），这个方法就没法实现右滑按钮。而且按钮也无法使用自定义图片。

到了 iOS11，苹果又增加了 leadingSwipeActionsConfigurationForRowAt 和 trailingSwipeActionsConfigurationForRowAt 这两个新的代理方法。不但可以自定义头部按钮、尾部按钮，还可以给按钮设置图片。

一、基本用法

1，效果图

（1）我们在 tableView 上向左滑动某个 cell 时，其右侧会出现“更多”“旗标”“删除”这三个按钮选项。当点击“更多”“旗标”按钮时，页面上会弹出相关的操作信息。

（2）而最右侧的“删除”按钮除了点击会触发外，直接向左一滑到底也会触发，触发后会将当前行数据给删除。

（3）除了左滑，右滑单元格时左侧还会出现“未读”按钮，点击后同样在页面上弹出相关的操作信息。

2，样例代码

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource{
    
    var tableView:UITableView?
    
    var items = ["这个是条目1","这个是条目2","这个是条目3","这个是条目4",
                 "这个是条目5","这个是条目6","这个是条目7","这个是条目8",]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        //创建表格视图
        self.tableView = UITableView(frame:self.view.frame, style:.plain)
        self.tableView!.delegate = self
        self.tableView!.dataSource = self
        //创建一个重用的单元格
        self.tableView!.register(UITableViewCell.self,
                                 forCellReuseIdentifier: "SwiftCell")
        self.view.addSubview(self.tableView!)
    }
    
    //在本例中，有1个分区
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    //返回表格行数（也就是返回控件数）
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }
    
    //创建各单元显示内容(创建参数indexPath指定的单元）
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
        -> UITableViewCell {
            //为了提供表格显示性能，已创建完成的单元需重复使用
            let identify:String = "SwiftCell"
            //同一形式的单元格重复使用，在声明时已注册
            let cell = tableView.dequeueReusableCell(
                withIdentifier: identify, for: indexPath)
            cell.textLabel?.text = items[indexPath.row]
            return cell
    }
    
    //头部滑动事件按钮（右滑按钮）
    func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt
        indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        //创建“更多”事件按钮
        let unread = UIContextualAction(style: .normal, title: "未读") {
            (action, view, completionHandler) in
            UIAlertController.showAlert(message: "点击了“未读”按钮")
            completionHandler(true)
        }
        unread.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255,
                                         alpha: 1)
        
        //返回所有的事件按钮
        let configuration = UISwipeActionsConfiguration(actions: [unread])
        return configuration
    }
    
    //尾部滑动事件按钮（左滑按钮）
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt
        indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        //创建“更多”事件按钮
        let more = UIContextualAction(style: .normal, title: "更多") {
            (action, view, completionHandler) in
            UIAlertController.showAlert(message: "点击了“更多”按钮")
            completionHandler(true)
        }
        more.backgroundColor = .lightGray
        
        //创建“旗标”事件按钮
        let favorite = UIContextualAction(style: .normal, title: "旗标") {
            (action, view, completionHandler) in
            UIAlertController.showAlert(message: "点击了“旗标”按钮")
            completionHandler(true)
        }
        favorite.backgroundColor = .orange
        
        
        //创建“删除”事件按钮
        let delete = UIContextualAction(style: .destructive, title: "删除") {
            (action, view, completionHandler) in
            //将对应条目的数据删除
            self.items.remove(at: indexPath.row)
            completionHandler(true)
        }
        
        //返回所有的事件按钮
        let configuration = UISwipeActionsConfiguration(actions: [delete, favorite, more])
        return configuration
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

//扩展UIAlertController
extension UIAlertController {
    //在指定视图控制器上弹出普通消息提示框
    static func showAlert(message: String, in viewController: UIViewController) {
        let alert = UIAlertController(title: nil, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .cancel))
        viewController.present(alert, animated: true)
    }
    
    //在根视图控制器上弹出普通消息提示框
    static func showAlert(message: String) {
        if let vc = UIApplication.shared.keyWindow?.rootViewController {
            showAlert(message: message, in: vc)
        }
    }
}

二、自定义按钮图片

1，只有图片的按钮

如果按钮不想要显示文字，而是显示图标，可以将 UIContextualAction 的 titile 属性设置为 nil， image 属性将其设置为指定图片。

//头部滑动事件按钮（右滑按钮）
func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt
    indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    //创建“更多”事件按钮
    let unread = UIContextualAction(style: .normal, title: nil) {
        (action, view, completionHandler) in
        UIAlertController.showAlert(message: "点击了“未读”按钮")
        completionHandler(true)
    }
    unread.image = UIImage(named: "unread")
    unread.backgroundColor = UIColor(red: 52/255, green: 120/255, blue: 246/255,
                                     alpha: 1)
    
    //返回所有的事件按钮
    let configuration = UISwipeActionsConfiguration(actions: [unread])
    return configuration
}

2，“文字+图片”的按钮

如果 titile 和 image 属性都设置了的话，那么按钮就既有图片、又有文字。注意：这时行高要设置的足够大，否则文字显示不出来，只会显示图标。

三、禁用默认的滑动到底行为

（1）默认情况下，不管是头部事件按钮、还是尾部事件按钮都有滑动触发的功能。即将按钮滑动到底时，会自动触发第一个按钮的事件。

（2）如果不想要这个功能，只需将返回的 UISwipeActionsConfiguration 的 performsFirstActionWithFullSwipe 属性设置为 false 即可。

//尾部滑动事件按钮（左滑按钮）
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt
    indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    //创建“更多”事件按钮
    let more = UIContextualAction(style: .normal, title: "更多") {
        (action, view, completionHandler) in
        //.......
        completionHandler(true)
    }
    
    //创建“旗标”事件按钮
    let favorite = UIContextualAction(style: .normal, title: "旗标") {
        (action, view, completionHandler) in
        //.......
        completionHandler(true)
    }
    
    //创建“删除”事件按钮
    let delete = UIContextualAction(style: .destructive, title: "删除") {
        (action, view, completionHandler) in
        //.......
        completionHandler(true)
    }
    
    //返回所有的事件按钮
    let configuration = UISwipeActionsConfiguration(actions: [delete, favorite, more])
    configuration.performsFirstActionWithFullSwipe = false
    return configuration
}

（3）设置后可以看到按钮无法完全滑到底，自然也不回自动调用相关的事件。