Questa guida illustra le best practice su come codificare le app per visualizzare correttamente gli annunci su iPhone X.
Prerequisiti
- Importa l'SDK Google Mobile Ads versione 7.26.0 o successive, da solo o all'interno di Firebase.
Annunci banner
Gli annunci banner devono essere posizionati nell'"area di sicurezza" per evitare di essere oscurati da angoli arrotondati, alloggiamento del sensore e indicatore di casa. In questa pagina troverai esempi su 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 innanzitutto di aver attivato le linee di layout per le aree di sicurezza. Per farlo, devi utilizzare Xcode 9 o versioni successive e scegliere come target iOS 9 o versioni successive.
Apri il file di Interface Builder e fai clic sulla scena del controller della vista. Sul lato destro vedrai le opzioni del Documento Interface Builder. Seleziona Utilizza linee guida per il layout dell'area di sicurezza e assicurati di eseguire la compilazione per iOS 9.0 e versioni successive almeno.
Ti consigliamo di limitare il banner alle dimensioni richieste utilizzando i vincoli di larghezza e altezza.
Ora puoi allineare il banner alla parte superiore dell'area di sicurezza vincolando la proprietà Top di GADBannerView alla parte superiore dell'area di sicurezza:
Analogamente, puoi allineare il banner alla parte inferiore dell'area di sicurezza vincolando la proprietà Bottom di GADBannerView alla parte inferiore dell'area di sicurezza:
Ora i vincoli dovrebbero essere simili allo screenshot di seguito (le dimensioni/il posizionamento possono variare):
ViewController
Ecco un semplice snippet di codice del controller della vista che esegue il minimo necessario 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 del superview.
Se hai attivato l'opzione Utilizza guide di layout per le aree di sicurezza, lo strumento di creazione di interfacce utilizzerà per impostazione predefinita i bordi dell'area di sicurezza quando aggiungi vincoli alla vista.
Pubblicità programmatica
Se la tua 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 riportate sopra possono essere facilmente utilizzate per limitare l'area di sicurezza alla parte superiore modificando gli attributi e le ancore utilizzati.
Banner intelligenti
Se utilizzi banner intelligenti, in particolare in formato orizzontale, ti consigliamo di utilizzare i vincoli per allineare i bordi del banner ai bordi sinistro e destro dell'area di sicurezza.
In Interface Builder, questa funzionalità è supportata a partire da iOS 9 se selezioni l'opzione Usa guide di layout per aree di sicurezza come descritto sopra.
Nel codice, devi impostare i vincoli relativi ai bordi in base alle linee guida di layout dell'area di sicurezza, se disponibili. Ecco uno snippet di codice che aggiunge una vista banner alla vista e la vincola alla parte inferiore della vista, 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 fissa gli annunci nativi nella parte superiore o inferiore della schermata, per questi annunci valgono gli stessi principi degli annunci banner.
La differenza principale è che, anziché aggiungere vincoli a un GADBannerView, devi aggiungere vincoli al GADUnifiedNativeAdView (o alla vista contenente per l'annuncio) per rispettare le linee guida per il layout dell'area di sicurezza. Per le visualizzazioni native, consigliamo di fornire vincoli 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.