W tym przewodniku przedstawiamy sprawdzone metody kodowania aplikacji w taki sposób, aby prawidłowo renderować reklamy na iPhonie X.
Wymagania wstępne
- Wykonaj czynności opisane w sekcji Pierwsze kroki.
Banery reklamowe
Banery reklamowe muszą być umieszczone w „bezpiecznym obszarze”, aby nie były zasłonięte zaokrąglonymi rogami, obudową czujnika i wskaźnikiem ekranu głównego. Na tej stronie znajdziesz przykłady tego, jak dodać ograniczenia, by umieścić baner na górze lub na dole bezpiecznego obszaru. Ograniczenia dotyczące scenorysu i automatyzacji są przedstawione w środowisku obsługującym iOS w wersji 9 lub nowszej i Xcode 9 lub nowszej. Wymienione są również obejścia we wcześniejszych wersjach iOS i Xcode.
Kreator scenorysów/interfejsów
Jeśli Twoja aplikacja korzysta z Kreatora interfejsów, najpierw upewnij się, że masz włączone przewodniki po układzie bezpiecznego obszaru. W tym celu musisz korzystać z Xcode 9 lub nowszej wersji i kierować reklamy na iOS 9 lub nowszy.
Otwórz plik konstruktora interfejsów i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje Interface Builder Document. Zaznacz opcję Używaj prowadnic do bezpiecznego układu przestrzeni i upewnij się, że tworzysz kompilację co najmniej na iOS 9.0 i nowsze wersje.
Zalecamy ograniczenie rozmiaru banera do wymaganego rozmiaru za pomocą ograniczeń szerokości i wysokości.
Teraz możesz go wyrównać do górnej części bezpiecznego obszaru, ograniczając właściwość Top GAMBannerView do górnej części bezpiecznego obszaru:
I podobnie, baner można wyrównać do dolnej krawędzi bezpiecznego obszaru, umieszczając właściwość dolną w widoku GAMBannerView w dolnej części bezpiecznego obszaru:
Ograniczenia powinny teraz wyglądać podobnie do tego na zrzucie ekranu poniżej (rozmiary i pozycjonowanie mogą się różnić):
ViewController
Oto prosty fragment kodu kontrolera widoku, który spełnia minimum potrzebne do wyświetlenia banera w obiekcie GAMBannerView
(zgodnie z konfiguracją powyżej):
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]; }
dopasowując banery do krawędzi bezpiecznego obszaru.
Baner o pełnej szerokości, wyrównanym do lewej lub prawej ogranicz lewą/prawą krawędź bezpiecznego obszaru, a nie lewą/prawą krawędź widoku superwidoku.
Jeśli włączysz funkcję Używaj prowadnic bezpiecznego układu, kreator interfejsów domyślnie użyje krawędzi bezpiecznego obszaru podczas dodawania ograniczeń do widoku.
Obsługa systemu iOS 8 i starszych wersji
Jeśli chcesz umożliwić obsługę systemu iOS 8 lub starszego za pomocą Kreatora interfejsów, odznacz opcję Użyj bezpiecznego układu przewodnika w przypadku plików i scenorysów utworzonych w narzędziu do tworzenia interfejsów.
Teraz możesz dodawać ograniczenia na dole górnego przewodnika po układzie (zamiast na górze bezpiecznego obszaru):
Dodaj też ograniczenia na górze dolnego przewodnika po układzie (a nie na dole bezpiecznego obszaru):
W przypadku banerów o pełnej szerokości (tylko w przypadku bezpiecznego obszaru w orientacji poziomej) te przewodniki dotyczące układu nie są dostępne. Bezpieczną opcją w Kreatorze interfejsów jest ustawienie ograniczeń lewej i prawej krawędzi względem marginesów:
Spowoduje to odsunięcie krawędzi banera od krawędzi widoku superwidoku/bezpiecznego obszaru, dzięki czemu baner na iPhonie X nie będzie zasłonięty w orientacji poziomej. Możesz też osiągnąć pożądany efekt automatycznie.
Automatyczna
Jeśli Twoja aplikacja automatycznie tworzy banery reklamowe, możesz określić ograniczenia i ustalić ich pozycję w kodzie. Ten przykład (na iOS w wersji 7.0 i nowszych) pokazuje, jak zablokować baner, aby był wyśrodkowany w poziomie u dołu bezpiecznego obszaru:
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
Opisane wyżej techniki pozwalają łatwo ograniczyć się do górnej części bezpiecznego obszaru, modyfikując używane atrybuty i kotwice.
Reklamy natywne
Jeśli aplikacja przypina reklamy natywne u góry lub u dołu ekranu, obowiązują te same zasady co w przypadku banerów reklamowych.
Główna różnica polega na tym, że nie musisz dodawać ograniczeń do elementu GAMBannerView
. Musisz je dodać do elementów GADNativeAppInstallAdView
i GADNativeContentAdView
(lub do widoku zawierającego reklamę), zgodnie z wytycznymi dotyczącymi układu bezpiecznego obszaru. W przypadku widoków natywnych zalecamy
określenie wyraźnie ograniczeń rozmiaru.
Reklamy pełnoekranowe i reklamy z nagrodą
Formaty reklam pełnoekranowych, w tym reklamy pełnoekranowe i reklamy z nagrodą, są renderowane przez pakiet SDK do reklam mobilnych Google. W ramach pakietu SDK do reklam mobilnych Google wprowadzimy aktualizację, dzięki której elementy reklamy, takie jak przycisk zamykania, będą renderowane we właściwym miejscu. Gdy zmiana będzie dostępna, zaktualizujemy informacje o wersji i tę stronę dokumentacji.