1
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 と ストーリーボード (パート 3)

Last updated at Posted at 2021-05-13

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

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

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

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

XCodeプロジェクト

新しい__SwiftUI__アプリプロジェクトを作成する
image.png
プロジェクトに名前を付ける
image.png
新しい__SwiftUI__ビューを作成する
image.png
ビューに名前を付ける
image.png
次に、UI要素を挿入して、最初のビューコントローラーにする
image.png
ラベルとボタンを含む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: _)

UIKitViewControllerIBActionで、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」ビューが表示される:
storyboard-swftui-01.png
SwiftUIビューで、テキストフィールドに新しい文章を入力する:
storyboard-swftui-02.png
次に、「Change Text」ボタンをクリックすると、2番目のText要素の「InitialText」が新しい文章に置き換えられる:
storyboard-swftui-03.png
やった!

1
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
1
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?