В этом руководстве демонстрируются лучшие практики написания кода приложений для правильного отображения рекламы на iPhone X.
Предварительные условия
- Полное начало работы .
Рекламные баннеры
Рекламные баннеры необходимо размещать в «Безопасной зоне» , чтобы их не закрывали закругленные углы, корпус датчика и индикатор «Домой». На этой странице вы найдете примеры того, как добавить ограничения для размещения баннера вверху или внизу безопасной области. Как раскадровка, так и программные ограничения демонстрируются в среде, поддерживающей iOS 9+ и Xcode 9+. Также отмечены обходные пути для более ранних версий iOS и Xcode.
Раскадровка/построитель интерфейсов
Если ваше приложение использует Interface Builder, сначала убедитесь, что вы включили направляющие макета безопасной области. Для этого вам необходимо запустить Xcode 9+ и настроить iOS 9+.
Откройте файл Interface Builder и щелкните сцену контроллера представления. Справа вы увидите параметры документа Interface Builder . Установите флажок «Использовать руководства по макету безопасной зоны» и убедитесь, что вы создаете как минимум iOS 9.0 и более поздних версий .
Мы рекомендуем ограничить баннер необходимым размером, используя ограничения по ширине и высоте.
Теперь вы можете выровнять баннер по верхней части безопасной области, ограничив свойство Top GAMBannerView верхней частью безопасной области:
Аналогичным образом вы можете выровнять баннер по нижней части безопасной области, ограничив свойство Bottom GAMBannerView нижней частью безопасной области:
Ваши ограничения теперь должны выглядеть примерно так, как показано на скриншоте ниже (размер/расположение может варьироваться):
Вьюконтроллер
Вот простой фрагмент кода контроллера представления, который выполняет минимум, необходимый для отображения баннера в GAMBannerView , как настроено в раскадровке выше:
Быстрый
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())
}
}
Цель-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];
}
Выравнивание баннеров по краю безопасной зоны
Если вы хотите иметь баннер во всю ширину, с выравниванием по левому или правому краю, ограничьте левый/правый край баннера левым/правым краем безопасной области, а не левым/правым краем суперпредставления.
Если у вас включен параметр «Использовать направляющие макета безопасной области» , построитель интерфейса по умолчанию будет использовать края безопасной области при добавлении ограничений в представление.
Поддержка iOS 8 и ниже
Если вы хотите поддерживать iOS 8 или более раннюю версию с помощью Interface Builder, вам следует снять флажок «Использовать руководства по макету безопасной области» для файлов и раскадровки Interface Builder.
Теперь вы можете добавить ограничения в нижнюю часть верхней направляющей макета (вместо верхней части безопасной зоны):
Также добавьте ограничения в верхнюю часть нижней направляющей макета (вместо нижней части безопасной зоны):
Для полноширинных баннеров (на которые действует только безопасная зона в альбомной ориентации) эти руководства по макету не существуют. Безопасный вариант в Interface Builder — установить ограничения левого и правого края относительно полей:
Это немного сместит край баннера от края суперпредставления/безопасной области, гарантируя, что ваш баннер не будет скрыт в альбомной ориентации на iPhone X. Вы также можете добиться желаемого результата программно.
Программный
Если ваше приложение создает рекламные баннеры программным способом, вы можете определить ограничения и разместить баннерную рекламу в коде. В этом примере (для iOS версии 7.0 и выше) показано, как ограничить горизонтальное центрирование баннера в нижней части безопасной области:
Быстрый
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))
}
}
Цель-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
Описанные выше методы можно легко использовать для ограничения верхней части безопасной области путем изменения используемых атрибутов и привязок.
Нативная реклама
Если ваше приложение закрепляет нативную рекламу вверху или внизу экрана, к нативной рекламе применяются те же принципы, что и к баннерной рекламе . Ключевое отличие заключается в том, что вместо добавления ограничений в GAMBannerView вам нужно будет добавить ограничения в GADNativeAppInstallAdView и GADNativeContentAdView (или содержащее представление для объявления), чтобы соблюдать рекомендации по макету безопасной зоны. Для собственных представлений мы рекомендуем предоставить более явные ограничения размера.
Межстраничная реклама и реклама с вознаграждением
Полноэкранные форматы рекламы, включая межстраничные объявления и объявления с вознаграждением, обрабатываются с помощью Google Mobile Ads SDK. В Google Mobile Ads SDK будет обновлено, чтобы элементы объявления, такие как кнопка закрытия, отображались в нужном месте. Мы обновим примечания к выпуску и эту страницу документации, когда это изменение станет доступно.