Renderizado de anuncios en iPhone X

En esta guía se describen las prácticas recomendadas que debes seguir para programar tus aplicaciones, de modo que rendericen los anuncios correctamente en los iPhone X.

Requisitos previos

Los anuncios de banner se deben situar en la "zona segura" para evitar que queden ocultos por las esquinas redondeadas, el espacio de los sensores y el indicador de inicio. En esta página encontrarás ejemplos de cómo añadir límites para situar un banner en la parte inferior o superior de la zona segura. Las restricciones, tanto de storyboard como las programáticas, se muestran en un entorno compatible con iOS 9+ y Xcode 9+. También se mencionan soluciones para versiones anteriores de iOS y Xcode.

Storyboards e Interface Builder

Si tu aplicación utiliza Interface Builder, comprueba primero si has habilitado las guías de diseño de la zona segura. Para ello, debes ejecutar Xcode 9+ y definir iOS 9+ como objetivo.

Abre tu archivo de Interface Builder y haz clic en la escena del controlador de vistas. A la derecha, verás las opciones del documento de Interface Builder. Marca la casilla Use Safe Area Layout Guides (Usar guías de diseño de la zona segura) y asegúrate de que vas a desarrollar, como mínimo, para iOS 9.0 y versiones posteriores.

Recomendamos configurar los límites de altura y de anchura deseados para el banner.

Ahora puedes alinear el banner con la parte superior de la zona segura. Para ello, limita la propiedad Top (Superior) de GADBannerView a la parte superior de la zona segura:

Del mismo modo, puedes alinear el banner con la parte inferior de la zona segura. Para ello, limita la propiedad Bottom (Inferior) de GADBannerView a la parte inferior de la zona segura:

Los límites deberían tener un aspecto similar al de esta captura de pantalla (el tamaño y la posición pueden variar):

ViewController

Aquí tienes un sencillo fragmento de código del controlador de vistas, que realiza los ajustes mínimos para mostrar un banner en una GADBannerView, tal como se ha configurado en el storyboard anterior:

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.rootViewController = self
    bannerView.load(GADRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

Alinear banners con el borde de la zona segura

Si quieres que un banner esté alineado a la izquierda o a la derecha, restringe el borde izquierdo o derecho del banner al extremo izquierdo o derecho de la zona segura, no de la supervista.

De forma predeterminada, si has habilitado la opción Use Safe Area Layout Guides (Usar guías de diseño de la zona segura), Interface Builder restringirá la vista a los bordes de la zona segura.

Compatibilidad con iOS 8 y versiones anteriores

Si quieres ofrecer compatibilidad con iOS 8 o versiones anteriores mediante Interface Builder, debes desactivar Use Safe Area Layout Guides (Usar guías de diseño de la zona segura) en tus archivos y storyboards de Interface Builder.

Puedes añadir límites a la parte inferior de la guía de diseño superior (en vez de la parte superior de la zona segura):

Añade también límites a la parte superior de la guía de diseño inferior (en vez de la parte inferior de la zona segura):

Estas guías de diseño no están disponibles para los banners de ancho completo, a los que la zona segura solo afecta en la orientación horizontal. Lo mejor es definir límites relativos a los márgenes en los bordes izquierdo y derecho en Interface Builder:

Esto apartará un poco los bordes del banner de los de la supervista o la zona segura, de modo que el banner no quede tapado en la orientación horizontal en los iPhone X. También puedes conseguir esto programáticamente.

Método programático

Si tu aplicación crea anuncios de banner programáticamente, puedes definir límites e incluir el anuncio de banner en el código. En este ejemplo (para iOS 7.0 y versiones posteriores) puedes ver cómo limitar un banner para que quede centrado horizontalmente en la parte inferior de la zona segura:

Swift

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GADBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.load(GADRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToView:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

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

@end

Las técnicas anteriores sirven para restringir fácilmente el contenido a la parte superior de la zona segura, modificando los atributos y las anclas que se utilizan.

Banners inteligentes

Si usas banners inteligentes, especialmente en la orientación horizontal, recomendamos usar límites para alinear los bordes del banner con los bordes izquierdo y derecho de la zona segura.

Es posible configurar este ajuste en Interface Builder hasta la versión iOS 9. Para ello, basta con activar la opción Use Safe Area Layout Guides (Usar guías de diseño de la zona segura), tal como se ha indicado anteriormente.

En el código, debes definir límites de bordes relativos a las guías de diseño de la zona segura, si están disponibles. Aquí tienes un fragmento de código que añade una vista de banner, así como límites a la parte inferior de la vista de ancho completo:

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective-C

- (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]];
}

Anuncios nativos

Si tu aplicación fija anuncios nativos a la parte superior o inferior de la pantalla, se aplicarán los mismos principios para ellos que para los anuncios de banner, salvo que, en lugar de añadir límites a GADBannerView, tendrás que añadirlos a GADUnifiedNativeAdView (o a la vista que contiene el anuncio) para respetar las guías de diseño de la zona segura. Para las vistas nativas, te recomendamos que indiques límites de tamaño más explícitos.

Anuncios intersticiales y bonificados

A partir de la versión 7.26.0, el SDK de anuncios de Google para móviles es totalmente compatible con los formatos de anuncios intersticiales y bonificados para iPhone X.