Anzeigen-Rendering für iPhone X

In diesem Leitfaden werden Best Practices für das Codieren von Apps vorgestellt, 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 veranschaulicht in einer Umgebung, die iOS 9 und höher sowie Xcode 9 und höher unterstützt. Problemumgehungen für frühere Versionen von iOS und Xcode werden ebenfalls erwähnt.

Storyboard/Interface Builder

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

Öffnen Sie die Interface Builder-Datei und klicken Sie auf die Ansicht des Ansichtscontrollers. Rechts sehen Sie die Optionen für das Interface Builder-Dokument. Aktivieren Sie Layout-Hilfslinien für den empfohlenen Bildbereich verwenden und stellen Sie sicher, dass Sie mindestens für iOS 9.0 und höher entwickeln.

Wir empfehlen, die Größe des Banners mit Breiten- und Höheneinschränkungen auf die erforderliche Größe zu beschränken.

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

Ebenso können Sie das Banner unten im empfohlenen Bildbereich ausrichten, indem Sie die Eigenschaft „Bottom“ von GAMBannerView auf den unteren Rand des empfohlenen Bildbereichs beschränken:

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

ViewController

Hier ist ein einfaches Code-Snippet für einen Ansichtscontroller, das die Mindestanforderungen erfüllt, um ein Banner in einer GAMBannerView anzuzeigen, 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 empfohlenen Bildbereichs ausrichten

Wenn Sie ein Banner mit voller Breite und links- oder rechtsbündiger Ausrichtung verwenden möchten, beschränken Sie den linken oder rechten Rand des Banners auf den linken oder rechten Rand des empfohlenen Bildbereichs und nicht auf den linken oder rechten Rand der übergeordneten Ansicht.

Wenn Sie Layout-Hilfslinien für den empfohlenen Bildbereich verwenden aktiviert haben, verwendet Interface Builder standardmäßig die Ränder des empfohlenen Bildbereichs, wenn Einschränkungen zur Ansicht hinzugefügt werden.

Unterstützung für iOS 8 und niedriger

Wenn Sie iOS 8 oder niedriger mit Interface Builder unterstützen möchten, deaktivieren Sie Layout-Hilfslinien für den empfohlenen Bildbereich verwenden für Ihre Interface Builder-Dateien und Storyboards.

Jetzt können Sie Einschränkungen für den unteren Rand der oberen Layout-Hilfslinie hinzufügen (anstatt für den oberen Rand des empfohlenen Bildbereichs):

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

Für Banner mit voller Breite (die im Querformat nur vom empfohlenen Bildbereich betroffen sind) sind diese Layout-Hilfslinien nicht vorhanden. Die sichere Option in Interface Builder besteht darin, die Einschränkungen für den linken und rechten Rand relativ zu den Rändern zu gestalten:

Dadurch wird der Rand des Banners etwas vom Rand der übergeordneten Ansicht/des empfohlenen Bildbereichs versetzt, 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-Version 7.0 und höher) wird gezeigt, wie Sie ein Banner so einschränken, dass es horizontal zentriert am unteren Rand des empfohlenen Bildbereichs platziert 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 genannten Methoden können problemlos verwendet werden, um Einschränkungen für den oberen Rand des empfohlenen Bildbereichs festzulegen. Dazu müssen Sie nur die verwendeten Attribute und Anker ändern.

Native Anzeigen

Wenn Ihre App native Anzeigen oben oder unten auf dem Bildschirm anpinnt, gelten für native Anzeigen dieselben Prinzipien wie für Banneranzeigen. Der Hauptunterschied besteht darin, dass Sie keine Einschränkungen für eine GAMBannerView hinzufügen müssen, sondern für GADNativeAppInstallAdView und GADNativeContentAdView (oder die enthaltende Ansicht für die Anzeige), um die Layout-Hilfslinien für den empfohlenen Bildbereich zu berücksichtigen. Für native Ansichten empfehlen wir, explizitere Größeneinschränkungen anzugeben.

Interstitial- und Anzeigen mit Prämie

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