Programmatically adding a view between a tableView and bottomLayoutGuide

Question

I have a UIViewController with a UITableView that fills the screen for an ad-supported version. MyViewController is embedded in a UINavigationController and it has a UITabBarController at the bottom.

There will be 2 versions of this app:

1) Paid - I have this configured on a storyboard. It works as desired.

2) Ad Supported - Try as I may, I can't get the banner to draw in the right spot. I'm trying to do this:

topLayoutGuide
tableview
standard height padding
bannerView (50 height)
standard height padding
bottomLayoutGuide

Instead, the bannerView is being drawn on top of the tableView, rather than between the tableView and the bottomLayoutGuide

I call a method I created called configureBannerView from viewDidLoad. Here' the relevant portion of the code that lays out the view in Visual Format Language:

var allConstraints = [NSLayoutConstraint]()

let horizontalTableViewConstraint = NSLayoutConstraint.constraintsWithVisualFormat(
    "H:|[tableView]|",
    options: NSLayoutFormatOptions.AlignAllCenterY,
    metrics: nil,
    views: views)
allConstraints += horizontalTableViewConstraint

let horizontalBannerViewConstraint = NSLayoutConstraint.constraintsWithVisualFormat(
    "H:|[leftBannerViewSpacer]-[bannerView(320)]-[rightBannerViewSpacer(==leftBannerViewSpacer)]|",
    options: NSLayoutFormatOptions.AlignAllCenterY,
    metrics: nil,
    views: views)
allConstraints += horizontalBannerViewConstraint

let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
    "V:|[topLayoutGuide][tableView]-[leftBannerViewSpacer(50)]-[bottomLayoutGuide]|",
    options: [],
    metrics: metrics,
    views: views)
    allConstraints += verticalConstraints

I can't figure out why this isn't working. Below is the complete configureBannerView method.

func configureBannerView() {
    if adSupported == false {
        // Do nothing, leave it alone
    } else {

        // remove existing constraints
        tableView.removeConstraints(tableView.constraints)
        tableView.translatesAutoresizingMaskIntoConstraints = false

        // create dictionary of views
        var views: [String : AnyObject] = [
            "tableView" : tableView,
            "topLayoutGuide": topLayoutGuide,
            "bottomLayoutGuide": bottomLayoutGuide]

        // Create a frame for the banner
        let bannerFrame = CGRect(x: 0, y: 0, width: kGADAdSizeBanner.size.width, height: kGADAdSizeBanner.size.height)
        // Instnatiate the banner in the frame you just created
        bannerView = GADBannerView.init(frame: bannerFrame)
        bannerView?.translatesAutoresizingMaskIntoConstraints = false
        // add the bannerView to the view
        view.addSubview(bannerView!)
        // add bannerView to the view dictionary
        views["bannerView"] = bannerView

        // Create spacers for left and right sides of bannerView
        // 32.0 = leftSpacer left pad + leftSpacer right pad + rightSpacer left pad + rightSpacer right pad
        // Calculate width of spacer
        let spacerWidth = (screenSize.width - kGADAdSizeBanner.size.width - 32.0) / 2

        // Instantiate left and right pads
        // 50.0 = height of bannerView
        let leftBannerViewSpacer = UIView(frame: CGRect(x: 0, y: 0, width: spacerWidth, height: 50.0))
        let rightBannerViewSpacer = UIView(frame: CGRect(x: 0, y: 0, width: spacerWidth, height: 50.0))

        leftBannerViewSpacer.translatesAutoresizingMaskIntoConstraints = false
        rightBannerViewSpacer.translatesAutoresizingMaskIntoConstraints = false

        // add the spacers to the subview
        view.addSubview(leftBannerViewSpacer)
        view.addSubview(rightBannerViewSpacer)

        // add to the views dictionary
        views["leftBannerViewSpacer"] = leftBannerViewSpacer
        views["rightBannerViewSpacer"] = rightBannerViewSpacer


        // Create metric for tabBarHeight
        let tabBarHeight = tabBarController?.tabBar.frame.height

        // Create a dictionary of metrics
        let metrics: [String : CGFloat] = ["tabBarHeight": tabBarHeight!]


        var allConstraints = [NSLayoutConstraint]()

        let horizontalTableViewConstraint = NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|[tableView]|",
            options: NSLayoutFormatOptions.AlignAllCenterY,
            metrics: nil,
            views: views)
        allConstraints += horizontalTableViewConstraint

        let horizontalBannerViewConstraint = NSLayoutConstraint.constraintsWithVisualFormat(
            "H:|[leftBannerViewSpacer]-[bannerView(320)]-[rightBannerViewSpacer(==leftBannerViewSpacer)]|",
            options: [NSLayoutFormatOptions.AlignAllCenterY],
            metrics: nil,
            views: views)
        allConstraints += horizontalBannerViewConstraint

        let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat(
            "V:|[topLayoutGuide][tableView]-[leftBannerViewSpacer(50)]-[bottomLayoutGuide]|",
            options: [],
            metrics: metrics,
            views: views)
        allConstraints += verticalConstraints

        NSLayoutConstraint.activateConstraints(allConstraints)

Thank you for reading. I welcome suggestions to resolve my erroneous code.

Answer 1

Storyboard solution

Do not add constraints programmatically unless all other avenues have failed: there is no way to see what you are doing until you build, link, run.

A much simpler solution requiring much less code is to hold on to references of your views an constraints from Interface Builder, and:

constraintToTweak.constant = newValue

Unlike the other properties, the constant may be modified after constraint creation. Setting the constant on an existing constraint performs much better than removing the constraint and adding a new one that's just like the old but for having a new constant.

or

constraintToTweak.active = false

The receiver may be activated or deactivated by manipulating this property.  Only active constraints affect the calculated layout.  Attempting to activate a constraint whose items have no common ancestor will cause an exception to be thrown. Defaults to NO for newly created constraints.

Answer 2

With ishaq's and SwiftArchitect's assistance, I figured it out. It turns out, the key to getting the GADBannerView to display properly below a UITableView without adding it as a footer was super simple. I ended up chopping 100 lines of needless code by doing the following:

1) UIStackView: If you haven't used this before, stop what you're doing now and follow this tutorial.

I added my tableView: UITableView and the bannerView: GADBannerView in interface builder to a vertical UIStackView

2) I created IBOutlets (I had tableView already) for both of them on MyViewController.

3) My refactored configureBannerView looks like this.

// I added these properties at the top. I did not know you could drag 
// constraints from Interface Builder onto the ViewController
@IBOutlet weak var bannerViewHeight: NSLayoutConstraint!
@IBOutlet weak var bannerViewWidth: NSLayoutConstraint!


func configureBannerView() {
    if adSupported == true {
        loadAd() // follow Google's documentation to configure your requests
    } else {
        bannerView.hidden = true // this hides the bannerView if it's not needed

    // Removes constraint errors when device is rotated
    bannerViewWidth.constant = 0.0  
    bannerViewHeight.constant = 0.0

    }
}

Thanks to ishaq & SwiftArchitect for pointing me in the right direction.

Answer 3

Add a new adMob UIViewController as root controller and addSubview of the old root controller.

I had a programmatic very similar problem case having to add adMob to a UITabBarController root controller with tab Controllers that were UINavigationController. Them all making hard resistance in trying to resize them internally, the ads were just typed over the application views. I might have just not been lucky enough finding a working way that path. Read a lot Stackoverflow and Google hints.

I also believe Apples and Googles recommendations are like having the ads below and kind of separate from but tight to the app. The Android Admob banners appears the same way, and same behavior is wanted. (Did the same project for Android recently).

Make a new app root controller, a ViewController with Admob

To be reusable and smoothly implementable in future projects, about a new adUnitID is all needed to be put in (and the name of the old root controller). The banner will be below the applications screen.

Just add this class file to the project and make it the root controller in the AppDelegate.swift file.

import UIKit
import GoogleMobileAds

class AdsViewController: UIViewController, GADBannerViewDelegate {

    let adsTest         = true
    let ads             = true //false // 
    let adUnitIDTest    = "ca-app-pub-3940256099942544/2934735716"
    let adUnitID        = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx"
    let tabVc           = MainTabBarController()

    var bannerView: GADBannerView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Add the adMob banner
        addBanner(viewMaster: view)
        // Add the old root controller as a sub-view
        view.addSubview(tabVc.view)
        // Make its constraints to fit the adMob
        if(ads) {
            tabVc.view.translatesAutoresizingMaskIntoConstraints = false
            tabVc.view.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
            tabVc.view.bottomAnchor.constraint(equalTo: bannerView.topAnchor).isActive = true
            tabVc.view.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
            tabVc.view.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
        // To be notified of rotation
        NotificationCenter.default.addObserver(self, selector: #selector(AdsViewController.rotated), name: UIDevice.orientationDidChangeNotification, object: nil)
        }
    }

/*******************************

Ads banner standard engine

*******************************/

    func addBanner(viewMaster: UIView) {
        if(ads) {
            // We instantiate the banner with desired ad size.
            bannerView = GADBannerView(adSize: kGADAdSizeSmartBannerPortrait)
            addBannerViewToView(bannerView, viewMaster: viewMaster)
            if(adsTest) {
                bannerView.adUnitID = adUnitIDTest
            } else {
                bannerView.adUnitID = adUnitID
            }

            bannerView.rootViewController = self
            bannerView.load(GADRequest())
            bannerView.delegate = self
        }
    }

    func addBannerViewToView(_ bannerView: GADBannerView, viewMaster: UIView) {
        bannerView.translatesAutoresizingMaskIntoConstraints = false
        viewMaster.addSubview(bannerView)
        viewMaster.addConstraints(
        [NSLayoutConstraint(item: bannerView,
                            attribute: .bottom,
                            relatedBy: .equal,
                            toItem: viewMaster.safeAreaLayoutGuide,
                            attribute: .bottom,
                            multiplier: 1,
                            constant: 0),
         NSLayoutConstraint(item: bannerView,
                            attribute: .centerX,
                            relatedBy: .equal,
                            toItem: viewMaster,
                            attribute: .centerX,
                            multiplier: 1,
                            constant: 0)
        ])
    }

/*******************************

Rotation (change SmartBanner)

*******************************/
    @objc func rotated() {
        if UIDevice.current.orientation.isPortrait {
            bannerView.adSize = kGADAdSizeSmartBannerPortrait

        }
        if UIDevice.current.orientation.isLandscape {
            bannerView.adSize = kGADAdSizeSmartBannerLandscape
        }
    }
}