Swipe actions in iOS Swift - UI Render Trace

Component - Swipe actions

This UI component allows users to swipe a list item left or right to reveal quick action buttons like Delete or Edit. It improves usability by letting users perform common tasks directly from the list.

Widget Tree

UITableView
└── UITableViewCell
    ├── ContentView
    │   └── UILabel (Item title)
    └── SwipeActions
        ├── LeadingSwipeActionsConfiguration (optional)
        └── TrailingSwipeActionsConfiguration

The main view is a UITableView showing a list. Each row is a UITableViewCell containing a label for the item text. Swipe actions are attached to each cell, configured on the leading (left) or trailing (right) side to show buttons when swiped.

Render Trace - 4 Steps

Step 1: UITableView

Step 2: UITableViewCell

Step 3: UISwipeActionsConfiguration

Step 4: UIContextualAction

State Change - Re-render

Trigger:User swipes a table view cell left

Before

Cell shows only the item label with no buttons visible

→

After

Swipe action buttons (Delete, Edit) appear behind the cell

Re-renders:The swiped UITableViewCell re-renders to show the swipe buttons

UI Quiz - 3 Questions

What happens when you swipe a cell to the left in this UI?

A Nothing happens

B Swipe action buttons appear on the right side of the cell

C The cell deletes immediately

D The cell moves to the top of the list

Key Insight

Swipe actions let users quickly access common tasks without leaving the list. Configuring them on UITableViewCells improves app efficiency and user satisfaction by reducing taps and navigation.

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