In a new project we wanted to give the user options when they swipe across a table view cell. Most people know that in the Mail app for iOS 8 you can swipe and expose 3 buttons “More” “Flag” and “Archive”. Lets look to see how we can display our own buttons with different colors and titles, then do something when they are tapped.
UITableViewRowAction
A UITableViewRowAction object defines a single action to present when the user swipes horizontally in a table row. In an editable table, performing a horizontal swipe in a row reveals a button to delete the row by default. This class lets you define one or more custom actions to display for a given row in your table. Each instance of this class represents a single action to perform and includes the text, formatting information, and behavior for the corresponding button.
To add custom actions to your table view’s rows, implement the tableView:editActionsForRowAtIndexPath: method in your table view’s delegate object. In that method, create and return the actions for the indicated row. The table handles the remaining work of displaying the action buttons and executing the appropriate handler block when the user taps the button.
func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]? {
let more = UITableViewRowAction(style: .Normal, title: "More") { action, index in
println("more button tapped")
}
more.backgroundColor = UIColor.lightGrayColor()
let favorite = UITableViewRowAction(style: .Normal, title: "Favorite") { action, index in
println("favorite button tapped")
}
favorite.backgroundColor = UIColor.orangeColor()
let share = UITableViewRowAction(style: .Normal, title: "Share") { action, index in
println("share button tapped")
}
share.backgroundColor = UIColor.blueColor()
return [share, favorite, more]
}
Use this method when you want to provide custom actions for one of your table rows. When the user swipes horizontally in a row, the table view moves the row content aside to reveal your actions. Tapping one of the action buttons executes the handler block stored with the action object.
This method returns an array of UITableViewRowAction objects representing the actions for the row. Each action you provide is used to create a button that the user can tap.
Here’s what it looks like when a user swipes across the cell.
To get this working working, you will need to implement the following two methods on your UITableView’s delegate.
func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
// the cells you would like the actions to appear needs to be editable
return true
}
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
// you need to implement this method too or you can't swipe to display the actions
}
The first method canEditRowAtIndexPath enabled what rows you would like to make editable within the table. The second commitEditingStyle needs to be included in your class or you will not be able to swipe open the action buttons.
It’s interesting to note that in iOS 8 Apple opened up editActionsForRowAtIndexPath for developers. It was a private API in iOS 7 that Apple used in their Mail app. Looks like they are doing this again with some newer features. In iOS8 the ability to swipe completely across a cell to implement the action in the array is private, as well as the ability to swipe from the left side to display other action buttons. Features to look for in iOS 9.
You can grab the full source code for this tutorial. Note: Created using XCode 6.3 (Swift 1.2).
