Swipe actions in iOS Swift

Introduction

Swipe actions let users quickly do tasks by swiping on a list item. It makes apps easier and faster to use.

To delete an email by swiping left on it in a mail app.

To mark a message as read by swiping right on it in a chat app.

To archive a note by swiping left in a notes app.

To reveal options like edit or share on a contact by swiping on it.

Syntax

iOS Swift

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

Use trailingSwipeActionsConfigurationForRowAt for swipe actions from right to left.

Create UIContextualAction for each swipe button with style and title.

Examples

This example adds a red Delete button when swiping left on a row.

iOS Swift

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let delete = UIContextualAction(style: .destructive, title: "Delete") { action, view, completion in
        print("Delete tapped")
        completion(true)
    }
    return UISwipeActionsConfiguration(actions: [delete])
}

This example adds a blue Mark button when swiping right on a row.

iOS Swift

func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let mark = UIContextualAction(style: .normal, title: "Mark") { action, view, completion in
        print("Mark tapped")
        completion(true)
    }
    mark.backgroundColor = .blue
    return UISwipeActionsConfiguration(actions: [mark])
}

Sample App

This app shows a list of fruits. Swipe left on any fruit to see a red Delete button. Tapping Delete prints which fruit was deleted.

iOS Swift

import UIKit

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    let tableView = UITableView()
    var items = ["Apple", "Banana", "Cherry"]

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

    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 delete = UIContextualAction(style: .destructive, title: "Delete") { action, view, completion in
            print("Deleted: \(self.items[indexPath.row])")
            completion(true)
        }
        return UISwipeActionsConfiguration(actions: [delete])
    }
}

Important Notes

Swipe actions only work on UITableView or UICollectionView rows.

Always call completion(true) after handling the action to close the swipe menu.

You can add multiple actions by putting more UIContextualAction in the array.

Summary

Swipe actions let users quickly do tasks by swiping on list items.

Use UIContextualAction inside swipe configuration methods to add buttons.

Call completion handler to finish the swipe action.

Practice

1. What is the main purpose of using UIContextualAction in a swipe action on iOS?

easy

A. To handle tap gestures on the entire screen

B. To create buttons that appear when the user swipes a table cell

C. To change the background color of the app

D. To add animations to buttons outside of swipe actions

Solution

1. Step 1: Understand swipe actions in iOS

   Swipe actions allow users to reveal buttons by swiping on a list item.

2. Step 2: Role of UIContextualAction

   UIContextualAction creates the buttons shown during the swipe gesture.

3. Final Answer:

   To create buttons that appear when the user swipes a table cell -> Option B

4. Quick Check:

   UIContextualAction = Swipe buttons [OK]

Hint: UIContextualAction = swipe buttons on list items [OK]

Common Mistakes:

• Confusing swipe action buttons with general tap gestures
• Thinking UIContextualAction changes app colors
• Assuming it adds animations unrelated to swipe

2. Which of the following is the correct way to create a UIContextualAction for a swipe action in Swift?

easy

A. let action = UIContextualAction(style: .normal, title: "Delete", handler: { _, _, completionHandler in completionHandler(true) })

B. let action = UIContextualAction(style: "normal", title: "Delete", handler: { _, _, completionHandler in completionHandler(true) })

C. let action = UIContextualAction(style: .normal, title: Delete, handler: { _, _, completionHandler in completionHandler(true) })

D. let action = UIContextualAction(style: .normal, title: "Delete")

Solution

1. Step 1: Check UIContextualAction initializer syntax

   The initializer requires a style enum, a String title, and a handler closure with parameters.

2. Step 2: Validate each option

   let action = UIContextualAction(style: .normal, title: "Delete", handler: { _, _, completionHandler in completionHandler(true) }) uses correct enum style, quotes around title, and proper handler closure with completion call.

3. Final Answer:

   let action = UIContextualAction(style: .normal, title: "Delete", handler: { _, _, completionHandler in completionHandler(true) }) -> Option A

4. Quick Check:

   Correct initializer syntax = let action = UIContextualAction(style: .normal, title: "Delete", handler: { _, _, completionHandler in completionHandler(true) }) [OK]

Hint: Use .normal enum and quoted title with handler closure [OK]

Common Mistakes:

• Using string instead of enum for style
• Missing quotes around title string
• Omitting handler closure or completion call

3. Given this code snippet inside a UITableViewDelegate method, what happens when the user swipes the cell?

let deleteAction = UIContextualAction(style: .destructive, title: "Delete") { _, _, completionHandler in
    print("Deleted")
    completionHandler(true)
}
let configuration = UISwipeActionsConfiguration(actions: [deleteAction])
return configuration

medium

A. A red "Delete" button appears; tapping it prints "Deleted" and closes swipe

B. The cell immediately deletes without user interaction

C. Nothing happens because completionHandler is not called

D. The swipe gesture is disabled

Solution

1. Step 1: Analyze swipe action setup

   A destructive style button labeled "Delete" is created with a handler that prints and calls completionHandler(true).

2. Step 2: Understand user interaction

   Swiping reveals the button; tapping it triggers the handler, printing "Deleted" and ending the swipe.

3. Final Answer:

   A red "Delete" button appears; tapping it prints "Deleted" and closes swipe -> Option A

4. Quick Check:

   Swipe button tap triggers handler = A red "Delete" button appears; tapping it prints "Deleted" and closes swipe [OK]

Hint: Completion handler true ends swipe and triggers action [OK]

Common Mistakes:

• Thinking swipe deletes immediately without tap
• Forgetting to call completionHandler(true)
• Assuming swipe gesture disables without code

4. Identify the error in this swipe action handler code:

let editAction = UIContextualAction(style: .normal, title: "Edit") { action, view, _ in
    print("Edit tapped")
}

medium

A. Title string should be lowercase

B. Incorrect style enum used for edit action

C. Missing call to completionHandler inside the closure

D. Closure parameters are in wrong order

Solution

1. Step 1: Review UIContextualAction handler requirements

   The handler closure must call the completionHandler to signal action completion.

2. Step 2: Check the given code

   The closure ignores the third parameter (completionHandler) and does not call it, causing swipe to hang.

3. Final Answer:

   Missing call to completionHandler inside the closure -> Option C

4. Quick Check:

   Always call completionHandler in swipe action handler [OK]

Hint: Always call completionHandler(true/false) in handler closure [OK]

Common Mistakes:

• Ignoring completionHandler call
• Using wrong style enum (normal is valid here)
• Thinking title case matters
• Mixing closure parameter order

5. You want to add two swipe actions: "Flag" (normal style) and "Delete" (destructive style) to a table cell. Which code correctly creates and returns the swipe configuration?

hard

A. let flag = UIContextualAction(style: .normal, title: "Flag") { _, _, completion in completion(true) }
let delete = UIContextualAction(style: .destructive, title: "Delete") { _, _, completion in completion(true) }
return UISwipeActionsConfiguration(actions: [flag, delete])

B. let flag = UIContextualAction(style: .normal, title: "Flag") { _, _, completionHandler in completionHandler(true) }
let delete = UIContextualAction(style: .destructive, title: "Delete") { _, _, completionHandler in completionHandler(true) }
return UISwipeActionsConfiguration(actions: [flag, delete])

C. let flag = UIContextualAction(style: .normal, title: "Flag") { _, _, completionHandler in completionHandler(false) }
let delete = UIContextualAction(style: .destructive, title: "Delete") { _, _, completionHandler in completionHandler(true) }
return UISwipeActionsConfiguration(actions: [flag, delete])

D. let flag = UIContextualAction(style: .normal, title: "Flag") { _, _, completionHandler in completionHandler(true) }
let delete = UIContextualAction(style: .destructive, title: "Delete") { _, _, completionHandler in completionHandler(true) }
return UISwipeActionsConfiguration(actions: [delete, flag])

Solution

1. Step 1: Confirm action creation and completion calls

   Both actions use correct styles and call completionHandler(true) to indicate success.

2. Step 2: Check order of actions in configuration

   Swipe actions appear in order given; "Delete" usually placed first for prominence, then "Flag".

3. Final Answer:

   Actions created with correct styles and completion calls; configuration returns [delete, flag] -> Option D

4. Quick Check:

   Correct styles, completion calls, and order = let flag = UIContextualAction(style: .normal, title: "Flag") { _, _, completionHandler in completionHandler(true) } let delete = UIContextualAction(style: .destructive, title: "Delete") { _, _, completionHandler in completionHandler(true) } return UISwipeActionsConfiguration(actions: [delete, flag]) [OK]

Hint: Call completionHandler(true) and order destructive before normal [OK]

Common Mistakes:

• Calling completionHandler(false) which cancels action
• Using wrong variable name for completionHandler
• Incorrect order of actions in array
• Omitting completionHandler call