Swipe Table View Cell for Custom Actions Tutorial in iOS8 with Swift

in iOS8 a new class is introduced, UITableViewRowAction. This class can be used to create custom actions to the rows of a Table View. In this Tutorial we will add a rate and share action to the Table View row. This tutorial is built in iOS 8.1 and Xcode 6.1.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftActionsTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Remove the View Controller from the Storyboard and drag a Table View Controller to the empty canvas.  Select the Table View Controller, go the Attributes inspector and select "Is initial View Controller"

Select the Table View Cell and go to the Attributes Inspector. In the Table View Cell section set the Identifier  to "Cell".

Since we have deleted the View Controller from the Storyboard we can also delete the ViewController.swift file. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it TableViewController and make it a subclass of UITableViewController.

The TableViewController class needs to be linked to The Table View Controller object in the Storyboard. Select it and go the Identity Inspector. Change the custom class to TableViewController.

Go to TableViewController.swift and create an array containing the table data.

let apps = ["Minecraft","Facebook","Tweetbot","Instagram"]

Change the following delegate methods

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
  // 1
  return 1    
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
  // 2
  return apps.count
}

  
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  // 3
  let cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell
    
  cell.textLabel?.text = apps[indexPath.row]
  
  return cell
}
  1. There is only one section in the Table View so we need to return a 1 in the numberOfSectionsTableView method.
  2. The number of rows is equal to the number of items in the apps array so we use the count method of the array class
  3. The name of the app at the current index of our apps array is assigned to the text property of the textLabel property  of the current cell.

Build and Run the project. The rows should be filled with our apps.

To enable the custom actions when the user swipes on the Table View Cell, first the tableView(_:commitEditingStyle:forRowAtIndexPath) must be implemented.

override func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
}

Now the default Action is enabled on the Table View Cell, which is the Delete action. To add custom action, we need to implement the tableView(_:editActionsForRowAtIndexPath:) method to override  the Delete Action.

override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]?  {
    // 1   
    var shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Share" , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
    // 2
    let shareMenu = UIAlertController(title: nil, message: "Share using", preferredStyle: .ActionSheet)
        
    let twitterAction = UIAlertAction(title: "Twitter", style: UIAlertActionStyle.Default, handler: nil)
    let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil)
      
    shareMenu.addAction(twitterAction)
    shareMenu.addAction(cancelAction)
      
      
    self.presentViewController(shareMenu, animated: true, completion: nil)
    })
    // 3
    var rateAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Rate" , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
    // 4
    let rateMenu = UIAlertController(title: nil, message: "Rate this App", preferredStyle: .ActionSheet)
      
    let appRateAction = UIAlertAction(title: "Rate", style: UIAlertActionStyle.Default, handler: nil)
    let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil)
      
    rateMenu.addAction(appRateAction)
    rateMenu.addAction(cancelAction)
      
      
    self.presentViewController(rateMenu, animated: true, completion: nil)
    })
    // 5
    return [shareAction,rateAction]
  }
  1. A TableViewRowAction defines the Share action to present
  2. An Alert Controller is presented with the Twitter and cancel actions
  3. A TableViewRowAction defines the Rate action to present
  4. An Alert Controller is presented with the Rate and cancel actions
  5. This method returns an array of UITableViewRowAction objects.

Build and Run the project and swipe to see the custom defined actions.

You can download the source code of the iOS8SwiftActionsTableViewTutorial at the ioscreator repository on Github