🎉

SwiftUIでUIViewを表示する

2021/03/07に公開

SwiftUIからUIViewを表示する方法について。以下の画像が実装例です。
WebViewをSwiftUIで表示して、丸くくり抜いてシャドーを表示しています。

SwiftUIでUIView(UIKit)のコントロールを表示するにはUIViewRepresentableを使います。
https://developer.apple.com/documentation/swiftui/uiviewrepresentable

以下はWKWebViewをSwiftUIで表示するカスタムViewの実装です。

struct WebView: UIViewRepresentable {
    let url: String

    func makeUIView(context: Context) -> WKWebView {
        return WKWebView()
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        uiView.load(URLRequest(url: URL(string: url)!))
    }
}

要点は

  • UIViewRepresentableを継承したstructを定義する
  • 必須のプロトコルmakeUIViewupdateUIViewを実装する
  • makeUIViewでUIViewのオブジェクトを生成してreturnする
  • UIViewを更新するタイミングでupdateUIViewが呼ばれるので処理を書く

です。作成したカスタムViewは通常のSwiftUIのViewように使用することができます。

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello, world!")
                .padding()
            WebView(url: "https://github.com/yorifuji")
                .clipShape(Circle())
                .overlay(Circle().stroke(Color.gray, lineWidth: 4))
                .shadow(radius: 7)
                .padding()
        }
    }
}

ViewなのでclipShapeなどをつかって加工することもできます。

Discussion