Empty state handling in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to show a label when the data array is empty.

iOS Swift

if data.isEmpty {
    let emptyLabel = UILabel()
    emptyLabel.text = [1]
    view.addSubview(emptyLabel)
}

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

A"Error occurred"

B"Data loaded"

C"Loading..."

D"No data available"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a loading or error message instead of an empty state message.

Leaving the label text empty.

The label should show a message indicating no data is available when the array is empty.

2fill in blank

medium

Complete the code to center the empty state label in the view.

iOS Swift

emptyLabel.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    emptyLabel.centerXAnchor.constraint(equalTo: view.[1]),
    emptyLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])

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

AtrailingAnchor

BcenterXAnchor

CleadingAnchor

DtopAnchor

Attempts:

3 left

💡 Hint

Common Mistakes

Using leadingAnchor or trailingAnchor which align to edges, not center.

Using topAnchor which aligns vertically.

To center horizontally, use centerXAnchor of the view.

3fill in blank

hard

Fix the error in the code to properly update the UI on the main thread when data is empty.

iOS Swift

DispatchQueue.global().async {
    if data.isEmpty {
        DispatchQueue.[1].async {
            showEmptyState()
        }
    }
}

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

Amain

Bbackground

Cglobal

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using background or global queues for UI updates causing crashes or no effect.

Forgetting to dispatch UI updates to the main thread.

UI updates must happen on the main thread, so use DispatchQueue.main.

4fill in blank

hard

Fill both blanks to create a UIView that shows an empty state message with a background color.

iOS Swift

let emptyView = UIView()
emptyView.backgroundColor = [1]
let messageLabel = UILabel()
messageLabel.text = [2]
emptyView.addSubview(messageLabel)

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

AUIColor.lightGray

B"No items found"

CUIColor.red

D"Loading data"

Attempts:

3 left

💡 Hint

Common Mistakes

Using bright or alarming colors like red for empty states.

Using loading messages instead of empty state messages.

A light gray background is common for empty states and the message should inform no items are found.

5fill in blank

hard

Fill all three blanks to create a function that returns a configured empty state UILabel with accessibility label.

iOS Swift

func createEmptyStateLabel() -> UILabel {
    let label = UILabel()
    label.text = [1]
    label.textColor = [2]
    label.accessibilityLabel = [3]
    return label
}

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

A"No content available"

BUIColor.gray

C"Empty state message"

DUIColor.black

Attempts:

3 left

💡 Hint

Common Mistakes

Using black color which is too strong for empty states.

Not setting accessibility label, making app less accessible.

The label text should inform no content, text color gray is subtle, and accessibility label describes the message for screen readers.

Practice

1. What is the main purpose of handling an empty state in an iOS app?

easy

A. To hide the entire screen without any message

B. To crash the app when data is missing

C. To show a friendly message when there is no data to display

D. To load data repeatedly until available

Solution

1. Step 1: Understand empty state concept

   Empty state means no data is available to show in the UI.

2. Step 2: Purpose of empty state handling

   It improves user experience by showing a helpful message or guide instead of a blank screen.

3. Final Answer:

   To show a friendly message when there is no data to display -> Option C

4. Quick Check:

   Empty state = friendly message [OK]

Hint: Empty state means no data, so show a message [OK]

Common Mistakes:

• Ignoring empty data and showing blank screen
• Crashing app when data is empty
• Reloading data endlessly without message

2. Which Swift code snippet correctly checks if an array named items is empty?

easy

A. if items.isEmpty {}

B. if items.length == 0 {}

C. if items == nil {}

D. if items.count > 0 {}

Solution

1. Step 1: Identify correct Swift property for empty check

   Swift arrays have an isEmpty property to check if they contain no elements.

2. Step 2: Compare options

   if items.isEmpty {} uses items.isEmpty, which is the recommended and clear way to check emptiness.

3. Final Answer:

   if items.isEmpty {} -> Option A

4. Quick Check:

   Use isEmpty to check empty array [OK]

Hint: Use isEmpty property for arrays in Swift [OK]

Common Mistakes:

• Using count > 0 (checks non-empty)
• Checking items == nil (array is not optional)
• Using length property which does not exist for arrays

3. Given this Swift code, what will be the output when items is empty?

let items: [String] = []
if items.isEmpty {
  print("No items found")
} else {
  print("Items available")
}

medium

A. No items found

B. Items available

C. Nothing is printed

D. Runtime error

Solution

1. Step 1: Check the array content

   The array items is empty as it has no elements.

2. Step 2: Evaluate the if condition

   The condition items.isEmpty is true, so the first print statement runs.

3. Final Answer:

   No items found -> Option A

4. Quick Check:

   Empty array triggers "No items found" [OK]

Hint: Empty array triggers isEmpty true branch [OK]

Common Mistakes:

• Assuming else branch runs for empty array
• Expecting no output instead of print
• Thinking code crashes on empty array

4. Identify the error in this Swift code for empty state handling:

var data: [String]?
if data.isEmpty {
  print("No data")
}

medium

A. Using var instead of let causes error

B. data is optional, so isEmpty cannot be called directly

C. Missing else block for non-empty data

D. No error, code is correct

Solution

1. Step 1: Analyze variable type

   Variable data is an optional array ([String]?), meaning it can be nil.

2. Step 2: Check method call on optional

   You cannot call isEmpty directly on an optional without unwrapping it first.

3. Final Answer:

   data is optional, so isEmpty cannot be called directly -> Option B

4. Quick Check:

   Optional must be unwrapped before isEmpty [OK]

Hint: Optional arrays need unwrapping before isEmpty [OK]

Common Mistakes:

• Calling isEmpty directly on optional causes compile error
• Ignoring optional and assuming non-optional
• Thinking var vs let affects isEmpty usage

5. You want to show a label with text "No messages" only when the messages array is empty. Which SwiftUI code correctly handles this empty state?

hard

A. if messages.count > 0 { Text("No messages") } else { List(messages, id: \.self) { Text($0) } }

B. List(messages, id: \.self) { Text($0) } always shows, no empty state

C. Text(messages.isEmpty ? "No messages" : "")

D. if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } }

Solution

1. Step 1: Understand the requirement

   Show "No messages" label only when messages array is empty, otherwise show the list.

2. Step 2: Evaluate options

   if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } uses if messages.isEmpty to conditionally show the label or the list, which is correct.

3. Step 3: Check other options

   if messages.count > 0 { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } reverses the condition incorrectly. Text(messages.isEmpty ? "No messages" : "") shows empty text instead of list. List(messages, id: \.self) { Text($0) } always shows, no empty state never shows empty state.

4. Final Answer:

   if messages.isEmpty { Text("No messages") } else { List(messages, id: \.self) { Text($0) } } -> Option D

5. Quick Check:

   Use if isEmpty to toggle empty state UI [OK]

Hint: Use if isEmpty to show empty state or data list [OK]

Common Mistakes:

• Reversing the condition logic
• Showing empty text instead of list
• Not handling empty state at all