🎉
SwiftUIでUIViewを表示する
SwiftUIからUIViewを表示する方法について。以下の画像が実装例です。
WebViewをSwiftUIで表示して、丸くくり抜いてシャドーを表示しています。
SwiftUIでUIView(UIKit)のコントロールを表示するには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を定義する - 必須のプロトコル
makeUIView
、updateUIView
を実装する -
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