SwiftUI レイアウト編(3) GADBannerView

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

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

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を使ってみました。

使うのは非常に簡単。

コード

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

まとめ

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

説明は以上です。




1 COMMENT

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です