Creating UIContextualAction in Swift

In the dynamic world of iOS development, creating intuitive and user-friendly interfaces is paramount. One powerful feature that enhances user interaction within your app is the UIContextualAction. This feature allows you to add swipe actions to table view cells, providing users with quick access to common tasks. In this blog, we will delve into the process of creating and implementing UIContextualAction in Swift, ensuring your app’s interface is both functional and engaging.

Introduction to UIContextualAction

Firstly, UIContextualAction is a component of the UIKit framework that enables developers to add customizable swipe actions to table view cells. These actions can be triggered when a user swipes left or right on a cell, presenting options such as delete, edit, or any other context-specific actions. Moreover, this feature significantly enhances the user experience by providing quick access to important functionalities.

Setting Up the Project

To begin with, let’s create a new Xcode project. Open Xcode and select “Create a new Xcode project.” Choose the “App” template under the iOS section and click “Next.” Give your project a name, select Swift as the language, and ensure “Use Storyboards” is unchecked if you prefer to work programmatically.

Creating UIContextualAction

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    let tableView = UITableView()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Additional setup
        view.addSubview(tableView)
        tableView.delegate = self
        tableView.dataSource = self
        tableView.frame = view.bounds
    }

    // UITableViewDataSource Methods
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 10
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
        cell.textLabel?.text = "Item \(indexPath.row)"
        return cell
    }

    // UITableViewDelegate Methods
    func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in
            print("Delete tapped")
            completionHandler(true)
        }

        deleteAction.backgroundColor = .red
        let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
        return configuration
    }
}

Next, within the UITableViewDelegate method tableView(_:trailingSwipeActionsConfigurationForRowAt:), we will create our UIContextualAction. For instance, let’s create a delete action:

Customizing the Action

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in
        // Action code
        print("Delete tapped")
        completionHandler(true)
    }
    
    deleteAction.backgroundColor = .red
    let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
    return configuration
}

Additionally, you can customize the UIContextualAction to perform different tasks. For example, let’s add an edit action alongside the delete action:

Implementing UIContextualAction

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in
        // Delete action code
        print("Delete tapped")
        completionHandler(true)
    }

    let editAction = UIContextualAction(style: .normal, title: "Edit") { (action, view, completionHandler) in
        // Edit action code
        print("Edit tapped")
        completionHandler(true)
    }
    
    editAction.backgroundColor = .blue

    let configuration = UISwipeActionsConfiguration(actions: [deleteAction, editAction])
    return configuration
}

Furthermore, it’s important to ensure that the actions perform their intended tasks. For instance, updating the data source when an action is performed can be crucial. Here’s an example of how you might implement the delete action to remove an item from the table view:

var items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return items.count
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: .default, reuseIdentifier: "cell")
    cell.textLabel?.text = items[indexPath.row]
    return cell
}

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { (action, view, completionHandler) in
        self.items.remove(at: indexPath.row)
        tableView.deleteRows(at: [indexPath], with: .automatic)
        completionHandler(true)
    }
    
    let editAction = UIContextualAction(style: .normal, title: "Edit") { (action, view, completionHandler) in
        // Edit action code
        print("Edit tapped")
        completionHandler(true)
    }

    deleteAction.backgroundColor = .red
    editAction.backgroundColor = .blue

    let configuration = UISwipeActionsConfiguration(actions: [deleteAction, editAction])
    return configuration
}

Conclusion

To sum up, UIContextualAction is an effective tool that helps iOS developers create user interfaces that are quick and easy to use. You may improve the overall user experience by giving users rapid access to necessary features by adding customisable swipe actions to your table view cells. See the difference when you incorporate UIContextualAction into your next iOS project!

Extra Advice

Give consumers visual signals by assigning various colours to distinct actions.

Utilize different colors for different actions to provide visual cues to users.
To guarantee seamless operation, test swipe actions on actual devices at all times.
For a more engaging user experience, think about including animations into the actions.
You may successfully integrate UIContextualAction into your Swift apps and improve the interactivity and user-friendliness of your iOS development projects by following these guidelines.

Have fun with coding!