How to use Swift UI with StoryBoard

After introducing Swift UI, Many iOS developers are ready to learn and use Swift UI. Unfortunately some may not allowed to use Swift UI. But iOS always there to support in all ways for developers. Here i will explain how to use Swift UI along with story boards.

UIHostingController

From Apple’s developer documentation

Create a UIHostingController object when you want to integrate SwiftUI views into a UIKit view hierarchy. At creation time, specify the SwiftUI view you want to use as the root view for this view controller; you can change that view later using the rootViewproperty. Use the hosting controller like you would any other view controller, by presenting it or embedding it as a child view controller in your interface.

Well read the above paragraph doesn’t mean anything. I will explain what is UIHostingController upto my understanding level.

UIHostingController is the viewController that can able to manage Swift UI view along with storyboard. You can use Swift UI view host in this viewController.

How to use UIHostingController

  1. Drag and drop hosting view controller from widget list to existing storyboard.

2. The storyboard look like below. I had connect a button segue with hosting view Controller.

3. Assign viewController class file to the controller. In my case i had created SwiftUIViewController.Swift.

import UIKit
import SwiftUI

class SwiftUIViewController: UIHostingController<SecondView> { override func viewDidLoad() {
super.viewDidLoad()
}
}

4. Adding instance to the inheritance of UIHostingController requires init. And init will be added along in the SwiftUIViewController class.

required init?(coder: NSCoder) {
super.init(coder: coder,rootView: SecondView());
}

5. We need a Content view for Swift UI. So i add some Vstack with two text and one image. Here is the struct for view. The view mentioned in above SecondView is here.

struct SecondView: View {
var body: some View {
VStack {
Text("Second View").font(.system(size: 36))
Text("Loaded by SecondView").font(.system(size: 14))
Image("Rain")
}
}
}

6. Final class look like below:

SwiftUIViewController.Swift

import Foundation
import UIKit
import SwiftUI
struct SecondView: View {
var body: some View {
VStack {
Text("Second View").font(.system(size: 36))
Text("Loaded by SecondView").font(.system(size: 14))
Image("Rain")
}
}
}
class SwiftUIViewController: UIHostingController<SecondView> {
required init?(coder: NSCoder) {
super.init(coder: coder,rootView: SecondView());
}
override func viewDidLoad() {
super.viewDidLoad()
}
}

7. And now initial default ViewController.swift looks as usual.

import UIKitclass ViewController: UIViewController {override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
}

8. The stroyboad for both looks like below

9. The final output in device is

For further queries regarding above implementation feel free to comment below. Follow me for more rare and unique updates on iOS.

HAPPY CODING!🧡

Passionate iOS developer chasing my dreams toward success