SwiftUISwiftiOS
Last updated at 2023-09-07

Quick UIViewControllerRepresentable for Bridging UIKit to SwiftUI

ClickUp
Note
AI Status
Full
Last Edit By
Last edited time
Sep 7, 2023 02:33 PM
Metatag
Slug
uiviewcontrollerrepresentable-bridge-uikit-swiftui
Writer
Published
Published
Date
Sep 7, 2023
Category
SwiftUI
Swift
iOS
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