Last updated at 2023-09-07

Quick UIViewControllerRepresentable for Bridging UIKit to SwiftUI

AI Status
Last Edit By
Last edited time
Sep 7, 2023 02:33 PM
Sep 7, 2023
UIViewControllerRepresentable in SwiftUI is a powerful bridge that allows you to seamlessly integrate UIKit components into your SwiftUI-based applications. It's incredibly useful when you need to incorporate UIKit-only features, utilize existing UIKit code, or gradually transition to SwiftUI. In this quick guide, we'll walk you through creating a UIViewControllerRepresentable for a common use case: integrating a UIImagePickerController to select photos in your SwiftUI app. We'll provide you with a simplified example and easy-to-copy-paste code.

The Scenario

You want to add an image picker to your SwiftUI app to allow users to select photos from their device's gallery. We'll create a UIViewControllerRepresentable to wrap the UIImagePickerController for this task.

The Code

Here's a straightforward example of how to create a UIViewControllerRepresentable for an image picker:
import SwiftUI import UIKit // Step 1: Create a SwiftUI view representing the UIKit component. struct ImagePicker: UIViewControllerRepresentable { @Binding var selectedImage: UIImage? @Environment(\\.presentationMode) var presentationMode func makeUIViewController(context: Context) -> UIImagePickerController { let picker = UIImagePickerController() picker.delegate = context.coordinator return picker } func updateUIViewController(_ uiViewController: UIImagePickerController, context: Context) { // No updates needed in this example. } func makeCoordinator() -> Coordinator { Coordinator(self) } // Coordinator to handle delegate methods. class Coordinator: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate { var parent: ImagePicker init(_ parent: ImagePicker) { self.parent = parent } func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) { if let image = info[.originalImage] as? UIImage { parent.selectedImage = image } parent.presentationMode.wrappedValue.dismiss() } } } // Step 2: Create a SwiftUI view to demonstrate the usage. struct ContentView: View { @State private var selectedImage: UIImage? = nil @State private var isImagePickerPresented: Bool = false var body: some View { VStack { if let image = selectedImage { Image(uiImage: image) .resizable() .scaledToFit() .frame(width: 200, height: 200) } else { Text("No Image Selected") } Button("Select Image") { isImagePickerPresented.toggle() } .sheet(isPresented: $isImagePickerPresented) { ImagePicker(selectedImage: $selectedImage) } } } } @main struct MyApp: App { var body: some Scene { WindowGroup { ContentView() } } }

How to Use the Code

  1. Copy and paste the provided code into your SwiftUI project.
  1. Customize the appearance and behavior as needed for your app.
  1. Run your SwiftUI app, and you'll have an integrated image picker powered by UIViewControllerRepresentable.
With this quick guide, you can easily bridge UIKit and SwiftUI to enhance your app's capabilities by integrating UIKit components, all while maintaining the benefits of SwiftUI's declarative UI framework.

Discussion (0)

Related Posts