Ce guide présente les bonnes pratiques à suivre pour coder vos applications afin d'afficher correctement les annonces sur l'iPhone X.
Prérequis
- Importez la version 7.26.0 ou ultérieure du SDK Google Mobile Ads, seul ou dans Firebase.
Bannières
Les bannières doivent être placées dans la zone de sécurité pour éviter d'être dissimulées par les angles arrondis, le boîtier des capteurs et l'indicateur d'accueil. Sur cette page, vous trouverez des exemples montrant comment ajouter des contraintes pour positionner une bannière en haut ou en bas de la zone de sécurité.
Créateur de storyboards/d'interfaces
Si votre application utilise Interface Builder, assurez-vous d'abord d'avoir activé les guides de mise en page de 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 de vue. Les options Interface Builder Document (Document Builder) s'affichent sur la droite. Consultez la section Utiliser des guides de mise en page de zone de sécurité et assurez-vous de créer votre application pour iOS 9.0 et versions ultérieures au minimum.
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 en haut de la zone de sécurité en limitant la propriété "Top" de GADBannerView au sommet de la zone de sécurité:
De même, vous pouvez aligner la bannière sur le bas de la zone de sécurité en limitant la propriété "Bottom" de GADBannerView 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 GADBannerView, tel que configuré dans le storyboard ci-dessus:
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];
}
Aligner les bannières sur le bord de la zone de sécurité
Si vous souhaitez disposer d'une bannière alignée à gauche ou à droite, limitez le bord gauche/droit de la bannière au bord gauche/droit de la zone de sûreté, et non le bord gauche/droit de la vue Super View.
Si l'option Use Safe Area Layout Guides (Utiliser des guides de mise en page de 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é lors de l'ajout de contraintes à la vue.
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 montre comment contraindre une bannière à centrer horizontalement en bas de la zone de sécurité:
Swift
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Instantiate the banner view with your desired banner size.
bannerView = GADBannerView(adSize: GADAdSizeBanner)
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:GADAdSizeBanner];
[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
Les techniques ci-dessus peuvent facilement être utilisées pour restreindre la zone de sécurité en modifiant les attributs et les ancrages utilisés.
Bannières intelligentes
Si vous utilisez des bannières intelligentes, en particulier en mode paysage, nous vous recommandons d'aligner les bords des bannières sur les bords gauche et droit de la zone de sécurité.
Dans l'outil de création d'interface, cela est possible à nouveau dans iOS 9 en cochant l'option Use Safe Area Layout Guides (Utiliser des guides de mise en page de zone de sécurité) comme indiqué ci-dessus.
Dans le code, vous devez définir vos contraintes de périphérie par rapport aux guides de mise en page des zones de sécurité, le cas échéant. Voici un extrait de code qui ajoute une vue de type bannière à la vue et limite le bas de l'affichage, en pleine largeur:
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]];
}
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 à un GADBannerView, vous devez ajouter des contraintes à votre GADUnifiedNativeAdView (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
Depuis la version 7.26.0, le SDK Google Mobile Ads est entièrement compatible avec les formats d'annonces interstitielles et avec récompense pour l'iPhone X.