パート 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
を追加する:
import UIKit
import SwiftUI
class UIKitViewController: UIViewController {
@IBAction func toSwiftUI(_ sender: Any) {
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
SwiftUI
ビューを表示するには、UIHostingController
を使用する:
UIHostingController(rootView: _)
UIKitViewController
のIBAction
で、SwiftUIView
を使用してUIHostingController
を初期化し、通常の UIViewController
と同じように使用して、__SwiftUI__ビューを表示する:
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
の内容に変更するためのボタン
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」が新しい文章に置き換えられる:
やった!