Embedding SwiftUI in UIKit

When developing iOS applications, developers often face the challenge of integrating new technologies with existing frameworks. One such challenge is embedding SwiftUI views within a UIKit application. SwiftUI, introduced by Apple in 2019, offers a modern, declarative way to build user interfaces across all Apple platforms, but many developers still maintain applications built with UIKit. Fortunately, Apple has provided a seamless way to integrate SwiftUI views into UIKit applications, allowing developers to leverage the best of both worlds.

To embed a SwiftUI view in a UIKit application, the primary tool is the UIHostingController. This controller acts as a bridge between SwiftUI and UIKit, allowing SwiftUI views to be displayed within a UIKit view hierarchy. Here’s how you can use it:

Creating a SwiftUI View

First, you need to create a SwiftUI view that you want to embed. For example, let’s create a simple SwiftUI view:

import SwiftUI

struct SimpleView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .font(.largeTitle)
            .padding()
    }
}

This view displays a simple text message with a large font size and some padding.

Embedding the SwiftUI View in UIKit

To embed this SwiftUI view in a UIKit application, you’ll use UIHostingController. Here’s how you can do it in a typical UIKit view controller:

import UIKit
import SwiftUI

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Create an instance of the SwiftUI view
        let swiftUIView = SimpleView()

        // Create a UIHostingController with the SwiftUI view
        let hostingController = UIHostingController(rootView: swiftUIView)

        // Add the hosting controller as a child view controller
        addChild(hostingController)

        // Add the SwiftUI view to the view hierarchy
        view.addSubview(hostingController.view)

        // Configure the SwiftUI view’s frame and constraints
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            hostingController.view.topAnchor.constraint(equalTo: view.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        // Notify the hosting controller
        hostingController.didMove(toParent: self)
    }
}

In this example, a UIHostingController is created with the SimpleView SwiftUI view as its root view. The hosting controller is added as a child view controller to the ViewController, and its view is added to the view hierarchy. Constraints are set up to ensure the SwiftUI view takes up the entire screen.

Handling Data and Interaction

One of the advantages of using SwiftUI is its data-binding capabilities. When embedding SwiftUI in UIKit, you can still leverage these features. For instance, you can pass data from UIKit to SwiftUI using @State, @Binding, or @ObservedObject properties.

class ViewController: UIViewController {
    // Example of a data model
    @ObservedObject var model = MyDataModel()

    override func viewDidLoad() {
        super.viewDidLoad()

        let swiftUIView = SimpleView(dataModel: model)
        let hostingController = UIHostingController(rootView: swiftUIView)
        addChild(hostingController)
        view.addSubview(hostingController.view)

        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            hostingController.view.topAnchor.constraint(equalTo: view.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])

        hostingController.didMove(toParent: self)
    }
}

In this example, MyDataModel is an observable object that can be passed to the SwiftUI view. Any changes in the data model will automatically update the SwiftUI view, maintaining the reactive nature of SwiftUI.

Conclusion

By embedding SwiftUI views in UIKit applications, developers can gradually adopt SwiftUI’s modern UI framework without needing to rewrite entire applications. The UIHostingController provides a straightforward and efficient way to integrate SwiftUI into existing UIKit applications, allowing developers to take advantage of SwiftUI’s powerful features while maintaining their existing codebase.