Zenn
🐼

UIKitのViewControllerからSwiftUIのViewを呼び出す

2021/05/03に公開
Swift
Xcode
SwiftUI
#
uikit
tech

利用シーン

基本のプロジェクトはUIKitで動いていて、一部のパーツだけSwiftUIを使いたい時

完成イメージ

SwiftUIで作成したパーツをUIKit側から呼び出して表示する
ボタンをタップするとボタンテキストが変更される

プロジェクトを作成する

UIKitで作成する

SwiftUIでパーツを作成する

import SwiftUI

struct ButtonView: View {
    @State var buttonText = "SwiftUIのView"
    var body: some View {
        Button(action: {
            buttonText = "Tapped"
        })
        {
            Text(buttonText)
                .font(.largeTitle)
                .padding()
                .cornerRadius(4)
                .overlay(
                    RoundedRectangle(cornerRadius: 16)
                        .stroke(Color.blue, lineWidth: 4)
                )
        }
    }
}

struct ButtonView_Previews: PreviewProvider {
    static var previews: some View {
        ButtonView()
    }
}

UIKitのViewControllerから呼び出す

UIHostingControllerはUIViewControllerを継承しているのでこれを使います

import UIKit
import SwiftUI

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let vc: UIHostingController = UIHostingController(rootView: ButtonView())
        view.addSubview(vc.view)
        
        // frameを決めないと表示されない
        vc.view.translatesAutoresizingMaskIntoConstraints = false
        vc.view.heightAnchor.constraint(equalToConstant: 200).isActive = true
        vc.view.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 16).isActive = true
        vc.view.rightAnchor.constraint(equalTo: self.view.rightAnchor, constant: -16).isActive = true
        vc.view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
    }
}

UIHostingControllerについて

Discussion