Diese Seite wurde von der Cloud Translation API übersetzt.

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

Importieren Sie das Google Mobile Ads SDK Version 7.26.0 oder höher, entweder allein oder als Teil von Firebase.

Banneranzeigen

Banneranzeigen müssen im empfohlenen Bildbereich platziert werden, damit sie nicht durch abgerundete Kanten, das Sensorgehäuse und die Startbildschirmanzeige verdeckt werden. Auf dieser Seite finden Sie Beispiele dazu, wie Sie Einschränkungen hinzufügen, um ein Banner oben oder unten im empfohlenen Bildbereich zu platzieren.

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 Safe Area Layout Guides 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 GADBannerView 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 GADBannerView 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 GADBannerView anzuzeigen, wie im obigen Storyboard konfiguriert:

Swift

class ViewController: UIViewController {

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

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.rootViewController = self
    bannerView.load(GADRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

Banner am Rand des sicheren Bereichs ausrichten

Wenn Sie ein links oder rechts ausgerichtetes Banner haben möchten, 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.

Programmatic

Wenn in Ihrer App programmatisch Banneranzeigen erstellt werden, können Sie Einschränkungen definieren und die Banneranzeige im Code platzieren. In diesem Beispiel wird gezeigt, wie ein Banner horizontal unten im sicheren Bereich zentriert werden kann:

Swift

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.load(GADRequest())
  }

  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) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner];
  [self addBannerViewToView:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest 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.

Smart-Banner

Wenn Sie Smart Banner verwenden, insbesondere im Querformat, empfehlen wir, die Bannerränder mithilfe von Einschränkungen an den linken und rechten Rändern des sicheren Bereichs auszurichten.

Im Interface Builder wird dies bereits ab iOS 9 unterstützt. Aktivieren Sie dazu die Option Use Safe Area Layout Guides (Layout-Glieder für sicheren Bereich verwenden), wie oben beschrieben.

Im Code sollten Sie die Randeinschränkungen relativ zu den Layout-Richtlinien für den sicheren Bereich festlegen, sofern verfügbar. Hier ist ein Code-Snippet, mit dem der Ansicht eine Banneransicht hinzugefügt wird, die sich über die gesamte Breite der Ansicht erstreckt und am unteren Rand der Ansicht platziert wird:

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective-C

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

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 keine Einschränkungen für eine GADBannerView, sondern für die GADUnifiedNativeAdView (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, explizitere Größenbeschränkungen anzugeben.

Interstitial- und Anzeigen mit Prämie

Ab Version 7.26.0 unterstützt das Google Mobile Ads SDK Interstitial- und Anzeigenformate mit Prämie für das iPhone X vollständig.