SwiftUI 2.0と UIKit と ストーリーボード (パート 3)

パート 3: ストーリーボード

記事は3つの異なる部分に分かれている：

• パート 1: SwiftUI 2.0 と ストーリーボード
• パート 2: SwiftUI 2.0 と UIKit
• パート 3: ストーリーボード と SwiftUI 2.0 (English)

UIKitビューとストーリーボードからSwiftUIビューの使用

このパートは前の2つのパートに反して、レガシーアプリケーションの一部をSwiftUIビューへリファクタリングしたり、または新しいSwiftUIビューを追加したりするのに役立つ。

XCodeプロジェクト

新しいSwiftUIアプリプロジェクトを作成する

プロジェクトに名前を付ける

新しいSwiftUIビューを作成する

ビューに名前を付ける

次に、UI要素を挿入して、最初のビューコントローラーにする

ラベルとボタンを含むUIViewControllerを備えたストーリーボードのプロジェクトができた...

Storyboard UIViewController

ストーリーボードのUIViewControllerには、独自のサブクラスViewControllerがあります

サブクラスの名前を UIKitViewControllerに変更し、ボタンTouchUpInsideイベントにリンクされた IBActionを追加する：

UIKitViewController.swift

import UIKit
import SwiftUI

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

SwiftUIビューを表示するには、UIHostingControllerを使用する：

Swift

UIHostingController(rootView: _)

UIKitViewControllerのIBActionで、SwiftUIViewを使用してUIHostingControllerを初期化し、通常の UIViewControllerと同じように使用して、SwiftUIビューを表示する：

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()
    }
}

それでは、 SwiftUIビューを作成しましょう。

SwiftUI View

SwiftUI Viewは、次の4つの要素で構成されている：
- 「SwiftUI」の文字列を表示するText要素
- labelText変数の内容を表示するText要素
- inputText変数にバインドされたTextField要素
- labelTextの内容を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")
            }
        }
    }
}

それでは、 IBActionをテストしましょう！

アプリ

アプリを起動し、Storyboardビューで「To SwiftUI!」ボタンをクリックして、「SwiftUI」ビューが表示される：

SwiftUIビューで、テキストフィールドに新しい文章を入力する：

次に、「Change Text」ボタンをクリックすると、2番目のText要素の「InitialText」が新しい文章に置き換えられる：

やった！