Esta página foi traduzida pela API Cloud Translation.

Renderização de anúncios no iPhone X

Este guia demonstra as práticas recomendadas sobre como programar seus apps para renderizar anúncios corretamente no iPhone X.

Pré-requisitos

Conclua a etapa Começar.

Anúncios de banner

Os anúncios de banner precisam ser colocados na "Área segura" para evitar que os cantos arredondados, a cobertura do sensor e o indicador de início atrapalhem a exibição. Nesta página, você vai encontrar exemplos de como adicionar restrições para posicionar um banner na parte superior ou inferior da área segura. As restrições de storyboard e programáticas são demonstradas em um ambiente compatível com iOS 9 ou versões mais recentes e Xcode 9 ou versões mais recentes. Soluções alternativas para versões anteriores do iOS e do Xcode também são mencionadas.

Storyboard/Interface Builder

Se o app usa o Interface Builder, primeiro ative as guias de layout da área segura. Para fazer isso, você precisa estar executando o Xcode 9 ou mais recente e ter como alvo o iOS 9 ou mais recente.

Abra o arquivo do Interface Builder e clique na cena do controlador de visualização. As opções do Documento do Interface Builder vão aparecer à direita. Verifique Usar guias de layout de área segura e confira se você está desenvolvendo para iOS 9.0 e versões mais recentes, no mínimo.

Recomendamos que você restrinja o banner ao tamanho necessário usando restrições de largura e altura.

Agora é possível alinhar o banner à parte de cima da área segura restringindo a propriedade "Top" da GAMBannerView à parte de cima da área segura:

Da mesma forma, você pode alinhar o banner à parte de baixo da área segura restringindo a propriedade "Bottom" da GAMBannerView à parte de baixo da área segura:

Suas restrições agora devem ser semelhantes à captura de tela abaixo (o tamanho/posicionamento pode variar):

ViewController

Confira um snippet de código simples do controlador de visualização que faz o mínimo necessário para mostrar um banner em um GAMBannerView, conforme configurado no storyboard acima:

Swift

class ViewController: UIViewController {

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

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(GAMRequest())
  }

}

Objective-C

@interface ViewController()

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

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

Como alinhar banners à borda da área segura

Se você quiser ter um banner de largura total, alinhado à esquerda ou à direita, restrinja a borda esquerda/direita do banner à borda esquerda/direita da área segura e não à borda esquerda/direita da supervisualização.

Se a opção Usar guias de layout da área segura estiver ativada, o Builder de interfaces vai usar por padrão as bordas da área segura ao adicionar restrições à visualização.

Suporte para iOS 8 e versões anteriores

Se você quiser oferecer suporte ao iOS 8 ou versões anteriores usando o Interface Builder, desmarque a opção Use Safe Area Layout Guides para os arquivos do Interface Builder e os storyboards.

Agora você pode adicionar restrições à parte de baixo da guia de layout superior (em vez da parte de cima da área segura):

Adicione também restrições à parte de cima do guia de layout da parte de baixo (em vez da parte de baixo da área segura):

Para banners de largura total (afetados apenas pela área segura no modo paisagem), esses guias de layout não existem. A opção segura no Interface Builder é fazer com que as restrições de borda esquerda e direita sejam relativas às margens:

Isso vai compensar um pouco a borda do banner da borda da superview/área segura, garantindo que o banner não seja obscurecido na orientação paisagem no iPhone X. Também é possível alcançar o resultado desejado programaticamente.

Programática

Se o app cria anúncios de banner de maneira programática, é possível definir restrições e posicionar o anúncio de banner no código. Este exemplo (para iOS versão 7.0 e mais recentes) mostra como restringir um banner para que ele fique centralizado horizontalmente na parte de baixo da área segura:

Swift

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(GAMRequest())
  }

  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) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

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

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest 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

As técnicas acima podem ser usadas facilmente para restringir a parte de cima da área de segurança modificando os atributos e âncoras usados.

Anúncios nativos

Se o app fixar anúncios nativos na parte de cima ou de baixo da tela, os mesmos princípios se aplicam a anúncios nativos e de banner. A principal diferença é que, em vez de adicionar restrições a um GAMBannerView, você precisa adicionar restrições ao GADNativeAppInstallAdView e GADNativeContentAdView (ou à visualização que contém o anúncio) para respeitar os guias de layout da área segura. Para visualizações nativas, recomendamos fornecer restrições de tamanho mais explícitas.

Anúncios intersticiais e premiados

Os formatos de anúncio em tela cheia, incluindo anúncios intersticiais e premiados, são renderizados pelo SDK dos anúncios para dispositivos móveis do Google. O SDK dos anúncios para dispositivos móveis do Google vai ser atualizado para garantir que elementos de anúncios, como o botão de fechar, sejam renderizados no local certo. Vamos atualizar as notas da versão e esta página de documentação quando essa mudança estiver disponível.