Integrate SwiftUI View in UIKit
If like me your adventure in iOS developers world start with SwiftUI despite UIKit, here you will find a useful tool to run SwiftUI View in UIKit projects.
Step 1: Create a new single View Project
- Create a xCode project and choose a name
- Set User Interface to storyboard.
Step 2: Add a Container View
- In “Main.storyboard” you will be able to add any kind of component with drag and drop
- Make sure to have defined “View Controller ” and add Container View
Step 3: Resize the portion of container with constraint
- You are able to choose if you need to integrate an entire view or a single part
- By default your container view has an arrow called “Segue” that we will customise
Step 4 : Add UIHostingController
- Delete the previous connection of the segue added by default
- Add from “Library” a “Hosting View Controller”
Step 5: Create a flow with Segue Element
- Connect Container View with Hosting View Controller , for do this you need tap “control” on keyboard and drag it to Hosting Controller
- Use segues to define the flow of your app’s interface
Display the Xcode Assistant Editor for split the display and see the part of code of selected element
Step 7 : Connect with ViewController
- Select the “segue” (arrow) and drag and drop from the storyboard editor to the ViewController.swift file
Step 8: Define your Root View
- After the Segue Action appears you need to specify which one is the Swift UI file you want to use as the UIHosting controller root view
- Import SwiftUI library.
Step 9 : Run the simulator
- Your View will appear on the portion of space defined by your constraint.
Potentially you can add any SwiftUI View calling the right function.
Useful definition
Interface Builder
Use Interface Builder to specify your user interface in terms of:
- Scenes
- Segues between scenes
- Controls used to trigger the segues
A scene represents an onscreen content area. On iPhone and iPod touch, a screen generally contains a single scene. On iPad and Mac, a screen can be composed of more than one scene.
A segue represents the transition from one scene to the next scene, such as when one scene slides over another. You can also create segues between storyboards, enabling you to break up your interface into related scenes.
Container view
Container view controllers are a way to combine the content from multiple view controllers into a single user interface. Container view controllers are most often used to facilitate navigation and to create new user interface types based on existing content. Examples of container view controllers in UIKit include UINavigationController, UITabBarController, and UISplitViewController, all of which facilitate navigation between different parts of your user interface.
UI hosting view controller
UIHostingController creates a bridge between UIKit and SwiftUI framework. It works as a Container View for SwiftUI view, meaning you can use it as normal UIViewController.
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 rootView property. 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.
