Cette page a été traduite par l'API Cloud Translation.

Rendu des annonces iPhone X

Ce guide présente les bonnes pratiques à suivre pour coder vos applications afin d'afficher correctement les annonces sur l'iPhone X.

Conditions préalables

Suivez les instructions de la section Commencer.

Bannières

Les bannières doivent être placées dans la zone de sécurité pour éviter d'être masquées par les coins arrondis, le boîtier des capteurs et l'indicateur d'accueil. Sur cette page, vous trouverez des exemples d'ajout de contraintes pour positionner une bannière en haut ou en bas de la zone de sécurité. Les contraintes de storyboard et de programmation sont présentées dans un environnement compatible avec iOS 9+ et Xcode 9+. Des solutions de contournement pour les versions antérieures d'iOS et de Xcode sont également indiquées.

Générateur de storyboards/d'interfaces

Si votre application utilise Interface Builder, assurez-vous d'abord d'avoir activé les guides de mise en page pour la zone de sécurité. Pour ce faire, vous devez exécuter Xcode 9 ou une version ultérieure, et cibler iOS 9 ou une version ultérieure.

Ouvrez le fichier Interface Builder et cliquez sur la scène du contrôleur d'affichage. Les options Interface Builder Document (Document de générateur d'interfaces) s'affichent à droite. Consultez la section Use Safe Area Layout Guides (Utiliser des guides de mise en page de la zone sécurisée) et assurez-vous de créer au minimum une application pour iOS 9.0 et versions ultérieures.

Nous vous recommandons de limiter la bannière à la taille requise en utilisant des contraintes de largeur et de hauteur.

Vous pouvez maintenant aligner la bannière pour la partie supérieure de la zone de sécurité en limitant la propriété "Top" de GAMBannerView au haut de la zone de sécurité:

De même, vous pouvez aligner la bannière avec le bas de la zone de sécurité en appliquant la propriété "Bottom" (inférieure) de GAMBannerView au bas de la zone sûre:

Vos contraintes devraient maintenant ressembler à la capture d'écran ci-dessous (la taille et le positionnement peuvent varier):

ViewController

Voici un extrait de code simple du contrôleur de vue qui effectue les opérations minimales requises pour afficher une bannière dans un élément GAMBannerView, tel que configuré dans le storyboard ci-dessus:

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 = "/6499/example/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 = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

Aligner les bannières par rapport au bord de la zone de sécurité

Si vous souhaitez disposer d'une bannière pleine largeur, alignée à gauche ou à droite, limitez le bord gauche/droit de la bannière au bord gauche/droit de la zone de sécurité, et non le bord gauche/droit de la supervue.

Si l'option Use Safe Area Layout Guides (Utiliser des guides de mise en page de la zone de sécurité) est activée, le générateur d'interface utilise par défaut les bords de la zone de sécurité lorsque vous ajoutez des contraintes à la vue.

Compatibilité avec iOS 8 et versions antérieures

Si vous souhaitez prendre en charge iOS 8 ou une version antérieure à l'aide d'Interface Builder, vous devez décocher la case Use Safe Area Layout Guides (Utiliser des guides de mise en page de la zone sécurisée) pour vos fichiers et vos storyboards Interface Builder.

Vous pouvez maintenant ajouter des contraintes au bas du guide de mise en page du haut (au lieu du haut de la zone de sécurité):

Ajoutez également des contraintes en haut du guide de mise en page inférieur (plutôt qu'en bas de la zone de sécurité):

Pour les bannières pleine largeur (affectées uniquement par la zone de sûreté en mode paysage), ces guides de mise en page n'existent pas. L'option sûre d'Interface Builder consiste à définir les contraintes des bords gauche et droit par rapport aux marges:

Cela décale légèrement le bord de la bannière par rapport au bord de la supervue/de la zone de sécurité, ce qui garantit qu'elle ne sera pas masquée dans une orientation en mode paysage sur l'iPhone X. Vous pouvez également obtenir le résultat souhaité par programmation.

Programmatique

Si votre application crée des bannières de façon programmatique, vous pouvez définir des contraintes et positionner les bannières dans le code. Cet exemple (pour iOS version 7.0 ou ultérieure) montre comment contraindre une bannière à être centrée horizontalement en bas de la zone de sécurité:

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 = "/6499/example/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 = @"/6499/example/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

Les techniques ci-dessus peuvent facilement être utilisées pour appliquer une contrainte sur la partie supérieure de la zone sûre en modifiant les attributs et les ancrages utilisés.

Annonces natives

Si votre application épingle des annonces natives en haut ou en bas de l'écran, les mêmes principes s'appliquent aux annonces natives et aux bannières. La principale différence est qu'au lieu d'ajouter des contraintes à une GAMBannerView, vous devez ajouter des contraintes à votre GADNativeAppInstallAdView et à votre GADNativeContentAdView (ou à la vue parent de l'annonce) afin de respecter les guides de mise en page de la zone de sécurité. Pour les vues natives, nous vous recommandons de fournir des contraintes de taille plus explicites.

Annonces interstitielles et avec récompense

Les formats d'annonces plein écran, y compris les annonces interstitielles et avec récompense, sont affichés par le SDK Google Mobile Ads. Le SDK Google Mobile Ads sera mis à jour pour garantir que les éléments d'annonce tels que le bouton de fermeture s'affichent au bon endroit. Nous mettrons à jour les notes de version et cette page de documentation lorsque cette modification sera disponible.