How to use SwiftUI as UIView in Storyboard

You can easily support sarunw.com by checking out this sponsor.

Note Taking:Quickly take note using Voice, Camera, or Typing

Try it for Free

How to use SwiftUI View as UIView in Storyboard

We can use SwiftUI view as UIViewController by wrapping it in UIHostingController. We learn this in How to use SwiftUI as UIViewController in Storyboard.

The bad news is we don't have an equivalent UIHostingView or any class that we can wrap SwiftUI view into a UIView.

Luckily, Storyboard provides an easy way we can embed a view from one view controller to another view controller via a Container View.

Adding a container view requires six steps.

1. Add a Container View to the Storyboard.
2. Remove a default embed view controller.
3. Add a UIHostingController in the Storyboard.
4. Embed a UIHostingController in the container view.
5. Create a segue outlet.
6. Implement the IBSegueAction.

As an example, I will add a SwiftUI view at the center of a UIViewController.

Add a Container to the Storyboard

Open the Library either by

• View Menu > Show Library.
• ⇧ - shift + ⌘ - command + L
• Or Clicking on the + button in the top right corner.

You will see a Library window popping up.

Then, search for "Container View" and drag and drop it to the Storyboard.

Remove a default embed view controller

By adding a Container View, Storyboard will create a default view controller for us.

Since we want to use SwiftUI view here, we need to swap the placeholder view controller with a UIHostingController.

To Delete the default view controller.

1. Select an embed view controller.

Add a UIHostingController to the Storyboard

Add a UIHostingController to the Storyboard by

1. Open the Library.
2. Search for UIHostingController.
3. Drag and drop to the Storyboard.

Embed a UIHostingController in the container view

To assign the UIHostingController as a view controller for the Container View, you need to do the following steps.

1. Hold down the Control key
2. Click on the Container View and drag to the UIHostingController.
3. Select "Embed" Segue.

Create a segue outlet

Storyboard use @IBSegueAction as a bridge between Storyboard and the code.

Here are the steps to create @IBSegueAction.

1. Open the Storyboard.
2. Open "Assistant editor" from Editor Menu > Assistant. This will open the Storyboard and Code editor side-by-side.
3. Select the "Embed" Segue we created in the last section.
4. Hold down the Control key and drag to the code editor.
5. Enter the name of your segue. I named it embedSwiftUIView.

Implement the IBSegueAction

In the @IBSegueAction, we return a view controller that will be used as a embed view for the Container View.

This is where we create and return our SwiftUI view.

import UIKit
import SwiftUI

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
    @IBSegueAction func embedSwiftUIView(_ coder: NSCoder) -> UIViewController? {
        return UIHostingController(coder: coder, rootView: SwiftUIView())
    }
}

We need to use UIHostingController's initializer that accepts coder here, init(coder:rootView:).

This is what we get.