En esta guía, se muestran las prácticas recomendadas sobre cómo codificar tus apps para renderizar anuncios correctamente en el iPhone X.
Requisitos previos
- Completa el curso Comenzar.
Anuncios en forma de banner
Los anuncios de banner deben colocarse en el "Área segura" para evitar que los obstruyan las esquinas redondeadas, la carcasa del sensor y el indicador de la pantalla principal. En esta página, encontrarás ejemplos de cómo agregar restricciones para posicionar un banner en la parte superior o inferior del Área segura. Las restricciones programáticas y de guion gráfico se muestran en un entorno compatible con iOS 9 y versiones posteriores, y Xcode 9+. También se incluyen soluciones alternativas para versiones anteriores de iOS y Xcode.
Creador de guiones gráficos/interfaces
Si tu app usa Interface Builder, primero asegúrate de haber habilitado las guías de diseño del Área segura. Para hacerlo, debes ejecutar Xcode 9 o una versión posterior y tener como objetivo iOS 9 o una versión posterior.
Abre el archivo Interface Builder y haz clic en la escena del controlador de vista. A la derecha, verás las opciones del Documento del compilador de interfaces. Consulta Usar las guías de diseño del área segura y asegúrate de realizar compilaciones para iOS 9.0 y versiones posteriores como mínimo.
Te recomendamos restringir el banner al tamaño requerido usando restricciones de ancho y alto.
Ahora puedes alinear el banner con la parte superior del Área segura limitando la propiedad superior de GAMBannerView a la parte superior del área segura:
De manera similar, puedes alinear el banner con la parte inferior del área segura si restringes la propiedad inferior de GAMBannerView a la parte inferior del área segura:
Ahora, tus restricciones deberían ser similares a las de la siguiente captura de pantalla (el tamaño y el posicionamiento pueden variar):
ViewController
A continuación, se muestra un fragmento de código simple del controlador de vistas que hace el mínimo necesario para mostrar un banner en un GAMBannerView, como se configuró en el guion gráfico anterior:
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];
}
Cómo alinear los banners con el borde del Área segura
Si deseas tener un banner de ancho completo, alineado a la izquierda o derecha del banner, restringe el borde izquierdo o derecho del banner al borde izquierdo o derecho del Área segura y no al borde izquierdo o derecho de la supervista.
Si tienes habilitada la opción Usar guías de diseño de áreas seguras, el compilador de interfaces usará los bordes del área segura de forma predeterminada cuando agreguen restricciones a la vista.
Compatibilidad con iOS 8 y versiones anteriores
Si deseas admitir iOS 8 o versiones anteriores con Interface Builder, debes desmarcar la opción Use Safe Area Layout Guides para los archivos y guiones gráficos de Interface Builder.
Ahora puedes agregar restricciones a la parte inferior de la guía de diseño superior (en lugar de la parte superior del área segura):
Además, agrega restricciones a la parte superior de la guía de diseño inferior (en lugar de en la parte inferior del Área segura):
En el caso de los banners de ancho completo (solo se ven afectados por el Área segura en orientación horizontal), no existen estas guías de diseño. La opción segura en Interface Builder es hacer que las restricciones del borde izquierdo y derecho estén relacionadas con los márgenes:
Esto desplazará un poco el borde del banner respecto del borde de la Supervista o el Área segura, lo que garantiza que el banner no se oscurezca en la orientación horizontal en iPhone X. También puedes lograr el resultado deseado de manera programática.
Programática
Si tu app crea anuncios de banner de manera programática, puedes definir restricciones y posicionar el anuncio de banner en el código. En este ejemplo (para iOS 7.0 y versiones posteriores), se muestra cómo limitar un banner para que se centre horizontalmente en la parte inferior del Área segura:
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
Las técnicas anteriores se pueden usar con facilidad para restringir la parte superior del área segura modificando los atributos y las anclas usadas.
Anuncios nativos
Si tu app fija anuncios nativos en la parte superior o inferior de la pantalla, se aplican los mismos principios para los anuncios nativos que para los anuncios de banner.
La diferencia clave es que, en lugar de agregar restricciones a una GAMBannerView, deberás agregarlas a tu GADNativeAppInstallAdView y GADNativeContentAdView (o a la vista contenedora del anuncio) para respetar las guías de diseño de Área segura. Para las vistas nativas, recomendamos proporcionar restricciones de tamaño más explícitas.
Anuncios intersticiales y recompensados
El SDK de anuncios de Google para dispositivos móviles renderiza los formatos de anuncios de pantalla completa, incluidos los anuncios intersticiales y recompensados. Se actualizará el SDK de anuncios de Google para dispositivos móviles a fin de garantizar que los elementos del anuncio, como el botón para cerrar, se rendericen en el lugar correcto. Actualizaremos las notas de la versión y esta página de documentación cuando el cambio esté disponible.