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.