Rendering dell'annuncio per iPhone X

Questa guida illustra le best practice su come codificare le app per visualizzare correttamente gli annunci su iPhone X.

Prerequisiti

Gli annunci banner devono essere posizionati nell'"Area di sicurezza" per evitare di essere oscurati da angoli arrotondati, sensore e indicatore Home. In questa pagina troverai esempi di come aggiungere vincoli per posizionare un banner nella parte superiore o inferiore dell'area di sicurezza. I vincoli programmatici e dello storyboard sono dimostrati in un ambiente che supporta iOS 9+ e Xcode 9+. Sono inoltre annotate le soluzioni alternative per le versioni precedenti di iOS e Xcode.

Storyboard/Interface Builder

Se la tua app utilizza Interface Builder, assicurati innanzitutto di aver attivato le guide di layout dell'area sicura. Per farlo, devi utilizzare Xcode 9 o versioni successive e avere come target iOS 9 o versioni successive.

Apri il file Interface Builder e fai clic sulla scena del controller di visualizzazione. A destra vedrai le opzioni di Interface Builder Document. Seleziona Usa guide di layout area sicura e assicurati di sviluppare per iOS 9.0 e versioni successive come minimo.

Ti consigliamo di limitare il banner alle dimensioni richieste utilizzando i vincoli di larghezza e altezza.

Ora puoi allineare il banner alla parte superiore dell'area di sicurezza vincolando la proprietà Top di GAMBannerView alla parte superiore dell'area di sicurezza:

Allo stesso modo, puoi allineare il banner alla parte inferiore dell'area di sicurezza vincolando la proprietà Bottom di GAMBannerView alla parte inferiore dell'area di sicurezza:

I vincoli ora dovrebbero essere simili a quelli dello screenshot riportato di seguito (le dimensioni/il posizionamento possono variare):

ViewController

Ecco un semplice snippet di codice del controller di visualizzazione che esegue le operazioni minime necessarie per mostrare un banner in un GAMBannerView come configurato nello storyboard precedente:

Swift

class ViewController: UIViewController {

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

  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(AdManagerRequest())
  }

}

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

Allineamento dei banner al bordo dell'area sicura

Se vuoi un banner a tutta larghezza, allineato a sinistra o a destra, vincola il bordo sinistro/destro del banner al bordo sinistro/destro dell'area sicura e non al bordo sinistro/destro della superview.

Se hai attivato l'opzione Usa guide di layout dell'area sicura, lo strumento di creazione dell'interfaccia utilizzerà per impostazione predefinita i bordi dell'area sicura quando aggiungi vincoli alla visualizzazione.

Supporto di iOS 8 e versioni precedenti

Se vuoi supportare iOS 8 o versioni precedenti utilizzando Interface Builder, devi deselezionare Usa guide di layout area sicura per i file Interface Builder e gli storyboard.

Ora puoi aggiungere vincoli alla parte inferiore della guida del layout superiore (anziché alla parte superiore dell'area di sicurezza):

Aggiungi anche vincoli alla parte superiore della guida di layout inferiore (anziché alla parte inferiore dell'area di sicurezza):

Per i banner a tutta larghezza (interessati solo dall'area di sicurezza in modalità orizzontale), queste guide di layout non esistono. L'opzione sicura in Interface Builder consiste nel rendere i vincoli dei bordi sinistro e destro relativi ai margini:

In questo modo, il bordo del banner verrà spostato leggermente dal bordo della supervisualizzazione/area di sicurezza, assicurando che il banner non venga oscurato in orientamento orizzontale su iPhone X. Puoi anche ottenere il risultato desiderato in modo programmatico.

Pubblicità programmatica

Se la tua app crea annunci banner in modo programmatico, puoi definire i vincoli e posizionare l'annuncio banner nel codice. Questo esempio (per iOS versione 7.0 e successive) mostra come vincolare un banner in modo che sia centrato orizzontalmente nella parte inferiore dell'area di sicurezza:

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    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(AdManagerRequest())
  }

  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

Le tecniche descritte sopra possono essere facilmente utilizzate per il vincolo alla parte superiore dell'area sicura modificando gli attributi e gli ancoraggi utilizzati.

Annunci nativi

Se la tua app blocca gli annunci nativi nella parte superiore o inferiore dello schermo, gli stessi principi si applicano agli annunci nativi come agli annunci banner. La differenza principale è che, anziché aggiungere vincoli a un GAMBannerView, devi aggiungere vincoli a GADNativeAppInstallAdView e GADNativeContentAdView (o alla visualizzazione contenitore dell'annuncio) per rispettare le guide di layout dell'area sicura. Per le visualizzazioni native, consigliamo di fornire vincoli di dimensione più espliciti.

Annunci interstitial e con premio

I formati degli annunci a schermo intero, inclusi gli annunci interstitial e con premio, vengono visualizzati dall'SDK Google Mobile Ads. Verrà eseguito un aggiornamento dell'SDK Google Mobile Ads per garantire che gli elementi pubblicitari come il pulsante di chiusura vengano visualizzati nella posizione corretta. Aggiorneremo le note di rilascio e questa pagina di documentazione quando la modifica sarà disponibile.