Using an image picker in SwiftUI

Lots of apps need to deal with selecting or taking photos but in SwiftUI we’ll need to wrap UIKit’s UIImagePickerController with a SwiftUI view.

Example application presenting a UI for opening image picker.

Wrapping UIImagePickerController in SwiftUI

UIImagePickerController has been available since iOS 2 and it supports both selecting photos from photo albums and taking new photos with a camera. If we would like to use an image picker in a SwiftUI view then the first step is wrapping this view controller with a SwiftUI view. UIViewControllerRepresentable protocol defines required methods for representing an UIViewController. We’ll provide a completion handler for passing back the selected image. We need to implement a coordinator which acts as a delegate for the UIImagePickerController. When the imagePickerController(_:didFinishPickingMediaWithInfo:) delegate method is called, then we can call the completion handler and handle the selected image in a SwiftUI view. As UIImagePickerController supports both the camera function and accessing existing photos, we’ll add a source type property for configuring which mode to use.

struct ImagePicker: UIViewControllerRepresentable {
typealias UIViewControllerType = UIImagePickerController
typealias SourceType = UIImagePickerController.SourceType
let sourceType: SourceType
let completionHandler: (UIImage?) -> Void
func makeUIViewController(context: Context) -> UIImagePickerController {
let viewController = UIImagePickerController()
viewController.delegate = context.coordinator
viewController.sourceType = sourceType
return viewController
}
func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) {}
func makeCoordinator() -> Coordinator {
return Coordinator(completionHandler: completionHandler)
}
final class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
let completionHandler: (UIImage?) -> Void
init(completionHandler: @escaping (UIImage?) -> Void) {
self.completionHandler = completionHandler
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey: Any]) {
let image: UIImage? = {
if let image = info[.editedImage] as? UIImage {
return image
}
return info[.originalImage] as? UIImage
}()
completionHandler(image)
}
func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
completionHandler(nil)
}
}
}
view raw ImagePicker.swift hosted with ❤ by GitHub
ImagePicker view which wraps UIImagePickerController.

The ImagePicker can then be presented with the fullScreenCover view modifier. The presented state and the selected image is stored in the view’s view model. When the image picker is displayed and an image is selected, the completion handler is called and the selectedImage property is updated in the view model which in turn reloads the SwiftUI view.

var body: some View {
VStack(spacing: 32) {
imageView(for: viewModel.selectedImage)
controlBar()
}
.fullScreenCover(isPresented: $viewModel.isPresentingImagePicker, content: {
ImagePicker(sourceType: viewModel.sourceType, completionHandler: viewModel.didSelectImage)
})
}
view raw ContentView.swift hosted with ❤ by GitHub
Presenting the ImagePicker in full screen sheet.
extension ContentView {
final class ViewModel: ObservableObject {
@Published var selectedImage: UIImage?
@Published var isPresentingImagePicker = false
private(set) var sourceType: ImagePicker.SourceType = .camera
func choosePhoto() {
sourceType = .photoLibrary
isPresentingImagePicker = true
}
func takePhoto() {
sourceType = .camera
isPresentingImagePicker = true
}
func didSelectImage(_ image: UIImage?) {
selectedImage = image
isPresentingImagePicker = false
}
}
}
view raw ContentView.swift hosted with ❤ by GitHub
A SwiftUI view containing an image preview and buttons for taking or choosing a photo.

Summary

Wrapping UIKit views with a SwiftUI view is fairly simple. The coordinator object is a perfect fit for handling delegate methods which UIKit views often provide. As we saw, adding a SwiftUI compatible image picker was pretty easy to do. Please check the full example project on GitHub.

If this was helpful, please let me know onĀ Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Project

SwiftUIImagePicker (Xcode 12.2)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s