Image view (system and asset) in iOS Swift - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a system image view with the name "star".

iOS Swift

let imageView = UIImageView(image: UIImage(systemName: "[1]"))

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

Astar

Bcircle

Csquare

Dheart

Attempts:

3 left

💡 Hint

Common Mistakes

Using an asset image name instead of a system image name.

Forgetting to use UIImage(systemName:) initializer.

The system image named "star" is used to create the UIImage.

2fill in blank

medium

Complete the code to load an image named "logo" from the app assets.

iOS Swift

let imageView = UIImageView(image: UIImage(named: "[1]"))

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

Aicon

Blogo

Cprofile

Dbackground

Attempts:

3 left

💡 Hint

Common Mistakes

Using UIImage(systemName:) for asset images.

Misspelling the asset image name.

UIImage(named:) loads images from the app's asset catalog. The image named "logo" is used here.

3fill in blank

hard

Fix the error in the code to display a system image named "heart.fill".

iOS Swift

let imageView = UIImageView(image: UIImage(systemName: "[1]"))

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

Aheart.fill

Bheart

Cheart_fill

DheartFill

Attempts:

3 left

💡 Hint

Common Mistakes

Using underscores or camel case instead of dot notation.

Using the base name "heart" instead of "heart.fill".

The correct system image name for a filled heart is "heart.fill" with a dot, not underscore or camel case.

4fill in blank

hard

Fill both blanks to create an image view with a system image named "bell" and set its content mode to scale aspect fit.

iOS Swift

let imageView = UIImageView(image: UIImage(systemName: "[1]"))
imageView.contentMode = UIView.ContentMode.[2]

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

Abell

BscaleAspectFill

CscaleAspectFit

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using scaleAspectFill which may crop the image.

Using an incorrect system image name.

The system image "bell" is used. The content mode scaleAspectFit makes the image fit inside the view without distortion.

5fill in blank

hard

Fill all three blanks to create an image view with an asset image named "avatar", set its tint color to blue, and enable rendering mode to always template.

iOS Swift

let image = UIImage(named: "[1]")?.withRenderingMode(UIImage.RenderingMode.[2])
let imageView = UIImageView(image: image)
imageView.tintColor = UIColor.[3]

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

Aavatar

BalwaysTemplate

Cblue

DalwaysOriginal

Attempts:

3 left

💡 Hint

Common Mistakes

Using alwaysOriginal rendering mode which ignores tint color.

Not setting the tint color after changing rendering mode.

The asset image "avatar" is loaded. Setting rendering mode to alwaysTemplate allows tintColor to apply. The tint color blue is set on the image view.

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