Camera and photo library in iOS Swift - UI Render Trace

Component - Camera and photo library

This UI component allows users to take a photo using the device camera or select an existing photo from the photo library. It shows the chosen image on the screen.

Widget Tree

UIViewController
├── UIButton (Take Photo)
├── UIButton (Choose from Library)
└── UIImageView

The main screen is a UIViewController containing two buttons stacked vertically: one to open the camera and one to open the photo library. Below the buttons is an image view that displays the selected or captured photo.

Render Trace - 4 Steps

Step 1: UIViewController

Step 2: UIButton (Take Photo)

Step 3: UIButton (Choose from Library)

Step 4: UIImageView

State Change - Re-render

Trigger:User taps 'Take Photo' button and captures a photo

Before

UIImageView shows no image

→

After

UIImageView displays the newly taken photo

Re-renders:UIImageView updates to show the new image

UI Quiz - 3 Questions

What happens when the user taps the 'Take Photo' button?

A The photo library opens to select an existing photo

B The app closes

C The camera interface opens to take a new photo

D Nothing happens

Key Insight

Using separate buttons for camera and photo library access keeps the interface simple and clear. Displaying the chosen image immediately helps users confirm their selection. Always handle permissions for camera and photo library access gracefully.

Practice

1. What is the purpose of setting sourceType to .camera in UIImagePickerController?

easy

A. To select an existing photo from the photo library

B. To record a video using the device camera

C. To allow the user to take a new photo using the device camera

D. To open the device settings

Solution

1. Step 1: Understand sourceType usage

   The sourceType property of UIImagePickerController defines where the image will come from.

2. Step 2: Identify the effect of .camera

   Setting sourceType to .camera opens the device camera to take a new photo.

3. Final Answer:

   To allow the user to take a new photo using the device camera -> Option C

4. Quick Check:

   sourceType = .camera means take new photo [OK]

Hint: Camera sourceType means take a new photo [OK]

Common Mistakes:

• Confusing .camera with .photoLibrary
• Thinking .camera records video by default
• Assuming .camera opens settings

2. Which of the following is the correct way to declare a UIImagePickerController and set its delegate in Swift?

easy

A. var picker = UIImagePickerController()
picker.delegate = self()

B. let picker = UIImagePickerController()
picker.delegate = self

C. let picker = UIImagePickerController
picker.delegate = self()

D. var picker = UIImagePickerController
picker.delegate = self

Solution

1. Step 1: Correct initialization syntax

   In Swift, UIImagePickerController() requires parentheses to create an instance.

2. Step 2: Assign delegate properly

   The delegate is assigned as self without parentheses because it is a property, not a function call.

3. Final Answer:

   let picker = UIImagePickerController() picker.delegate = self -> Option B

4. Quick Check:

   Initialize with () and assign delegate without () [OK]

Hint: Use parentheses for init, no parentheses for delegate [OK]

Common Mistakes:

• Forgetting parentheses when creating UIImagePickerController
• Using parentheses when assigning delegate
• Declaring picker without parentheses

3. Given the following code snippet, what will be printed when a user selects a photo from the library?

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    if let image = info[.originalImage] as? UIImage {
        print("Image selected")
    } else {
        print("No image found")
    }
}

medium

A. Nothing is printed

B. No image found

C. Compilation error

D. Image selected

Solution

1. Step 1: Check the delegate method behavior

   The method imagePickerController(_:didFinishPickingMediaWithInfo:) is called after user picks a photo.

2. Step 2: Understand the info dictionary

   The info dictionary contains the key .originalImage with the selected UIImage if successful.

3. Final Answer:

   Image selected -> Option D

4. Quick Check:

   Image exists in info dictionary after selection [OK]

Hint: If image exists in info, print "Image selected" [OK]

Common Mistakes:

• Assuming image is nil after selection
• Confusing delegate method names
• Not casting info dictionary value properly

4. What is the error in the following Swift code that prevents the image picker from working correctly?

let picker = UIImagePickerController()
picker.sourceType = .camera
picker.delegate = self
present(picker, animated: true)

medium

A. Missing UIImagePickerControllerDelegate and UINavigationControllerDelegate conformance

B. Incorrect sourceType value

C. Delegate should be assigned after presenting picker

D. Cannot present picker without a navigation controller

Solution

1. Step 1: Check delegate conformance requirements

   To use UIImagePickerController delegate methods, the class must conform to UIImagePickerControllerDelegate and UINavigationControllerDelegate.

2. Step 2: Identify missing conformance

   If the class does not conform, delegate methods won't be called and picker won't work properly.

3. Final Answer:

   Missing UIImagePickerControllerDelegate and UINavigationControllerDelegate conformance -> Option A

4. Quick Check:

   Delegate protocols must be adopted for picker to work [OK]

Hint: Always conform to both delegate protocols [OK]

Common Mistakes:

• Forgetting to add delegate protocols to class
• Assigning delegate after presenting picker
• Using wrong sourceType value

5. You want to allow users to either take a new photo or pick one from their library. Which approach correctly handles both options in Swift?

hard

A. Set sourceType dynamically based on user choice, then present a single UIImagePickerController

B. Use sourceType = .savedPhotosAlbum to cover both camera and library

C. Create two UIImagePickerController instances, one with .camera and one with .photoLibrary, and present both simultaneously

D. Use UIImagePickerController only for camera and a custom UI for photo library

Solution

1. Step 1: Understand sourceType flexibility

   A single UIImagePickerController can have its sourceType set to either .camera or .photoLibrary before presenting.

2. Step 2: Handle user choice before presenting picker

   Based on user selection, set the sourceType dynamically and present the picker once.

3. Final Answer:

   Set sourceType dynamically based on user choice, then present a single UIImagePickerController -> Option A

4. Quick Check:

   One picker, sourceType changes per user choice [OK]

Hint: Use one picker, change sourceType before presenting [OK]

Common Mistakes:

• Trying to present two pickers at once
• Using savedPhotosAlbum to cover camera
• Mixing custom UI unnecessarily