Anzeigen-Rendering auf iPhone X

In diesem Leitfaden werden Best Practices für das Programmieren von Apps beschrieben, damit Anzeigen auf dem iPhone X richtig gerendert werden.

Vorbereitung

Banneranzeigen müssen im empfohlenen Bildbereich platziert werden, damit sie nicht durch abgerundete Ecken, das Sensorgehäuse und die Startbildschirmanzeige verdeckt werden. Auf dieser Seite finden Sie Beispiele dafür, wie Sie Einschränkungen hinzufügen, um ein Banner oben oder unten im empfohlenen Bildbereich zu platzieren. Sowohl Storyboard- als auch programmatische Einschränkungen werden in einer Umgebung demonstriert, die iOS 9+ und Xcode 9+ unterstützt. Workarounds für frühere Versionen von iOS und Xcode werden ebenfalls beschrieben.

Storyboard-/Interface Builder

Wenn Ihre App Interface Builder verwendet, müssen Sie zuerst die Layout-Guides für den sicheren Bereich aktivieren. Dazu benötigen Sie Xcode 9 oder höher und iOS 9 oder höher.

Öffnen Sie Ihre Interface Builder-Datei und klicken Sie auf die Ansichtscontroller-Szene. Rechts werden die Optionen für Interface Builder Document angezeigt. Sehen Sie sich die Layout-Leitfäden für den sicheren Bereich an und achten Sie darauf, dass Sie mindestens für iOS 9.0 und höher entwickeln.

Wir empfehlen, die Bannergröße mit Breiten- und Höhenbeschränkungen zu begrenzen.

Sie können das Banner jetzt oben im empfohlenen Bildbereich ausrichten, indem Sie die Top-Eigenschaft von GAMBannerView auf den oberen Rand des empfohlenen Bildbereichs beschränken:

Sie können das Banner auch am unteren Rand des empfohlenen Bildbereichs ausrichten, indem Sie die Bottom-Eigenschaft von GAMBannerView auf den unteren Rand des empfohlenen Bildbereichs festlegen:

Ihre Einschränkungen sollten jetzt ähnlich wie im Screenshot unten aussehen (Größe/Positionierung können variieren):

ViewController

Hier ist ein einfaches Code-Snippet für einen View-Controller, das das Minimum enthält, das zum Anzeigen eines Banners in einem GAMBannerView erforderlich ist, wie oben im Storyboard konfiguriert:

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

Banner am Rand des sicheren Bereichs ausrichten

Wenn Sie ein Banner mit voller Breite und links- oder rechtsbündiger Ausrichtung verwenden möchten, müssen Sie die linke/rechte Kante des Banners an die linke/rechte Kante des Safe Area und nicht an die linke/rechte Kante der Superview anpassen.

Wenn Sie Use Safe Area Layout Guides aktiviert haben, verwendet Interface Builder standardmäßig die Ränder des sicheren Bereichs, wenn der Ansicht Einschränkungen hinzugefügt werden.

Unterstützung von iOS 8 und niedriger

Wenn Sie iOS 8 oder niedriger mit Interface Builder unterstützen möchten, sollten Sie die Option Use Safe Area Layout Guides (Layout-Guides für den sicheren Bereich verwenden) für Ihre Interface Builder-Dateien und Storyboards deaktivieren.

Sie können jetzt Einschränkungen unten im oberen Layout-Guide hinzufügen (anstatt oben im empfohlenen Bildbereich):

Fügen Sie außerdem Einschränkungen für den oberen Rand des unteren Layout-Guides hinzu (anstatt für den unteren Rand des empfohlenen Bildbereichs):

Für Banner in voller Breite, die nur im Querformat vom Sicherheitsbereich betroffen sind, gibt es diese Layoutrichtlinien nicht. Die sichere Option in Interface Builder besteht darin, die Einschränkungen für den linken und rechten Rand relativ zu den Rändern festzulegen:

Dadurch wird der Rand des Banners etwas vom Rand der Superview/des empfohlenen Bildbereichs entfernt, sodass das Banner im Querformat auf dem iPhone X nicht verdeckt wird. Sie können das gewünschte Ergebnis auch programmatisch erzielen.

Programmatic

Wenn Ihre App Banneranzeigen programmatisch erstellt, können Sie Einschränkungen definieren und die Banneranzeige im Code positionieren. In diesem Beispiel (für iOS 7.0 und höher) wird gezeigt, wie ein Banner so eingeschränkt wird, dass es horizontal unten im empfohlenen Bildbereich zentriert wird:

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

Die oben beschriebenen Techniken lassen sich ganz einfach anwenden, um die Anzeige auf den oberen Bereich des Safe Area zu beschränken. Dazu müssen Sie nur die verwendeten Attribute und Anker ändern.

Native Anzeigen

Wenn in Ihrer App native Anzeigen oben oder unten auf dem Bildschirm angepinnt werden, gelten für native Anzeigen dieselben Grundsätze wie für Banneranzeigen. Der Hauptunterschied besteht darin, dass Sie anstelle von Einschränkungen für ein GAMBannerView Einschränkungen für Ihr GADNativeAppInstallAdView und GADNativeContentAdView (oder die enthaltende Ansicht für die Anzeige) hinzufügen müssen, um die Layoutrichtlinien für den Safe Area einzuhalten. Für native Ansichten empfehlen wir, explizitere Größenbeschränkungen anzugeben.

Interstitial- und Anzeigen mit Prämie

Vollbildanzeigenformate wie Interstitials und Anzeigen mit Prämie werden vom Google Mobile Ads SDK gerendert. Das Google Mobile Ads SDK wird aktualisiert, damit Anzeigenelemente wie die Schaltfläche zum Schließen an der richtigen Stelle gerendert werden. Wir werden die Versionshinweise und diese Dokumentationsseite aktualisieren, sobald diese Änderung verfügbar ist.