In diesem Leitfaden wird beschrieben, wie du deine Apps so codieren kannst, dass Anzeigen auf dem iPhone X korrekt gerendert werden.
Voraussetzungen
- Schließen Sie den Startleitfaden ab.
Banneranzeigen
Banneranzeigen müssen im Sicherheitsbereich platziert werden, damit sie nicht durch abgerundete Ecken, das Sensorgehäuse und die Startbildschirmanzeige verdeckt werden. Auf dieser Seite finden Sie Beispiele für das Hinzufügen von Einschränkungen, um ein Banner oben oder unten im Sicherheitsbereich zu positionieren. Sowohl Storyboard- als auch programmatische Einschränkungen werden in einer Umgebung dargestellt, die iOS 9 und höher und Xcode 9 und höher unterstützt. Problemumgehungen für frühere Versionen von iOS und Xcode sind ebenfalls aufgeführt.
Storyboard/Schnittstellenerstellung
Wenn Ihre Anwendung den Interface Builder verwendet, müssen Sie zuerst die Layoutleitfäden für den sicheren Bereich aktiviert haben. Dazu müssen Sie Xcode 9 oder höher ausführen und iOS 9 oder höher verwenden.
Öffnen Sie die Interface Builder-Datei und klicken Sie auf Ihre Controller-Ansicht. Die Optionen für Interface Builder Document werden auf der rechten Seite angezeigt. Lesen Sie die Informationen unter Use Safe Area Layout Guides (Sicherheitsbereiche verwenden) und entwickeln Sie Ihre App mindestens für iOS 9.0.
Wir empfehlen, das Banner mithilfe von Einschränkungen für Breite und Höhe auf die erforderliche Größe zu beschränken.
Jetzt können Sie das Banner am oberen Rand des sicheren Bereichs ausrichten, indem Sie die Top-Eigenschaft 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" von GAMBannerView auf den unteren Rand des sicheren Bereichs beschränken:
Ihre Einschränkungen sollten nun ähnlich wie im folgenden Screenshot aussehen (Größe/Positionierung kann variieren):
ViewController
Hier siehst du ein einfaches Code-Snippet für den Ansicht-Controller, das mindestens soweit erforderlich ist, um ein Banner in einem GAMBannerView einzublenden, wie es im obigen Storyboard konfiguriert wurde:
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 = "/6499/example/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 = @"/6499/example/banner";
self.bannerView.rootViewController = self;
GAMRequest *request = [GAMRequest request];
[self.bannerView loadRequest:request];
}
Banner am Rand des Sicherheitsbereichs ausrichten
Wenn Sie ein Banner mit voller Breite (links oder rechts ausgerichtet) verwenden möchten, halten Sie den linken/rechten Rand des Banners am linken/rechten Rand des Sicherheitsbereichs und nicht am linken oder rechten Rand der Superview ein.
Wenn Sie Layoutrichtlinien für den sicheren Bereich verwenden aktiviert haben, verwendet Interface Builder beim Hinzufügen von Einschränkungen zur Ansicht standardmäßig die Kanten des sicheren Bereichs.
Unterstützung von iOS 8 und niedriger
Wenn Sie den Interface Builder mit iOS 8 oder niedriger unterstützen möchten, sollten Sie die Option Use Safe Area Layout Guides (Layoutrichtlinien für sichere Bereiche verwenden) für Ihre Interface Builder-Dateien und Storyboards deaktivieren.
Jetzt können Sie unten im oberen Layoutleitfaden Einschränkungen hinzufügen (anstatt am oberen Rand des Sicherheitsbereichs):
Fügen Sie außerdem oben in der Layoutanleitung unten (anstatt am unteren Rand des Sicherheitsbereichs) Einschränkungen hinzu:
Für Banner in voller Breite (wird nur durch den sicheren Bereich im Querformat beeinflusst) gibt es diese Layout-Leitfäden 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 Überwachungs-/Sicherheitsbereiche entfernt. So wird sichergestellt, dass Ihr Banner auf dem iPhone X im Querformat 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 Banneranzeigen im Code positionieren. In diesem Beispiel (ab iOS-Version 7.0) wird gezeigt, wie Sie festlegen, dass ein Banner horizontal am unteren Rand des Sicherheitsbereichs zentriert werden soll:
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 = "/6499/example/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 = @"/6499/example/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 Techniken können einfach verwendet werden, um den oberen Bereich des sicheren Bereichs einzuschränken, indem Sie 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 Prinzipien wie für Banneranzeigen.
Der Hauptunterschied besteht darin, dass Sie keine Einschränkungen zu einem GAMBannerView hinzufügen, sondern zu den GADNativeAppInstallAdView und GADNativeContentAdView (oder der Hauptansicht für die Anzeige) Einschränkungen hinzufügen müssen, um die Layout-Leitfäden für den sicheren Bereich zu berücksichtigen. Für native Ansichten empfehlen wir, explizitere Größenbeschränkungen anzugeben.
Interstitial-Anzeigen und Anzeigen mit Prämie
Vollbildanzeigenformate, einschließlich Interstitial-Anzeigen und Anzeigen mit Prämie, werden vom Google Mobile Ads SDK gerendert. Das Google Mobile Ads SDK wird aktualisiert, damit Anzeigenelemente wie die Schließen-Schaltfläche an der richtigen Stelle gerendert werden. Sobald diese Änderung verfügbar ist, werden die Versionshinweise und diese Dokumentationsseite aktualisiert.