Ce guide vous explique les bonnes pratiques à suivre pour coder vos applications afin d'afficher des annonces. correctement sur l'iPhone X.
Prérequis
- Importez la version 7.26.0 ou une version ultérieure du SDK Google Mobile Ads : par lui-même ou dans Firebase.
Bannières
Les bannières doivent être placées "Sécurité de surface" pour éviter d'être dissimulé par des angles arrondis, le boîtier du capteur et l'appareil indicateur. Sur cette page, vous trouverez des exemples d'ajout de contraintes placer une bannière en haut ou en bas de la zone de sécurité
Création de storyboards/d'interfaces
Si votre application utilise Interface Builder, assurez-vous d'abord d'avoir activé la zone de sécurité de mise en page standards. Pour ce faire, vous devez exécuter Xcode 9 ou une version ultérieure et cibler iOS 9 ou une version ultérieure.
Ouvrez votre fichier Interface Builder et cliquez sur la scène du contrôleur de vue. Toi les options Document Interface Builder (Document Interface Builder) s’affichent à droite. Cochez la case Utilisation Guides de mise en page pour les zones de sécurité et vérifier que vous utilisez iOS 9.0 et versions ultérieures au minimum.
Nous vous recommandons de limiter la bannière à la taille requise en utilisant les contraintes de hauteur.
Vous pouvez maintenant aligner la bannière en haut de la zone de sécurité en limitant Propriété supérieure de GADBannerView en haut de la zone de sécurité:
De même, vous pouvez aligner la bannière en bas de la zone de sécurité en en limitant la propriété Bottom de GADBannerView au bas du coffre-fort domaine:
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 le minimum nécessaire pour
afficher une bannière dans un GADBannerView comme 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 au bord de la zone de sécurité
Si vous souhaitez aligner la bannière à gauche ou à droite, appliquez des contraintes à la bord gauche/droit de la bannière à gauche/droite de la zone de sécurité et non sur les bords gauche/droit de la supervue.
Si l'option Utiliser les guides de mise en page de la zone de sécurité est activée, l'outil de création 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 pour positionner la bannière dans le code. Cet exemple montre comment contraindre une bannière centrer horizontalement au 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 limiter en modifiant les attributs et les ancrages utilisés.
Bannières intelligentes
Si vous utilisez des bannières intelligentes, en particulier au format paysage, utilisez des contraintes pour aligner les bords de la bannière sur les bords gauche et droit zone de sécurité.
Dans le générateur d'interfaces, cette modification est prise en charge à partir d'iOS 9. Pour ce faire, il suffit de vérifier l'option Use Safe Area Layout Guides (Utiliser les guides de mise en page de la zone de sécurité). comme indiqué ci-dessus.
Dans le code, vous devez placer vos contraintes de bord par rapport à la zone sûre de mise en page, le cas échéant. Voici un extrait de code permettant d'ajouter un affichage de bannière à la vue et se contraint jusqu'au bas de celle-ci, 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, le même
s'appliquent aux annonces natives de la même façon qu'aux bannières.
La principale différence est qu'au lieu d'ajouter des contraintes à un GADBannerView, vous
vous devez ajouter des contraintes à votre GADUnifiedNativeAdView (ou à la vue parent)
pour l'annonce) afin de respecter les guides de mise en page "Zone de sécurité". Pour les vues natives
nous vous recommandons de spécifier 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 avec récompense pour l'iPhone X.