2020.08.11 2020.08.13

UIViewRepresentableを使ってUIKitのviewをSwiftUI上で扱う

tamappe

SwiftUIでUIKitのviewを使いたい場合の方法

今回はSwiftUIでUIKitのviewを使いたい場合の方法について話します。SwiftUIにはUIKitでいうところのUIxxxx に該当するコンポーネントが存在しません。

そのため、SwiftUIでMapView(MKMapView)やUITextViewやUIVisualEffectViewを使うことができません。

このようなUIKitに存在するコンポーネントをSwiftUIで使えるようにするのが今回のテーマです。

結論からいうと、UIViewRepresentableプロトコルを準拠させれば使えるようになります。

UIViewRepresentableとは

SwiftUIにはUIViewRepresentableプロトコルというものが存在します。このプロトコルを準拠したViewを使うとUIKitのコンポーネントを扱うことができるようになります。

試しに宣言してみます。

struct SampleUIView: UIViewRepresentable {
    func makeUIView(context: Context) -> some UIView {
        <#code#>
    }
    
    func updateUIView(_ uiView: UIViewType, context: Context) {
        <#code#>
    }
}

UIViewRepresentableを準拠させると2つのメソッドを宣言する必要がでてきます。

func makeUIView(context: Context) -> some UIView
func updateUIView(_ uiView: UIViewType, context: Context)

です。

返り値の部分がsome UIViewになっていることが分かります。つまり、UIView を返しています。

試しに背景色を黒色にしたUIViewを作ります。

struct BlackView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIView {
        let view: UIView = UIView()
        view.backgroundColor = UIColor.black
        return view
    }
    
    func updateUIView(_ uiView: UIView, context: Context) {
    }
}

このように使えます。

次にUIKitでエフェクト効果を出すUIVisualEffectViewを使ってみます。

struct BlurView: UIViewRepresentable {
    func makeUIView(context: Context) -> UIVisualEffectView {
        let view = UIVisualEffectView(effect: UIBlurEffect(style: .systemThinMaterial))
        return view
    }
    
    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        
    }
}

こんな感じでUIKitのコンポーネントをSwiftUIで扱えます。

今日はここまでにします。

それでは、バイバイ。

ABOUT ME