0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SwiftUI 2.0 & UIKit & Storyboard (Part 3)

Last updated at Posted at 2021-05-13

Part 3: Storyboard & SwiftUI 2.0

The article is broken in three different parts:

The third part is about using SwiftUI 2.0 elements in a Storyboard application.

Use SwiftUI views from UIKit views and the Storyboard

This is the opposite of the 2 previous section, and is useful to add new views to a legacy application or refactor parts of a legacy application using SwiftUI.

The XCode Project

Create a new SwiftUI App project
image.png
Name the project
image.png
Create a new SwiftUI View
image.png
Name it
image.png
Then populate it with UI elements and make it the initial view controller
image.png
Now we have a Storyboard project containing a storyboard with a UIViewController that contains a label and a button ...

The Storyboard UIViewController

The UIViewController in the storyboard has its own subclass ViewController.

Rename the subclass to UIKitViewController and add an IBAction linked to the button TouchUpInside event:

UIKitViewController.swift
import UIKit
import SwiftUI

class UIKitViewController: UIViewController {
    @IBAction func toSwiftUI(_ sender: Any) {
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

To display the SwiftUI view, use a UIHostingController:

Swift
UIHostingController(rootView: _)

In the IBAction of the UIKitViewController, init a UIHostingController with SwiftUIView, then use it just like a normal UIViewController to present the SwiftUI view:

UIKitViewController.swift
import UIKit
import SwiftUI

class UIKitViewController: UIViewController {
    @IBAction func toSwiftUI(_ sender: Any) {
        let view = UIHostingController(rootView: SwiftUIView())
        self.present(view, animated: true, completion: nil)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

Now let's write the SwiftUI view.

The SwiftUI View

The SwiftUI View is composed of 4 elements:

  • A Text element displaying the text "SwiftUI"
  • A Text element displaying the content of the labelText variable
  • A TextField element binded to the inputText variable
  • A button to change the content of labelText to the content of inputText
SwiftUIView.swift
import SwiftUI

struct SwiftUIView: View {
    @State var labelText = "Initial Text"
    @State var inputText = ""
    
    var body: some View {
        VStack {
            Text("SwiftUI")
            Spacer()
            Text(labelText)
            Spacer()
            TextField("Input", text: $inputText)
            Spacer()
            Button {
                labelText = inputText
                inputText = ""
            } label: {
                Text("Change Text")
            }
        }
    }
}

Now let's test the IBAction!

The App

Launch the App, and in the Storyboard view, click on the To SwiftUI! button to present the SwiftUI view:
storyboard-swftui-01.png
In the SwiftUI view input some new text in the textfield:
storyboard-swftui-02.png
Then, click on the Change Text button, and the "Initial Text" in the second Text element gets replaced with the new text:
storyboard-swftui-03.png
It works!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?