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, alloggiamento del sensore e indicatore Home. In questa pagina troverai esempi su come aggiungere vincoli per posizionare un banner nella parte superiore o inferiore dell'area di sicurezza. I vincoli di programmazione e di storyboard vengono dimostrati in un ambiente che supporta iOS 9 e versioni successive e Xcode 9 e versioni successive. Vengono inoltre indicati i workaround per le versioni precedenti di iOS e Xcode.

Storyboard/Interface Builder

Se la tua app utilizza Interface Builder, assicurati innanzitutto di aver attivato le linee di layout per le aree di sicurezza. Per farlo, devi utilizzare Xcode 9 o versioni successive e scegliere come target iOS 9 o versioni successive.

Apri il file di Interface Builder e fai clic sulla scena del controller della vista. Sul lato destro vedrai le opzioni del Documento Interface Builder. Seleziona Utilizza linee guida per il layout delle aree sicure e assicurati di eseguire la compilazione 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:

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

Ora i vincoli dovrebbero essere simili allo screenshot di seguito (le dimensioni/il posizionamento possono variare):

ViewController

Ecco un semplice snippet di codice del controller della vista che esegue il minimo necessario per mostrare un banner in un GAMBannerView come configurato nello storyboard sopra:

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

Allineamento dei banner al bordo dell'area sicura

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

Se hai attivato l'opzione Utilizza guide di layout per le aree di sicurezza, lo strumento di creazione di interfacce utilizzerà per impostazione predefinita i bordi dell'area di sicurezza quando aggiungi vincoli alla vista.

Supporto di iOS 8 e versioni precedenti

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

Ora puoi aggiungere vincoli alla parte inferiore della guida di 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 larghezza intera (interessati dall'area di sicurezza solo in formato orizzontale), queste linee guida per il layout non esistono. L'opzione sicura in Interface Builder è impostare i vincoli dei bordi sinistro e destro in base ai margini:

In questo modo, il bordo del banner sarà leggermente spostato rispetto al bordo del superview/dell'area di sicurezza, in modo 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 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: 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

Le tecniche riportate sopra possono essere facilmente utilizzate per limitare l'area di sicurezza alla parte superiore modificando gli attributi e le ancore utilizzati.

Annunci nativi

Se la tua app fissa gli annunci nativi nella parte superiore o inferiore della schermata, per questi annunci valgono gli stessi principi degli annunci banner. La differenza principale è che, anziché aggiungere vincoli a un GAMBannerView, devi aggiungere vincoli a GADNativeAppInstallAdView e GADNativeContentAdView (o alla visualizzazione contenente l'annuncio) per rispettare le linee guida per il layout delle aree di sicurezza. Per le visualizzazioni native, ti consigliamo di fornire vincoli di dimensioni 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. L'SDK Google Mobile Ads verrà aggiornato per garantire che gli elementi dell'annuncio, come il pulsante di chiusura, vengano visualizzati nel punto giusto. Aggiorneremo le note di rilascio e questa pagina della documentazione quando la modifica sarà disponibile.