How to Use UIHostingController to Show SwiftUI Views in UIKit

With the introduction of SwiftUI in iOS 13, developers have been able to build user interfaces in a new, more declarative way. However, there are still many scenarios where you might want to integrate SwiftUI views with UIKit-based applications. Luckily, Apple has provided a solution to this problem: UIHostingController.

UIHostingController is a UIKit controller that allows you to embed a SwiftUI view within a UIKit-based application. In this article, we will go over how to use UIHostingController to show a SwiftUI view in UIKit.

Step 1: Create a SwiftUI View

First, let's create a simple SwiftUI view that we can use to demonstrate how to show a SwiftUI view in UIKit.

Copycopy code to clipboard
1import SwiftUI
2
3struct MySwiftUIView: View {
4    var body: some View {
5        Text("Hello, World!")
6    }
7}

This is a very simple view that just displays the text "Hello, World!". Of course, your SwiftUI view can be much more complex than this.

Step 2: Create a UIHostingController

Next, we need to create a UIHostingController that will contain our SwiftUI view. We can do this by subclassing UIHostingController and setting the rootView property to an instance of our SwiftUI view.

Copycopy code to clipboard
1import SwiftUI
2
3class MyHostingController: UIHostingController<MySwiftUIView> {
4    required init?(coder aDecoder: NSCoder) {
5        super.init(coder: aDecoder, rootView: MySwiftUIView())
6    }
7}

In this example, we have created a subclass of UIHostingController called MyHostingController. We have set the rootView property to an instance of MySwiftUIView.

The init?(coder:) initializer is required because we are subclassing a UIKit controller. We call the superclass initializer with the coder parameter and pass our rootView instance as the second parameter.

Step 3: Display the UIHostingController

Now that we have created our UIHostingController, we can display it in our UIKit-based application. We can do this by creating an instance of MyHostingController and adding it as a child view controller.

Copycopy code to clipboard
1let hostingController = MyHostingController()
2addChild(hostingController)
3view.addSubview(hostingController.view)
4hostingController.view.frame = view.bounds
5hostingController.didMove(toParent: self)

In this example, we create an instance of MyHostingController and add it as a child view controller using the addChild(:) method. We then add the hostingController's view to the view hierarchy using addSubview(:) and set its frame to the bounds of the view.

Finally, we call the didMove(toParent:) method to notify the hostingController that it has been added to the view controller hierarchy.

And that's it! We have successfully shown a SwiftUI view in UIKit using UIHostingController.

Conclusion

In this article, we went over how to use UIHostingController to show a SwiftUI view in UIKit. First, we created a simple SwiftUI view, then we created a subclass of UIHostingController and set the rootView property to an instance of our SwiftUI view. Finally, we displayed the UIHostingController in our UIKit-based application by adding it as a child view controller and adding its view to the view hierarchy.

By using UIHostingController, we can easily integrate SwiftUI views with our existing UIKit-based applications. This allows us to take advantage of the declarative syntax of SwiftUI while still being able to leverage the power of UIKit.