Image view (system and asset) in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a UIImageView used for in iOS development?

UIImageView is a view that displays an image in your app's user interface. It can show images from your app assets or system symbols.

beginner

How do you load an image from your app's asset catalog into a UIImageView?

Use UIImage(named: "imageName") to create an image from your assets, then assign it to the UIImageView's image property.

beginner

What is a system image in iOS and how do you use it?

System images are icons provided by Apple through SF Symbols. Use UIImage(systemName: "symbolName") to load them into UIImageView.

intermediate

Why should you use system images (SF Symbols) instead of custom icons when possible?

System images are optimized for different sizes and weights, support dark mode automatically, and keep your app consistent with iOS design.

intermediate

How can you make sure your UIImageView adapts well to different screen sizes?

Use Auto Layout constraints to position and size UIImageView. Also, set contentMode (like .scaleAspectFit) to keep image proportions.

Which initializer loads an image from your app's asset catalog?

A UIImage(named: "imageName")

B UIImage(systemName: "imageName")

C UIImage(contentsOfFile: "imageName")

D UIImage(assetName: "imageName")

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

How do you load a system symbol image into a UIImageView?

A UIImage(named: "symbolName")

B UIImage(assetName: "symbolName")

C UIImage(systemSymbol: "symbolName")

D UIImage(systemName: "symbolName")

UIImage(systemName:) loads SF Symbols, which are Apple's system icons.

What contentMode should you use to keep the image's aspect ratio inside UIImageView?

A .scaleAspectFill

B .scaleAspectFit

C .scaleToFill

D .redraw

.scaleAspectFit scales the image to fit inside the view while keeping its aspect ratio.

Why are SF Symbols recommended for icons in iOS apps?

A They are only available on iOS 12 and earlier

B They are free to customize with any color

C They automatically adapt to different sizes and dark mode

D They require no code to use

SF Symbols adapt to size, weight, and dark mode automatically, ensuring consistent design.

Which property of UIImageView controls how the image fits inside the view?

A contentMode

B clipsToBounds

C image

D tintColor

contentMode defines how the image is scaled or positioned inside the UIImageView.

Explain how to display both a system image and an asset image in UIImageView.

Think about the two different UIImage initializers.

Describe why using Auto Layout and contentMode is important for UIImageView in different screen sizes.

Consider how images look on small and large devices.

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