Swipe actions in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a trailing swipe action in a SwiftUI List.

iOS Swift

List {
    Text("Item 1")
        .swipeActions(edge: .trailing) {
            Button(role: .destructive) {
                print("Delete tapped")
            } label: {
                Label("Delete", systemImage: "trash")
            }
        [1]
}

Drag options to blanks, or click blank then click option'

A]

B)

C}

D;

Attempts:

3 left

💡 Hint

Common Mistakes

Using a parenthesis ')' instead of a brace '}' to close the swipeActions block.

Forgetting to close the swipeActions block causing a syntax error.

The swipeActions modifier block must be closed with a closing brace '}'.

2fill in blank

medium

Complete the code to specify the edge for swipe actions on the leading side.

iOS Swift

List {
    Text("Item 2")
        .swipeActions(edge: [1]) {
            Button {
                print("Edit tapped")
            } label: {
                Label("Edit", systemImage: "pencil")
            }
        } 
}

Drag options to blanks, or click blank then click option'

A.leading

B.top

C.bottom

D.center

Attempts:

3 left

💡 Hint

Common Mistakes

Using .top or .bottom which are invalid for swipeActions edge parameter.

Using .center which is not a valid edge option.

The edge parameter accepts .leading or .trailing to specify swipe direction. Here, .leading is correct.

3fill in blank

hard

Fix the error in the swipe action button role to make it destructive.

iOS Swift

List {
    Text("Item 3")
        .swipeActions {
            Button(role: [1]) {
                print("Remove tapped")
            } label: {
                Label("Remove", systemImage: "trash")
            }
        }
}

Drag options to blanks, or click blank then click option'

A.destructive

B.cancel

C.normal

D.default

Attempts:

3 left

💡 Hint

Common Mistakes

Using .default or .normal which are not valid roles in this context.

Using .cancel which is for cancel actions, not destructive.

The role .destructive marks the button as a destructive action, showing red color and warning.

4fill in blank

hard

Fill both blanks to create a swipe action with a custom tint color and a label.

iOS Swift

List {
    Text("Item 4")
        .swipeActions(edge: .trailing) {
            Button {
                print("Flag tapped")
            } label: {
                Label("Flag", systemImage: [1])
            }
            .tint([2])
        }
}

Drag options to blanks, or click blank then click option'

A"flag.fill"

B"flag"

C.red

D.yellow

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong system image name causing the icon not to appear.

Using a string instead of a Color for the tint modifier.

The system image name is "flag" (without .fill) and the tint color is .yellow for a custom highlight.

5fill in blank

hard

Fill all three blanks to create a swipe action with a leading edge, a button role, and a system image.

iOS Swift

List {
    Text("Item 5")
        .swipeActions(edge: [1]) {
            Button(role: [2]) {
                print("Pin tapped")
            } label: {
                Label("Pin", systemImage: [3])
            }
        }
}

Drag options to blanks, or click blank then click option'

A.leading

B.destructive

C"pin"

D.trailing

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up .leading and .trailing edges.

Using invalid roles or missing quotes around system image names.

The swipe action is on the leading edge, the button role is destructive, and the system image is "pin".

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