UIViewControllerRepresentable

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 Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Using SwiftUI previews for UIKit views

SwiftUI provides wrappers for UIViewController and UIView on iOS. Same wrappers are also available for AppKit views on macOS. Let’s see how to use those wrappers for rendering UIKit views in SwiftUI previews and therefore benefiting from seeing changes immediately. Note that even when a project can’t support SwiftUI views because of the minimum deployment target, then this is still something what can be used when compiling the project with debug settings. Preview related code should only be compiled in debug builds and is never meant to be compiled in release builds. Before we jump in, there are two very useful shortcuts for keeping in mind: option+command+return for toggling previews and option+command+p for refreshing previews.

UIViewControllerRepresentable for wrapping UIViewControllers

UIViewControllerRepresentable is a protocol which can be used for wrapping UIViewController and representing it in SwiftUI. We can add a struct which conforms to that protocol and then creating an instance of the view controller in the makeUIViewController method. Second step is to add another struct which implements PreviewProvider protocol and which is used by Xcode for rendering previews. In simple cases we can get away only with such implementation but in more complex view controllers we would need to set up dependencies and generate example data for the preview. If need to do this, then all that code can be added to the makeUIViewController method.

	import UIKit
	import SwiftUI

	final class ContentViewController: UIViewController {
	override func loadView() {
	self.view = UIView()
	self.view.backgroundColor = .systemBackground
	}

	override func viewDidLoad() {
	super.viewDidLoad()

	let stackView = UIStackView(frame: .zero)
	stackView.translatesAutoresizingMaskIntoConstraints = false
	view.addSubview(stackView)
	NSLayoutConstraint.activate([
	stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 16),
	stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -16),
	stackView.topAnchor.constraint(equalTo: view.topAnchor, constant: 16)
	])

	let label = UILabel(frame: .zero)
	label.translatesAutoresizingMaskIntoConstraints = false
	stackView.addArrangedSubview(label)

	label.textColor = .systemRed
	label.text = "Red text"
	}
	}

	// MARK: SwiftUI Preview

	#if DEBUG
	struct ContentViewControllerContainerView: UIViewControllerRepresentable {
	typealias UIViewControllerType = ContentViewController

	func makeUIViewController(context: Context) -> UIViewControllerType {
	return ContentViewController()
	}

	func updateUIViewController(_ uiViewController: UIViewControllerType, context: Context) {}
	}

	struct ContentViewController_Previews: PreviewProvider {
	static var previews: some View {
	ContentViewControllerContainerView().colorScheme(.light) // or .dark
	}
	}
	#endif

view raw UIViewControllerPreview.swift hosted with ❤ by GitHub

Wrapping UIViewController with UIViewControllerRepresentable.

UIViewRepresentable for wrapping UIViews

UIViewRepresentable follows the same flow. In the example below, we use Group for showing two views with fixed size and different appearances at the same time.

	import SwiftUI
	import UIKit

	final class BackgroundView: UIView {
	override init(frame: CGRect) {
	super.init(frame: .zero)
	backgroundColor = .systemBackground
	layer.cornerRadius = 32
	layer.borderColor = UIColor.systemBlue.cgColor
	layer.borderWidth = 14
	}

	required init?(coder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	}

	// MARK: SwiftUI Preview

	#if DEBUG
	struct BackgroundViewContainer: UIViewRepresentable {
	typealias UIViewType = BackgroundView

	func makeUIView(context: Context) -> UIViewType {
	return BackgroundView(frame: .zero)
	}

	func updateUIView(_ uiView: BackgroundView, context: Context) {}
	}

	struct BackgroundViewContainer_Previews: PreviewProvider {
	static var previews: some View {
	Group {
	BackgroundViewContainer().colorScheme(.light)
	BackgroundViewContainer().colorScheme(.dark)
	}.previewLayout(.fixed(width: 200, height: 200))
	}
	}
	#endif

view raw UIViewPreview.swift hosted with ❤ by GitHub

Wrapping UIView subclass with UIViewRepresentable.

Multiple UIViews shown in SwiftUI preview at the same time.

Summary

We looked into how to wrap view controllers and views for SwiftUI previews. Previews only required a little bit of code and therefore it is something what we can use for improving our workflows when working with UIKit views.

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