【Swift】UITabbarの上にAdmobBannerViewなどのViewを配置する方法

iOS版のTwitMorseを開発していて、Admobの実装を行いました。
UITabbarの上にバナー広告を載せたかったのですが、その方法が分からず、適当に値を変更したらできたのでそのシェア。

やりたいこと:タブバーの上にバナー広告などのViewを配置する

tabbarの上にAdmobBannerViewを配置する

これがやりたい

実装

StoryBoardでやる方法は分からなかったのでプログラムからViewの配置を行います。
下記はUITabBarControllerを継承したTabBarControllerです。

TabbarController.swift

import Foundation
import UIKit
import JJFloatingActionButton
import GoogleMobileAds

class TabBarController: UITabBarController, GADBannerViewDelegate {
    var userId: String?

    let actionButton = JJFloatingActionButton()

    var bannerView = GADBannerView()

    override func viewDidLoad() {
        // hide navibar
        navigationItem.hidesBackButton = true

        // GADBannerView
        bannerView = GADBannerView(adSize: kGADAdSizeBanner)
        addBannerViewToView(bannerView)
        bannerView.adUnitID = "ca-app-pub-**************************"
        bannerView.rootViewController = self
        bannerView.load(GADRequest())
        bannerView.delegate = self
        //以下略
        bannerView.sendSubviewToBack(actionButton) // ViewをactionButtonより後ろへ
    }

    func addBannerViewToView(_ bannerView: GADBannerView) {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(bannerView)
        view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .bottom,
                                relatedBy: .equal,
                                toItem: self.tabBar, // POINT:何に対しての制約か
                                attribute: .top,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
        ])
    }
}

ポイントはtoItem:に渡す引数

プログラム上でAdmobViewをセットする場合、レイアウト制約を書くのですがその中でtoItemというプロパティがいますので、「何に対して」の制約なのかを書いてあげます。
今回はTabbarの上にAdmob広告を配置したかったので、toItem: self.tabbarを渡してあげるとすんなりタブバーの上にAdmob広告が出るようになりました。

TabBarController.swift

        view.addConstraints(
            [NSLayoutConstraint(item: bannerView,
                                attribute: .bottom,
                                relatedBy: .equal,
                                toItem: self.tabBar, // POINT:何に対しての制約か
                                attribute: .top,
                                multiplier: 1,
                                constant: 0),
             NSLayoutConstraint(item: bannerView,
                                attribute: .centerX,
                                relatedBy: .equal,
                                toItem: view,
                                attribute: .centerX,
                                multiplier: 1,
                                constant: 0)
        ])

Viewの重なりを制御する

上の方でちらっとしか触れていませんが、Viewの重なりが発生してボタンの上にバナー広告が出てカッコわるいときの対応もしています。

ビューの重なりを制御したいコントローラクラスで下記を書くと、指定したViewより後ろに配置されます。

TabBarController.swiftのviewDidload内にて

    bannerView.sendSubviewToBack(actionButton) // ViewをactionButtonより後ろへ

以上、2点勉強になったのでシェアでした。

参考資料

コメント

タイトルとURLをコピーしました