【SwiftUI】SwiftUIでUIKitを使う #Xcode

はじめに

基本的にSwiftUIを中心にいじっているのですが、
たまにUIKitの部品を使うことがあるので、使い方を備忘録として残します。

環境

Swift: version 5.6
Xcode: Version 13.3.1 (13E500a)
macOS: 12.3.1 (21E258)

使い方

1. UIViewRepresentableプロトコルを適合させる

SwiftUIのUI部品は構造体で定義されていますが、UIKitのUI部品はクラスで定義されています。
そのため、型が異なるのでそのままでは使用できません。
SwiftUIでUIKitのUI部品を使うためには、UIViewRepresentableプロトコルを利用します。

UIKitLabel.swift

import SwiftUI

struct UIKitLabel: UIViewRepresentable { //UIViewRepresentableに適合
}

UIViewReporesentableプロトコルとは？

UIKitやMapKitなどのViewをSwiftUIのViewとして使うためのラッパーです。
makeUIView(context:)とupdateUIViewを実装する必要があります。

2. makeUIView(context:)メソッドを実装する

続いて、必須メソッドの1つであるmakeUIView(context:)メソッドを実装します。

UIKitLabel.swift

import SwiftUI

struct UIKitLabel: UIViewRepresentable {
    //表示するViewを作成するときに実行
    func makeUIView(context: Context) -> UILabel {
        print("makeUIView") //後で動作確認する用
        let uiLabel = UILabel()
        return uiLabel
    }
}

makeUIView(context)メソッドとは？

UIViewRepresentableプロトコルの必須メソッドの1つ。
UIKitのUI部品を生成するメソッドで、画面が描写される前に一度だけ実行されます。
今回はUILabelを使用しました。

3. updateUIView(_:)メソッドを実装する。

同様に、必須メソッドのupdateUIView(_:)を実装していきます。

UIKitLabel.swift

import SwiftUI

struct UIKitLabel: UIViewRepresentable {
    var text: String

    /*省略*/

    //表示したViewが更新するたびに実行
    func updateUIView(_ uiView: UILabel, context: Context) {
        print("updateUIView")
        uiView.text = text //引数で受け取ったtextをセット
    }
}

updateUIView(_:)メソッドとは？

UIViewRepresentableプロトコルの必須メソッドの1つ。
makeUIView(context)で生成したViewを更新するメソッドです。

以上で使えるようになりました。

動作確認

さきほど作ったUIKitLabelViewを使ってみます。

ContentView.swift

import SwiftUI

struct ContentView: View {
    @State var text = ""
    var body: some View {
        VStack {
            Text("▼ UILabel ▼")
            UIKitLabel(text: text) //通常のSwiftUIのUI部品と同様に使える。
                .frame(height: 50)
                .border(Color.gray)
            Text("▼ TextField ▼")
            TextField("テキストを入力", text: $text)
                .padding(5)
                .border(Color.gray)
        }
        .padding()
    }
}

シミュレータで実行してみます。

起動直後のコンソールを確認してみると、
makeUIView(context)とupdateUIView(_:)が実行されているのが分かります。

テキストフィールドに文字を入力します。

文字入力の度にViewが更新され、updateUIView(_:)が実行されているのが分かります。