Anzeigen-Rendering auf iPhone X

In diesem Leitfaden werden Best Practices für die Programmierung Ihrer Apps beschrieben, damit Anzeigen auf dem iPhone X korrekt gerendert werden.

Vorbereitung

Banneranzeigen müssen in einem empfohlenen Bildbereich platziert werden, damit sie nicht durch abgerundete Kanten, 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 höher sowie Xcode 9 und höher unterstützt. Umgehungen für frühere Versionen von iOS und Xcode werden ebenfalls erwähnt.

Storyboard/Interface Builder

Wenn Sie in Ihrer App Interface Builder verwenden, müssen Sie zuerst die Layout-Glieder für den sicheren Bereich aktivieren. Dazu müssen Sie Xcode 9 oder höher verwenden und Ihre App auf iOS 9 oder höher ausrichten.

Öffnen Sie die Interface Builder-Datei und klicken Sie auf die View Controller-Szene. Auf der rechten Seite sehen Sie die Optionen für das Interface Builder-Dokument. Aktivieren Sie die Option Layout-Leitlinien für sichere Bereiche verwenden und achten Sie darauf, dass Sie Ihr Build mindestens für iOS 9.0 und höher erstellen.

Wir empfehlen, das Banner mithilfe von Einschränkungen für Breite und Höhe auf die erforderliche Größe zu begrenzen.

Jetzt können Sie das Banner oben im sicheren Bereich ausrichten, indem Sie die Eigenschaft „Top“ der GAMBannerView auf den oberen Rand des sicheren Bereichs beschränken:

Ebenso können Sie das Banner am unteren Rand des sicheren Bereichs ausrichten, indem Sie die Eigenschaft „Bottom“ der GAMBannerView auf den unteren Rand des sicheren Bereichs beschränken:

Ihre Einschränkungen sollten jetzt in etwa so aussehen wie im Screenshot unten (Größe und Position können variieren):

ViewController

Hier ist ein einfaches Code-Snippet für den View Controller, das das Minimum bietet, um ein Banner in einer GAMBannerView anzuzeigen, wie im obigen Storyboard konfiguriert:

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 = "/21775744923/example/adaptive-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 = @"/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 in voller Breite haben möchten, das links oder rechts ausgerichtet ist, müssen Sie den linken bzw. rechten Rand des Banners an den linken bzw. rechten Rand des sicheren Bereichs anpassen und nicht an den linken bzw. rechten Rand des Superview.

Wenn Sie Layout-Glieder für sicheren Bereich verwenden aktiviert haben, werden im Interface Builder standardmäßig die Ränder des sicheren Bereichs verwendet, wenn Sie der Ansicht Einschränkungen hinzufügen.

Unterstützung von iOS 8 und niedriger

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

Sie können jetzt Einschränkungen am unteren Ende der oberen Layoutanleitung hinzufügen (nicht mehr oben im sicheren Bereich):

Fügen Sie auch Einschränkungen oben im unteren Layout-Guide hinzu (nicht unten im sicheren Bereich):

Für Banner in voller Breite (die nur im Querformat vom Sicherheitsbereich betroffen sind) gibt es diese Layout-Leitfäden nicht. Die sichere Option im 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 des Superview-Bildschirms bzw. des empfohlenen Bildbereichs abweichen. So wird verhindert, dass das Banner auf dem iPhone X im Querformat verdeckt wird. Sie können das gewünschte Ergebnis auch programmatisch erzielen.

Programmatic

Wenn in Ihrer App programmatisch Banneranzeigen erstellt werden, können Sie Einschränkungen definieren und die Banneranzeige im Code platzieren. In diesem Beispiel (für iOS-Version 7.0 und höher) wird gezeigt, wie ein Banner horizontal unten im sicheren Bereich zentriert werden kann:

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 = "/21775744923/example/adaptive-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 = @"/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

Mit den oben beschriebenen Methoden können Sie die Begrenzung ganz einfach auf den oberen Bereich des sicheren Bereichs festlegen, indem Sie die verwendeten Attribute und Anker ändern.

Native Anzeigen

Wenn in Ihrer App native Anzeigen oben oder unten auf dem Bildschirm verankert sind, gelten für native Anzeigen dieselben Grundsätze wie für Banneranzeigen. Der Hauptunterschied besteht darin, dass Sie statt einer GAMBannerView Einschränkungen für GADNativeAppInstallAdView und GADNativeContentAdView (oder die enthaltene Ansicht für die Anzeige) hinzufügen müssen, um die Layoutrichtlinien für den sicheren Bereich einzuhalten. Bei nativen Ansichten empfehlen wir, genauere Größenbeschränkungen anzugeben.

Interstitial- und Anzeigen mit Prämie

Vollbildanzeigen, einschließlich Interstitial- 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 „Schließen“ an der richtigen Stelle gerendert werden. Wir aktualisieren die Versionshinweise und diese Dokumentationsseite, sobald diese Änderung verfügbar ist.