iOS 11: Swipe left/right in UITableViewCell

In iOS 10 if you want to add a left swipe action to your UITableViewCell you need either to implement the functionality yourself using gesture recognizers, or add to your project an already existing library that implements that functionality.

In iOS 11 things look better, since they added a couple of functions to UITableViewDelegate to exactly support that functionality out of the box.

Setting up our sample project

For starters we need to download XCode 9 beta from the apple site. Then we create a single page application, and add some code to display a simple UITableView with some hardcoded data to serve as testing.

Our View Controller:

lass ViewController: UIViewController {

    var datasource:[String] = ["Buy groceries", "Visit dentist", "Send invitations", "Do christmas shopping" ]
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

}

Extend the UITableViewDelegate, and UITableViewDataSource

extension ViewController: UITableViewDelegate,UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return datasource.count
    }

    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TodoCell", for: indexPath)
        cell.textLabel?.text = datasource [indexPath.row]
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        let item = datasource[indexPath.row]
        print(item)
    }
}

Add left/right swipe actions to the UITableViewCell

Now we proceed to add the actions. They are different from iOS 10: we do not have a single function editActionsForRowAt, instead we have two actions: one for the actions corresponding to the left swipe, and one for the right swipe (or trailing, and leading as Apple prefers to call them):

• leadingSwipeActionsConfigurationForRowAt
• trailingSwipeActionsConfigurationForRowAt

So to add our new actions we need to implement those functions:

   func tableView(_ tableView: UITableView,
                   leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
    {
        let closeAction = UIContextualAction(style: .normal, title:  "Close", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
                print("OK, marked as Closed")
                success(true)
            })
            closeAction.image = UIImage(named: "tick")
            closeAction.backgroundColor = .purple

            return UISwipeActionsConfiguration(actions: [closeAction])

    }

    func tableView(_ tableView: UITableView,
                   trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
    {
        let modifyAction = UIContextualAction(style: .normal, title:  "Update", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            print("Update action ...")
            success(true)
        })
        modifyAction.image = UIImage(named: "hammer")
        modifyAction.backgroundColor = .blue

        return UISwipeActionsConfiguration(actions: [modifyAction])
    }

As you can see the code is quite similar to the one we use in iOS 10. And here it is the outcome:

That’s all. I hope it was of help 🙂

If you found this post useful you can subscribe to my blog so you can be notified of new posts.