UISwipeActionsConfiguration with awesome Animation

Maniisha Gorasiya

Sometimes table views needs to quick actions use without any custom buttons. There is one easy way which create swipe buttons on table view cells. Let’s learn how you can implement these buttons on swipe and know about interesting hidden feature you can use it quickly.
Create a UISwipeActionsConfiguration object to associate custom swipe actions with a row/cell of your table view. Users swipe horizontally left or right in a table view to reveal the actions associated with a row. Each swipe-actions object contains the set of actions like edit & delete to display for each type of swipe.

In this tutorial, You can learn how to adding swipe actions to a tableView.

Declare tableview and String Array:

@IBOutlet weak var tableView: UITableView!
var itemList = ["Desserts", "Drink", "Pasta", "Salad", "Wraps"] // for row title

Add UITableView in Main.StoryBoard and build connection and create delegation in func viewDidLoad()

self.tableView.dataSource = self
self.tableView.delegate = self

Add UITableviewCell class and connect UILabel with storyboard.

class ListViewClass: UITableViewCell {
    @IBOutlet weak var titleLabel: UILabel!

    override func awakeFromNib() {
        // Initialization code

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state

Configuration of UITableview:

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return itemList.count
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat
        return 100.0//Choose your custom row height
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "tbCell", for: indexPath) as! ListViewClass 
        cell.titleLabel.text = "\(itemList[indexPath.row])"
        cell.cellView.layer.cornerRadius = 6
        cell.cellView.layer.masksToBounds = false
// animation of cell
        cell.transform = CGAffineTransform(rotationAngle: 360)
        UIView.animate(withDuration: 0.8, delay: 0.05 * Double(indexPath.row), animations: {
            cell.transform = CGAffineTransform(rotationAngle: 0.0)
        return cell
    func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
        return true

Create trailingSwipeActionsConfigurationForRowAt function:

func tableView(_ tableView: UITableView,
                       trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?

Add UIContextualAction in this function as per your requirement, you can add action with name or action’s icon. Here i’m using icons for better looks. Delete & Edit actions on swipe:

 TrashAction = UIContextualAction(style: .normal, title:  "", handler: {
 [self] (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) 
            itemList.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
        TrashAction.image = UIImage(systemName: "trash")
        TrashAction.image?.withTintColor(UIColor(red: 48/255, green: 194/255, blue: 208/255, alpha: 1.0))
        TrashAction.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)
        let EditAction = UIContextualAction(style: .normal, title:  "", handler: { [self] (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
// AlertView with Textfield for enter text
            let alert = UIAlertController(title: "Want to Edit Item?",message: "",preferredStyle: .alert)
            alert.addAction(UIAlertAction(title: "NO", style: UIAlertAction.Style.default, handler: {
                (alertAction: UIAlertAction!) in
                alert.dismiss(animated: true, completion: nil)
            alert.addTextField { (textField) in
                textField.text = "\(itemList[indexPath.row])"
            alert.addAction(UIAlertAction(title: "YES", style: UIAlertAction.Style.default, handler: {
                (alertAction: UIAlertAction!) in
                let textField = alert.textFields![0] // Force unwrapping because we know it exists.
                if let i = itemList.firstIndex(of: "\(itemList[indexPath.row])") {
                    itemList[i] = textField.text!
                self.tableView.reloadData() // reload your tableview here
            alert.view.tintColor = UIColor.black  // change text color of the buttons
            alert.view.layer.cornerRadius = 25   // change corner radius
            present(alert, animated: true, completion: nil)
            EditAction.image = UIImage(systemName: "square.and.pencil")
            EditAction.image?.withTintColor(UIColor(red: 80/255, green: 191/255, blue: 156/255, alpha: 1.0))
            EditAction.backgroundColor = UIColor(red: 255/255, green: 255/255, blue: 255/255, alpha: 0.0)

And at last return UISwipeActionsConfiguration with above 2 actions:

return UISwipeActionsConfiguration(actions: [TrashAction,EditAction])

That’s it your swipe action is done!!! Hope this article helpful for you...


No Comment

Leave a Comment

Your email address will not be published.

First Floor, Madhav Complex, V. R. Nagar, Mirjapar Madhapar By Pass Ring Road, Bhuj-370001
+(91) 97 26 134340
Mon-Fri 9:00am-6:00pm
24 X 7 online support