Image view (system and asset) in iOS Swift - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Displaying a system image in SwiftUI

What will be displayed by this SwiftUI code snippet?

iOS Swift

import SwiftUI

struct ContentView: View {
  var body: some View {
    Image(systemName: "star.fill")
      .foregroundColor(.yellow)
      .font(.largeTitle)
  }
}

A A large yellow filled star icon

B A large gray filled star icon

C A large yellow outlined star icon

D A large gray outlined star icon

💡 Hint

The systemName parameter uses SF Symbols, and foregroundColor changes the icon color.

The code uses Image(systemName:) to show the SF Symbol "star.fill" which is a filled star. The foregroundColor(.yellow) changes the star's color to yellow, and font(.largeTitle) makes it large.

❓ ui_behavior

intermediate

Displaying an asset image in UIKit

What will this UIKit code display on the screen?

iOS Swift

import UIKit

class ViewController: UIViewController {
  override func viewDidLoad() {
    super.viewDidLoad()
    let imageView = UIImageView(image: UIImage(named: "logo"))
    imageView.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
    view.addSubview(imageView)
  }
}

A A system image named "logo" shown at position (50,50)

B A blank view because "logo" image is not loaded

C An image named "logo" from the app assets shown at position (50,50) with size 100x100

D An error because UIImage(named:) cannot be used in viewDidLoad

💡 Hint

UIImage(named:) loads images from the app's asset catalog by name.

UIImage(named: "logo") loads the image named "logo" from the app's assets. UIImageView displays it at the specified frame. This code shows the image at (50,50) with width and height 100.

📝 Syntax

advanced

Correct syntax for system image with rendering mode

Which option correctly creates a SwiftUI Image with system name "heart" and applies original rendering mode?

A Image(systemName: "heart").renderingMode(.original)

B Image(systemName: "heart").renderingMode(.template)

C Image(systemName: "heart", renderingMode: .original)

D Image(systemName: "heart").renderMode(.original)

💡 Hint

Rendering mode is a modifier method in SwiftUI, not a parameter in initializer.

In SwiftUI, renderingMode is a modifier method called on the Image view. Option A uses the correct syntax. Option A tries to pass renderingMode as a parameter which is invalid. Option A uses .template which is different mode. Option A uses wrong method name.

🔧 Debug

advanced

Why does UIImage(named:) return nil?

Given this UIKit code, why might imageView.image be nil? let imageView = UIImageView() imageView.image = UIImage(named: "icon")

A UIImageView cannot display images loaded with UIImage(named:)

B The image named "icon" is missing from the asset catalog or bundle

C UIImage(named:) requires a full file path, not just the name

D imageView.image must be set inside viewDidLoad to work

💡 Hint

UIImage(named:) returns nil if the image name is not found in assets or bundle.

UIImage(named:) looks for the image in the app's asset catalog or bundle by name. If the image is missing or the name is misspelled, it returns nil. UIImageView can display images loaded this way. The method does not require full path. Setting image outside viewDidLoad is allowed.

🧠 Conceptual

expert

Difference between system and asset images in iOS

Which statement correctly describes the difference between system images and asset images in iOS development?

A System images are always raster images, asset images are always vector images

B System images must be added manually to assets, asset images are built-in icons from Apple

C System images can only be used in UIKit, asset images only in SwiftUI

D System images are vector icons provided by Apple (SF Symbols), asset images are custom images added to the app bundle

💡 Hint

Think about where system images come from and how asset images are added.

System images are vector icons called SF Symbols provided by Apple and can be used by name. Asset images are custom images developers add to the app's asset catalog or bundle. System images are vector and scalable, asset images can be raster or vector. Both UIKit and SwiftUI can use both types.

Practice

1. What is the correct way to create an image view that displays an image named "logo" from your app's assets?

easy

A. UIImageView(image: UIImage(named: "logo"))

B. UIImageView(image: UIImage(systemName: "logo"))

C. UIImageView(named: "logo")

D. UIImageView(systemName: "logo")

Solution

1. Step 1: Understand UIImageView initialization

   UIImageView is initialized with a UIImage object, not a string name directly.

2. Step 2: Load image from assets correctly

   Use UIImage(named:) to load an image from app assets by name.

3. Final Answer:

   UIImageView(image: UIImage(named: "logo")) -> Option A

4. Quick Check:

   Load asset image with UIImage(named:) = D [OK]

Hint: Use UIImage(named:) for asset images, not systemName [OK]

Common Mistakes:

• Using UIImage(systemName:) for asset images
• Passing string directly to UIImageView initializer
• Confusing UIImageView(named:) which doesn't exist

2. Which of the following is the correct syntax to create a system image view with the icon named "star.fill"?

easy

A. UIImageView(image: UIImage(named: "star.fill"))

B. UIImageView(systemName: "star.fill")

C. UIImageView(image: UIImage(systemName: "star.fill"))

D. UIImageView(image: "star.fill")

Solution

1. Step 1: Identify system image loading method

   System icons are loaded using UIImage(systemName:).

2. Step 2: Initialize UIImageView with system image

   Pass UIImage(systemName: "star.fill") to UIImageView's image parameter.

3. Final Answer:

   UIImageView(image: UIImage(systemName: "star.fill")) -> Option C

4. Quick Check:

   System image uses UIImage(systemName:) = B [OK]

Hint: Use UIImage(systemName:) for system icons only [OK]

Common Mistakes:

• Using UIImage(named:) for system icons
• Trying to initialize UIImageView with systemName directly
• Passing string instead of UIImage object

3. What will be the result of this Swift code snippet?

let imageView = UIImageView(image: UIImage(systemName: "heart.fill"))
imageView.tintColor = .red

medium

A. An image view showing a red filled heart system icon

B. An image view showing a heart icon with default color (black)

C. A runtime error because tintColor cannot be set

D. An empty image view with no image displayed

Solution

1. Step 1: Load system image "heart.fill"

   UIImage(systemName: "heart.fill") loads a filled heart icon.

2. Step 2: Set tintColor to red

   Setting imageView.tintColor to .red colors the system icon red.

3. Final Answer:

   An image view showing a red filled heart system icon -> Option A

4. Quick Check:

   System icon + tintColor = colored icon [OK]

Hint: System icons respect tintColor for color changes [OK]

Common Mistakes:

• Assuming system icons ignore tintColor
• Confusing asset images with system icons for tinting
• Expecting default black color after setting tintColor

4. Identify the error in this Swift code that tries to display a system image "bell" in an image view:

let imageView = UIImageView(image: UIImage(named: "bell"))
imageView.tintColor = .blue

medium

A. The code is correct and will display a blue bell icon

B. UIImageView does not have a tintColor property

C. The image name "bell" is invalid for assets

D. UIImage(named:) cannot load system images like "bell"

Solution

1. Step 1: Check image loading method

   UIImage(named:) loads images from app assets, not system icons.

2. Step 2: Recognize system image loading requirement

   System images like "bell" must be loaded with UIImage(systemName:).

3. Final Answer:

   UIImage(named:) cannot load system images like "bell" -> Option D

4. Quick Check:

   System images need UIImage(systemName:) = A [OK]

Hint: Use UIImage(systemName:) for system icons, not UIImage(named:) [OK]

Common Mistakes:

• Using UIImage(named:) for system icons
• Assuming tintColor works without correct image loading
• Thinking UIImageView lacks tintColor property

5. You want to display a system image "trash" in red color and an asset image "icon" in your app. Which code snippet correctly creates both UIImageViews with the right images and colors?

hard

A. let trashView = UIImageView(image: UIImage(systemName: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(systemName: "icon"))

B. let trashView = UIImageView(image: UIImage(systemName: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(named: "icon"))

C. let trashView = UIImageView(image: UIImage(named: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(systemName: "icon"))

D. let trashView = UIImageView(image: UIImage(named: "trash"))
trashView.tintColor = .red
let iconView = UIImageView(image: UIImage(named: "icon"))

Solution

1. Step 1: Load system image "trash" correctly

   Use UIImage(systemName: "trash") for system icon and set tintColor to red.

2. Step 2: Load asset image "icon" correctly

   Use UIImage(named: "icon") for asset image without tintColor.

3. Final Answer:

   let trashView = UIImageView(image: UIImage(systemName: "trash"))\ntrashView.tintColor = .red\nlet iconView = UIImageView(image: UIImage(named: "icon")) -> Option B

4. Quick Check:

   System image + tintColor, asset image with UIImage(named:) = C [OK]

Hint: System images use systemName + tintColor; assets use named without tint [OK]

Common Mistakes:

• Mixing UIImage(named:) and UIImage(systemName:) incorrectly
• Setting tintColor on asset images expecting color change
• Using systemName for asset images