Este guia demonstra as práticas recomendadas para programar seus apps para renderizar anúncios corretamente no iPhone X.
Pré-requisitos
- Importe a versão 7.26.0 ou mais recente do SDK dos anúncios para dispositivos móveis do Google: sozinho ou como parte do Firebase.
Anúncios de banner
Os anúncios de banner precisam ser colocados "Seguro Área" para evitar que cantos arredondados, a cobertura do sensor e o Home indicador. Nesta página, você encontrará exemplos de como adicionar restrições posicionar um banner na parte superior ou inferior da área segura.
Criador de storyboards/interfaces
Se seu aplicativo usa o Interface Builder, primeiro, verifique se você ativou a área segura guias de layout. Para fazer isso, você precisa executar o Xcode 9 ou mais recente e segmentar o iOS 9 ou mais recente.
Abra o arquivo do Interface Builder e clique na cena do controlador de visualização. Você verá as opções de Interface Builder Document (Documento do Criador de interface) à direita. Marque Usar Guias de layout da área segura e confira se você está criando para o iOS 9.0 ou mais recente. mínimo.
Recomendamos que você restrinja o banner ao tamanho necessário usando largura e restrições de altura.
Agora é possível alinhar o banner com a parte superior da área segura restringindo Propriedade superior de GADBannerView na parte superior da área segura:
Da mesma forma, você pode alinhar o banner à parte inferior da área segura restringir a propriedade Bottom de GADBannerView à parte inferior do área:
Agora, suas restrições serão parecidas com a captura de tela abaixo (o tamanho/posicionamento podem variar):
ViewController
Aqui está um snippet de código simples do controlador de visualizações que faz o mínimo necessário para
Mostre um banner em uma GADBannerView, conforme configurado no storyboard acima:
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];
}
Alinhar os banners à borda da área segura
Se você quiser alinhar um banner à esquerda ou à direita, restrinja a borda esquerda/direita do banner para a borda esquerda/direita da área segura e não a extremidade esquerda/direita da visualização.
Se a opção Usar guias de layout da área segura estiver ativada, o criador de interface o padrão é usar as bordas da área segura ao adicionar restrições à visualização.
Programática
Se seu app cria anúncios de banner de forma programática, é possível definir restrições e posicionar o anúncio de banner no código. Este exemplo mostra como restringir um banner deve estar centralizada horizontalmente na parte inferior da área segura:
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
É fácil usar as técnicas acima para restringir o código área modificando os atributos e âncoras usados.
Banners inteligentes
Se você estiver usando banners inteligentes, principalmente no modo paisagem, recomendamos use restrições para alinhar as bordas do banner às bordas esquerda e direita do uma área segura.
No criador de interfaces, isso é suportado desde o iOS 9 ao verificar o Opção Usar guias de layout da área segura conforme descrito acima.
No código, é preciso estabelecer as restrições de borda em relação à área segura guias de layout, quando disponíveis. Este é um snippet de código que adiciona uma visualização de banner à visualização e se restringe à parte inferior da visualização, com largura total:
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]];
}
Anúncios nativos
Se seu aplicativo fixar anúncios nativos na parte superior ou inferior da tela, o mesmo
se aplicam aos anúncios nativos e aos anúncios de banner.
A principal diferença é que, em vez de adicionar restrições a uma GADBannerView, você vai
precisa adicionar restrições à GADUnifiedNativeAdView (ou à visualização que a contém
para o anúncio) para respeitar as guias de layout da área segura. Para visualizações nativas
recomendamos fornecer restrições de tamanho mais explícitas.
Anúncios intersticiais e premiados
A partir da versão 7.26.0, o SDK dos anúncios para dispositivos móveis do Google é totalmente compatível com intersticiais e formatos de anúncios premiados para o iPhone X.