Position AdMob banner at top of the safe area (iPhoneX)

Question

in the AdMob does it states "The techniques can easily be used for constraining to the top of the safe area by modifying the attributes and anchors used." I am unsure exactly of what which values to change here I know it has to be attributes and anchors but im not sure what do I change them to im not that familiar with constraints

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

Answer 1

As iPhoneX is shipped with iOS 11.0 and above you just need to modify the positionBannerViewFullWidthAtBottomOfSafeArea function. No need to adjust the constraints in the positionBannerViewFullWidthAtBottomOfView function which is for pre 11 versions.

Change

[guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]

to

[guide.topAnchor constraintEqualToAnchor:bannerView.topAnchor]

This will anchor the top of your AdMob banner to the top of the guide.

Elegant solution

To shorten the admob standard solution to add a banner to a view and set up the constraints needed the following snippet is very useful.

The difference between iOS 11 and the previous versions is that 11 introduced the Safe Area. Before 11 iOS had the LayoutMargins. We add a small function to return us either Safe Area guide or layout margin and get rid of the whole positionBannerViewFullWidthAtBottomOfView functions with this:

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];

  [self positionBannerViewFullWidthAtBottomOfSafeAreaOrLayoutMargins:bannerView];
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeAreaOrLayoutMargins:(UIView *_Nonnull)bannerView {
  // Position the banner. Stick it to the bottom of the Safe Area or layout margins.
  // Make it constrained to the edges of the safe area or layout margins (iOS < 11).

//Call the method to set the layout guide.

let guide = correctLayoutGuide //Swift
UILayoutGuide * guide = [self correctLayoutGuide]; //Objective-C   


  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    //[guide.topAnchor constraintEqualToAnchor:bannerView.topAnchor] // Banner at TOP
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor] // Banner at BOTTOM
  ]];
}


//This function returns safeAreaLayoutGuide for iOS 11 and above
//and layoutMarginsGuide for iOS < 11.

//Swift

var correctLayoutGuide: UILayoutGuide {
        if #available(iOS 11.0, *) {
            return view.safeAreaLayoutGuide
        } else {
            return view.layoutMarginsGuide
        }
}

//Objective-C

-(UILayoutGuide *) correctLayoutGuide {
    if (@available(ios 11.0, *)) {
        return [self.view safeAreaLayoutGuide];
    } else {
        return [self.view layoutMarginsGuide];
    }
}