Questa guida illustra le best practice su come programmare le tue app per eseguire il rendering corretto degli annunci su iPhone X.
Prerequisiti
- Importa l'SDK Google Mobile Ads versione 7.26.0 o successive, singolarmente o come parte di Firebase.
Annunci banner
Gli annunci banner devono essere posizionati nell'"area di sicurezza" per evitare di essere oscurati da angoli arrotondati, dall'alloggiamento del sensore e dall'indicatore della casa. In questa pagina troverai esempi di come aggiungere vincoli per posizionare un banner nella parte superiore o inferiore dell'area di sicurezza.
Storyboard/Interface Builder
Se la tua app utilizza Interface Builder, assicurati di aver abilitato le guide per il layout Area sicura. A questo scopo, devi eseguire 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 Documento di Interface Builder. Consulta Utilizza le guide al layout delle aree di sicurezza e assicurati di creare almeno per iOS 9.0 e versioni successive.
Ti consigliamo di limitare il banner alle dimensioni richieste utilizzando i vincoli di larghezza e altezza.
Ora puoi allineare il banner in cima all'area di sicurezza vincolando la proprietà Top di GADBannerView alla parte superiore dell'area di sicurezza:
Allo stesso modo, puoi allineare il banner in fondo all'area di sicurezza vincolando la proprietà In basso di GADBannerView alla parte inferiore dell'area sicura:
Ora i vincoli dovrebbero essere simili allo screenshot riportato di seguito (le dimensioni e il posizionamento possono variare):
ViewController
Ecco un semplice snippet di codice del controller di visualizzazione che soddisfa i requisiti minimi per mostrare un banner in un GADBannerView come configurato nello storyboard sopra:
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];
}
Allineamento dei banner al bordo dell'area sicura
Se vuoi avere un banner 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 della supervista.
Se è attivata l'opzione Usa le guide al layout delle aree di sicurezza, lo strumento per la creazione di interfacce utilizzerà per impostazione predefinita i bordi dell'area di sicurezza quando aggiunge vincoli alla vista.
Pubblicità programmatica
Se l'app crea annunci banner in modo programmatico, puoi definire vincoli e posizionare l'annuncio banner nel codice. Questo esempio mostra come vincolare un banner in modo che sia centrato orizzontalmente nella parte inferiore dell'area di sicurezza:
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
Le tecniche illustrate sopra possono essere facilmente utilizzate per vincolare la parte superiore dell'area di sicurezza modificando gli attributi e gli ancoraggi utilizzati.
Banner intelligenti
Se usi i banner intelligenti, soprattutto in orizzontale, ti consigliamo di utilizzare i vincoli per allineare i bordi dei banner ai bordi sinistro e destro dell'area sicura.
Nello strumento di creazione di interfacce, questa funzionalità è supportata fino a iOS 9 selezionando l'opzione Usa le guide al layout delle aree di sicurezza come descritto sopra.
Nel codice, dovresti rendere i vincoli per i bordi in relazione alle guide di layout dell'area sicura, se disponibili. Ecco uno snippet di codice che aggiunge una visualizzazione banner alla visualizzazione e si limita a quella in basso a larghezza intera:
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]];
}
Annunci nativi
Se la tua app blocca gli annunci nativi nella parte superiore o inferiore dello schermo, per gli annunci nativi si applicano gli stessi principi degli annunci banner.
La differenza principale è che invece di aggiungere vincoli a un elemento GADBannerView, dovrai
aggiungere vincoli a GADUnifiedNativeAdView (o alla vista contenitore
dell'annuncio) per rispettare le guide al layout dell'area sicura. Per le visualizzazioni native consigliamo
di fornire limiti di dimensioni più espliciti.
Annunci interstitial e con premio
A partire dalla versione 7.26.0, l'SDK Google Mobile Ads supporta completamente i formati di annunci interstitial e con premio per iPhone X.