Ios – Swipe to Delete and the “More” button (like in Mail app on iOS 7)

cocoa-touchiosswipe-gestureuitableviewuser interface

How to create a "more" button when user swipe a cell in table view (like mail app in ios 7)

I have been looking for this information both here and in the Cocoa Touch forum, but I cannot seem to find the answer and I am hoping someone smarter than myself can give me a solution.

I would like that when the user swipes a table view cell, to display more than one editing button (he default is the delete button).
In the Mail app for iOS 7 you can swipe to delete, but there is a "MORE" button that shows up.

enter image description here

Best Answer

How to Implement

It looks like iOS 8 opens up this API. Hints of such functionality are present in Beta 2.

To get something working, implement the following two methods on your UITableView's delegate to get the desired effect (see gist for an example).

- tableView:editActionsForRowAtIndexPath:
- tableView:commitEditingStyle:forRowAtIndexPath:


Known Issues

The documentation says tableView:commitEditingStyle:forRowAtIndexPath is:

"Not called for edit actions using UITableViewRowAction - the action's handler will be invoked instead."

However, the swiping doesn't work without it. Even if the method stub is blank, it still needs it, for now. This is most obviously a bug in beta 2.


Sources

https://twitter.com/marksands/status/481642991745265664 https://gist.github.com/marksands/76558707f583dbb8f870

Original Answer: https://stackoverflow.com/a/24540538/870028


Update:

Sample code with this working (In Swift): http://dropbox.com/s/0fvxosft2mq2v5m/DeleteRowExampleSwift.zip

The sample code contains this easy-to-follow method in MasterViewController.swift, and with just this method you get the behavior shown in the OP screenshot:

override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]? {

    var moreRowAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "More", handler:{action, indexpath in
        println("MORE•ACTION");
    });
    moreRowAction.backgroundColor = UIColor(red: 0.298, green: 0.851, blue: 0.3922, alpha: 1.0);

    var deleteRowAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Delete", handler:{action, indexpath in
        println("DELETE•ACTION");
    });

    return [deleteRowAction, moreRowAction];
}
Related Topic