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で扱えます。
今日はここまでにします。
それでは、バイバイ。