Renderowanie reklam na iPhone’a X

Z tego przewodnika dowiesz się, jak kodować aplikacje, aby reklamy wyświetlały się prawidłowo na iPhonie X.

Wymagania wstępne

Banery reklamowe muszą być umieszczone w „bezpiecznym obszarze”, aby nie zasłaniały ich zaokrąglone rogi, obudowa czujnika i wskaźnik powrotu do ekranu początkowego. Na tej stronie znajdziesz przykłady dodawania ograniczeń, które pozwalają umieścić baner u góry lub u dołu bezpiecznego obszaru. Ograniczenia w storyboardzie i ograniczenia programowe są prezentowane w środowisku obsługującym iOS 9+ i Xcode 9+. Wskazujemy też obejścia dla wcześniejszych wersji iOS i Xcode.

Storyboard/Interface Builder

Jeśli Twoja aplikacja korzysta z Interface Buildera, najpierw włącz przewodniki układu bezpiecznego obszaru. Aby to zrobić, musisz używać Xcode 9+ i kierować reklamy na iOS 9+.

Otwórz plik Interface Buildera i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje Dokument Interface Buildera. Zaznacz Użyj przewodników układu bezpiecznego obszaru i upewnij się, że tworzysz aplikację na iOS 9.0 lub nowszy.

Zalecamy ograniczenie rozmiaru banera do wymaganego rozmiaru za pomocą ograniczeń szerokości i wysokości.

Teraz możesz wyrównać baner do górnej krawędzi bezpiecznego obszaru, ograniczając właściwość Top elementu GAMBannerView do górnej krawędzi bezpiecznego obszaru:

Podobnie możesz wyrównać baner do dolnej krawędzi bezpiecznego obszaru, ograniczając właściwość Bottom elementu GAMBannerView do dolnej krawędzi bezpiecznego obszaru:

Twoje ograniczenia powinny teraz wyglądać podobnie do tych na zrzucie ekranu poniżej (rozmiar i położenie mogą się różnić):

ViewController

Oto prosty fragment kodu kontrolera widoku, który wykonuje minimalne czynności potrzebne do wyświetlenia banera w elemencie GAMBannerView skonfigurowanym w storyboardzie powyżej:

Swift

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];
}

Wyrównywanie banerów do krawędzi bezpiecznego obszaru

Jeśli chcesz, aby baner o pełnej szerokości był wyrównany do lewej lub prawej krawędzi, ogranicz lewą lub prawą krawędź banera do lewej lub prawej krawędzi bezpiecznego obszaru, a nie do lewej lub prawej krawędzi widoku nadrzędnego.

Jeśli masz włączoną opcję Użyj przewodników układu bezpiecznego obszaru, Interface Builder domyślnie będzie używać krawędzi bezpiecznego obszaru podczas dodawania ograniczeń do widoku.

Obsługa iOS 8 i starszych wersji

Jeśli chcesz obsługiwać iOS 8 lub starsze wersje za pomocą Interface Buildera, odznacz opcję Użyj przewodników układu bezpiecznego obszaru w plikach Interface Buildera i storyboardach.

Teraz możesz dodać ograniczenia do dolnej krawędzi górnego przewodnika układu (zamiast do górnej krawędzi bezpiecznego obszaru):

Dodaj też ograniczenia do górnej krawędzi dolnego przewodnika układu (zamiast do dolnej krawędzi bezpiecznego obszaru):

W przypadku banerów o pełnej szerokości (na które bezpieczny obszar wpływa tylko w orientacji poziomej) te przewodniki układu nie istnieją. Bezpieczna opcja w Interface Builderze polega na ustawieniu ograniczeń lewej i prawej krawędzi względem marginesów:

Spowoduje to niewielkie odsunięcie krawędzi banera od krawędzi widoku nadrzędnego lub bezpiecznego obszaru, dzięki czemu baner nie będzie zasłonięty w orientacji poziomej na iPhonie X. Możesz też osiągnąć pożądany efekt programowo.

Automatyczna

Jeśli Twoja aplikacja tworzy banery reklamowe programowo, możesz zdefiniować ograniczenia i umieścić baner reklamowy w kodzie. Ten przykład (dla iOS w wersji 7.0 i nowszych) pokazuje, jak ograniczyć baner, aby był wyśrodkowany poziomo u dołu bezpiecznego obszaru:

Swift

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

Powyższe techniki można łatwo wykorzystać do ograniczenia banera do górnej krawędzi bezpiecznego obszaru, modyfikując używane atrybuty i punkty zakotwiczenia.

Reklamy natywne

Jeśli Twoja aplikacja przypina reklamy natywne do górnej lub dolnej krawędzi ekranu, obowiązują te same zasady co w przypadku banerów reklamowych. Kluczowa różnica polega na tym, że zamiast dodawać ograniczenia do elementu GAMBannerView, musisz dodać ograniczenia do elementu GADNativeAppInstallAdView i GADNativeContentAdView (lub do widoku zawierającego reklamę), aby uwzględnić przewodniki układu bezpiecznego obszaru. W przypadku widoków natywnych zalecamy podanie bardziej szczegółowych ograniczeń rozmiaru.

Reklamy pełnoekranowe i reklamy z nagrodą

Formaty reklam pełnoekranowych, w tym reklamy pełnoekranowe i reklamy z nagrodą, są renderowane przez Google Mobile Ads SDK. Zaktualizujemy pakiet Google Mobile Ads SDK SDK, aby elementy reklam, takie jak przycisk zamykania były renderowane w odpowiednim miejscu. Gdy ta zmiana będzie dostępna, zaktualizujemy informacje o wersji i tę stronę dokumentacji.