SwiftUI レイアウト編(3) GADBannerView

⌛️ < 1 min.

テキストとイメージの共存は、うまくいったのが、前回。
今回は、SwiftUI 用に作られていない View を入れ込んでいきます。

今回は、GADBannerViewに代表されるような３rdパーティのViewのSwiftUIでの扱いがポイントになりそう。

Sponsor Link

GADBannerView

GADBannerView は、Google が広告表示用に提供している View です。

もちろん、そのまま組み込もうとしてもエラー。

エラー：”Static method ‘buildBlock’ requires that ‘GADBannerView’ conform to ‘View’”

平たくいうと、GADBannerViewは、Viewプロトコルに沿ってないので、エラーです。

SwiftUI の言う Viewってなに？

SwiftUI の言っている View というのは、Protocolでして、ここにドキュメントがあります。

実は、これまで使ってきたContentViewもViewに沿ってます。

SwiftUIで扱うことができるコンポーネントは、このViewプロトコルに沿っている必要があるます。もちろん、GADBannerViewはViewプロトコルなんてしらないので、エラーになります。

View プロトコルが何を要求しているかというと body という computed property があることです。GADBannerView を組み込んで、View プロトコルに沿う View を自分で作っても良いのですが、
きっと誰かが既に解決しているんではないかと、Google してみました。

見つけたのが、ここです。

ちなみに、Viewプロトコルに沿うためには？

エラーメッセージ的には、Viewプロトコルに沿うように書きなさいと言っているんだけど、それだけでは十分ではないらしい。

よくよくAppleのドキュメントを調べてみると、UIViewControllerRepresentableを使いなさいと書いてありました・・・

上のところでも、ちゃんと読んでみると、きちんと UIViewControllerRepresentable を使っていました。

UIViewControllerRepresentable でラップすると上のstructになるということでした。

上記のAdBannerを使う

仕組みがわかったところで、上記のAdBannerを使ってみました。

使うのは非常に簡単。

コード


var body: some View {
    VStack {
        Image(systemName: "pencil")
        AdBanner(adUnitId: "ca-app-pub-XXXXXXXXXXXXX")
    }
}

エラーもなくきちんと表示できました。

まとめ

VStackを使うことで、UIコンポーネントを垂直方向に並べることができました。
HStackを使うと水平方向に並べることができますし、それぞれを入れ子にすることができるので、いわゆるExcelレイアウト(縦横の方眼に沿う形でのレイアウト)ができることになります。
UIView 系列の View を使うためには、UIViewControllerRepresentable(もしくは UIViewRepresentable)でラップする必要があります。

説明は以上です。