はじめに
SwiftでiOSアプリにAdMob広告を貼り付ける際に、いろいろなサイトを見て一番良さそうな座標とサイズの書き方を調べました。
しかし、私が考える一番良い書き方をしているサイトがなかったので、これを他の人にもおすすめしたく、今回は備忘録としてここにまとめることにしました。
参考にする際は、自己責任にてお願いします。
分からない点については、コメントやTwitter:@guilty0546からお気軽にご質問ください。
コードはGitHubにあります。
ダウンロードして使うより、コピペして使うことをおすすめします。
https://github.com/Guilty0546/AdMobPosition
環境（2018年10月15日現在）
PC : MacBookPro Early 2015
OS : macOS Mojave バージョン10.14
Swift : 4.2
Xcode : Version 10.0
Simulator : iPhone7 - 12.0, iPhoneXS - 12.0
コード
今回はCGRect, CGPoint, CGSize, NSLayoutConstraint, NSLayoutAnchorを使って書いていきます。
広告はセーフエリア下部に貼り付けます。
多少書き換えればセーフエリア上部等に貼り付けることもできます。
なお、コードの前には
adMobBannerView = GADBannerView(adSize: kGADAdSizeBanner)
を実行してあることとします。
また、お詫びしなくてはならないのですが、スクリーンショットにlabel, Button, Bar Buttonが配置してあります。
しかし、広告を貼り付けることとは無関係ですので、お気になさらないように。
① CGRectを使って書くと、こうなります。
adMobBannerView.frame = CGRect(x: 0, y: view.frame.height - adMobBannerView.frame.height - UIApplication.shared.keyWindow!.safeAreaInsets.bottom, width: view.frame.width, height: adMobBannerView.frame.height)
見栄えはこうなります。
iPhone7
iPhoneXs
② CGRectを使ってこう書くこともできます。
adMobBannerView.frame = CGRect(x: (view.frame.width - adMobBannerView.frame.width - UIApplication.shared.keyWindow!.safeAreaInsets.left - UIApplication.shared.keyWindow!.safeAreaInsets.right) / 2, y: view.frame.height - adMobBannerView.frame.height - UIApplication.shared.keyWindow!.safeAreaInsets.bottom, width: adMobBannerView.frame.width, height: adMobBannerView.frame.height)
見栄えはこうなります。
iPhone7
iPhoneXs
③ CGPointとCGSizeを使って書くと、こうなります。
adMobBannerView.frame.origin = CGPoint(x: 0, y: view.frame.height - adMobBannerView.frame.height - UIApplication.shared.keyWindow!.safeAreaInsets.bottom)
adMobBannerView.frame.size = CGSize(width: view.frame.width, height: adMobBannerView.frame.height)
見栄えはこうなります。
iPhone7
iPhoneXs
④ CGPointだけを使ってこう書くこともできます。
adMobBannerView.frame.origin = CGPoint(x: (view.frame.size.width - adMobBannerView.frame.size.width - UIApplication.shared.keyWindow!.safeAreaInsets.left - UIApplication.shared.keyWindow!.safeAreaInsets.right) / 2, y: view.frame.size.height - adMobBannerView.frame.height - UIApplication.shared.keyWindow!.safeAreaInsets.bottom)
// これ↓は書かずに省略できます。もちろん、見やすくするために書いても構いません。動作は同じはずですので。
// adMobBannerView.frame.size = CGSize(adMobBannerView.frame.width, adMobBannerView.frame.height)
見栄えはこうなります。
iPhone7
iPhoneXs
⑤, ⑥については、view.addSubview(adMobBannerView)のあとに書きます。
そして、AutoLayoutを使用するので、view.addSubview(adMobBannerView)の前にadMobBannerView.translatesAutoresizingMaskIntoConstraints = falseを書きます。
私はこれを書き忘れたため、うまく動作せず手こずりました。
コードは、
adMobBannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(adMobBannerView)
// ここから下に⑤, ⑥を書く。
のようになります。
⑤ NSLayoutConstraintを使って書くと、こうなります。
view.addConstraints(
[NSLayoutConstraint(
item: adMobBannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(
item: adMobBannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
]
)
見栄えはこうなります。
iPhone7
iPhoneXs
⑥ NSLayoutAnchorを使って書くと、こうなります。
adMobBannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
adMobBannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
見栄えはこうなります。
iPhone7
iPhoneXs
まとめ
広告の幅を画面の幅いっぱいにすると、てっきり引き伸ばされてしまうのかと思います。
しかし、そんなことはなく、両端の余白部分は黒で塗りつぶされていました。
つまり、この両端の余白が白がいいか黒がいいかでコードも変わってきます。
両端の余白を黒にしたいとき、白にしたいときは見栄えを参考に①〜⑥から選べば良さそうです。
また、広告の幅を変えずにAutoLayoutを使うと否応なしに両端の余白が白になります。
（広告の幅を変えればもちろん黒にもできますが、せっかく見やすくするためにAutoLayoutを使っているのに、広告の幅を変えるためにコードを追加するのはどうかと思いますが。）
では、両端の余白を白にするとき、AutoLayoutは使っても使わなくてもどちらでもいいのでしょうか。
答えはNOです。
AutoLayoutは動作が少し重いので、見やすいという理由でばんばん使うわけにはいきません。
しかし、今回の場合は広告を一つ貼り付けるだけなので、体感できるほど動作速度が変わることはないかと思います。
もし、今後AutoLayoutを使って多くのオブジェクトをviewに貼り付ける場合、AutoLayoutは使わない方が良いかもしれません。
コードの見栄えを優先するか、動作速度を優先するか、ここらへんはトレードオフの問題ですね。
今後iPhone7, 8, X, XS, XR等のCPUの速いiPhoneを使う人が増えることを見越してAutoLayoutを使うのもありかもしれません。
一概にはいえませんが。
ちなみに、私は広告は⑥のNSLayoutAnchorを使う予定です。
両端の余白を黒にするのも捨てがたい...。
さいごに
読んでいただき、ありがとうございました。
Twitterでフォローしてくれると嬉しいです。
参考元
広告の貼り付け方及びAutoLayoutについて
https://i-app-tec.com/ios/admob.html
http://marimoko3.hatenablog.com/entry/2018/03/03/195712
http://boostnote.hatenablog.com/entry/2017/12/12/171657
http://marimoko3.hatenablog.com/entry/2018/03/16/131555
セーフエリアについて
https://i-app-tec.com/ios/iphone-safearea.html
https://www.yaz.co.jp/tec-blog/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%87%E3%83%90%E3%82%A4%E3%82%B9/638
https://qiita.com/hituziando/items/e5873b5bfa42247071e6
AutoLayoutについて
https://qiita.com/nakau1/items/192e8054b966fc6fc79b
https://qiita.com/yucovin/items/4bebcc7a8b1088b374c9
https://qiita.com/bonegollira/items/5c973206b82f6c4d55ea
https://www.youtube.com/watch?v=9RydRg0ZKaI&t=1131s