Swipe Table View Cell for Custom Actions iOS Tutorial with Swift 3

The UITableViewRowAction class can be used to create custom actions to the rows of a Table View. In this Tutorial a rate and share action will be added to the Table View row. This tutorial is made with Xcode 9 and built for iOS 11.

Open Xcode and create a new Single View App.

For product name, use IOS11ActionsTableViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

 

Go to the storyboard. Remove the View Controller from the Storyboard and drag a Navigation Controller to the Scene. This will also add the Table View Controller. Select the Navigation Controller and go to The Attribute inspector. In the View Controller section check the "Is Initial View Controller" checkbox.

 

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

  

The storyboard will look like this.

 

Since the View Controller is removed from the Storyboard the ViewController.swift file can also be deleted from the project. 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. In the Custom Class section change the class to TableViewController.

 

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

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

he TableViewController class contains some boilerplate code. 

Change the following delegate methods   

override func numberOfSections(in tableView: UITableView) -> Int {
    // 1
    return 1
}
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int)

         -> Int {
    // 2
    return apps.count
} 
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) 

         -> UITableViewCell {
    // 3
    let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
    cell.textLabel?.text = apps[indexPath.row]

    return cell
}

1. There is only one section in the Table View so 1 needs to be returned  in the numberOfSections(in:) method.
2. The number of rows is equal to the number of items in the apps array so the count property of the array class is used.
3. The name of the app at the current index of the 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 the app's names.

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

override func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> 

           [UITableViewRowAction]?
{
    // 1
    let shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.default, title: "Share" ,

               handler: { (action:UITableViewRowAction, indexPath: IndexPath) -> 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.present(shareMenu, animated: true, completion: nil)
    })
    // 3
    let rateAction = UITableViewRowAction(style: UITableViewRowActionStyle.default,

          title: "Rate", 

          handler: { (action:UITableViewRowAction, indexPath:IndexPath) -> 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.present(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 IOS11ActionsTableViewTutorial at the ioscreator repository on Github