Questa guida illustra le best practice su come programmare le tue app per il rendering corretto degli annunci su iPhone X.
Prerequisiti
- Completa la procedura Inizia.
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 Home. In questa pagina troverai esempi di come aggiungere vincoli per posizionare un banner nella parte superiore o inferiore dell'area di sicurezza. I vincoli dello storyboard e della pubblicità programmatica sono mostrati in un ambiente che supporta iOS 9 e versioni successive e Xcode 9 e versioni successive. Vengono inoltre indicate soluzioni alternative per le versioni precedenti di iOS e Xcode.
Storyboard/Interface Builder
Se la tua app utilizza Interface Builder, assicurati innanzitutto di aver attivato le guide per il layout area di sicurezza. A tale 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 le Guide per il layout Safe Area e assicurati di progettare 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 in cima all'area di sicurezza vincolando la proprietà Top di GAMBannerView alla parte superiore dell'area di sicurezza:
Allo stesso modo, puoi allineare il banner nella parte inferiore dell'area di sicurezza vincolando la proprietà Bottom di GAMBannerView alla parte inferiore dell'area di sicurezza:
I vincoli ora dovrebbero avere un aspetto simile allo screenshot riportato di seguito (le dimensioni e il posizionamento possono variare):
ViewController
Di seguito è riportato un semplice snippet di codice del controller di visualizzazione che soddisfa il requisito minimo necessario per mostrare un banner in un elemento GAMBannerView come configurato nello storyboard precedente:
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];
}
Allineamento dei banner al bordo dell'area di sicurezza
Se vuoi avere un banner a larghezza intera, 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 superview.
Se è abilitata l'opzione Usa le guide al layout dell'area di sicurezza, lo strumento di creazione di interfacce utilizzerà per impostazione predefinita i bordi dell'area di sicurezza quando aggiunge vincoli alla vista.
Supporto di iOS 8 e versioni precedenti
Se vuoi supportare iOS 8 o versioni precedenti utilizzando Interface Builder, devi deselezionare Use Safe Area Layout Guides (Usa guide del layout di area di sicurezza) per i file e gli storyboard di Interface Builder.
Ora puoi aggiungere vincoli nella parte inferiore della guida al layout in alto (anziché nella parte superiore dell'area di sicurezza):
Aggiungi vincoli anche nella parte superiore della guida al layout inferiore (anziché nella parte inferiore dell'area di sicurezza):
Per i banner a larghezza intera (interessati solo dall'area di sicurezza in orizzontale), queste guide di layout non esistono. L'opzione sicura in Interface Builder è creare i vincoli del bordo sinistro e destro rispetto ai margini:
In questo modo il bordo del banner verrà leggermente sfalsato dal bordo della supervisione/area di sicurezza, assicurando che il banner non venga oscurato con orientamento orizzontale su iPhone X. Puoi anche ottenere il risultato desiderato in modo programmatico.
Pubblicità programmatica
Se l'app crea annunci banner in modo programmatico, puoi definire vincoli e posizionare l'annuncio banner nel codice. Questo esempio (per iOS 7.0 e versioni successive) mostra come vincolare un banner affinché venga 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 = "/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
Le tecniche illustrate sopra possono essere facilmente utilizzate per vincolare la parte superiore dell'area di sicurezza modificando gli attributi e gli ancoraggi utilizzati.
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 validi per gli annunci banner.
La differenza principale è che, invece di aggiungere vincoli a un GAMBannerView, dovrai
aggiungere vincoli a GADNativeAppInstallAdView e
GADNativeContentAdView (o alla vista contenitore dell'annuncio) per
rispettare le guide al layout dell'area di sicurezza. Per le visualizzazioni native consigliamo
di fornire vincoli di dimensione più espliciti.
Annunci interstitial e con premio
Il rendering dei formati degli annunci a schermo intero, inclusi quelli interstitial e con premio, viene eseguito dall'SDK Google Mobile Ads. Ci sarà un aggiornamento dell'SDK Google Mobile Ads per garantire che gli elementi degli annunci, ad esempio il pulsante di chiusura, vengano visualizzati nel posto giusto. Aggiorneremo le note di rilascio e questa pagina della documentazione non appena questa modifica sarà disponibile.