Рендеринг рекламы iPhone X

В этом руководстве представлены лучшие практики по разработке программного обеспечения для корректного отображения рекламы в ваших приложениях на 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 нижним краем безопасной области:

Теперь ваши ограничения должны выглядеть примерно так, как на скриншоте ниже (размеры/положение могут отличаться):

ViewController

Вот простой фрагмент кода контроллера представления, который выполняет минимально необходимые действия для отображения баннера в GAMBannerView , как это настроено в раскадровке выше:

Быстрый 

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(AdManagerRequest())
  }

}

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 = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

Размещение баннеров по краю безопасной зоны.

Если вы хотите разместить баннер во всю ширину экрана, выровненный по левому или правому краю, ограничьте левый/правый край баннера левым/правым краем безопасной области, а не левым/правым краем родительского окна.

Если у вас включена опция «Использовать направляющие безопасной области» , то при добавлении ограничений к представлению конструктор интерфейсов по умолчанию будет использовать края безопасной области.

Поддержка iOS 8 и более ранних версий.

Если вы хотите использовать Interface Builder для поддержки iOS 8 или более ранних версий, снимите флажок «Использовать направляющие безопасной области компоновки» для файлов Interface Builder и раскадровок.

Теперь вы можете добавлять ограничения в нижнюю часть верхней направляющей макета (вместо верхней части безопасной зоны):

Также добавьте ограничения в верхнюю часть нижнего направляющего элемента компоновки (вместо нижней части безопасной зоны):

Для баннеров во всю ширину (на которые влияет параметр «Безопасная область» только в альбомной ориентации) эти направляющие для компоновки отсутствуют. Безопасный вариант в Interface Builder — это установка ограничений левого и правого края относительно полей:

Это немного сместит край баннера от края области просмотра/безопасной зоны, гарантируя, что ваш баннер не будет закрыт в альбомной ориентации на iPhone X. Вы также можете добиться желаемого результата программным способом.

Программная

Если ваше приложение создает баннерную рекламу программным способом, вы можете определить ограничения и разместить баннерную рекламу в коде. Этот пример (для iOS версии 7.0 и выше) показывает, как закрепить баннер так, чтобы он был центрирован по горизонтали внизу безопасной области:

Быстрый 

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(AdManagerRequest())
  }

  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 = @"/21775744923/example/adaptive-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 SDK, чтобы гарантировать правильное отображение таких элементов рекламы, как кнопка закрытия. Мы обновим примечания к выпуску и эту страницу документации, как только это изменение станет доступно.