W tym przewodniku przedstawiamy sprawdzone metody kodowania aplikacji, by prawidłowo renderować reklamy na iPhonie X.
Wymagania wstępne
- Zaimportuj pakiet SDK do reklam mobilnych Google w wersji 7.26.0 lub nowszej – samodzielnie lub w ramach Firebase.
Banery reklamowe
Banery reklamowe należy umieszczać w „Bezpiecznym obszarze”, aby nie były zasłonięte zaokrąglonymi rogami, obudową czujnika i wskaźnikiem strony głównej. Na tej stronie znajdziesz przykłady dodawania ograniczeń, które pozwalają umieścić baner na górze lub na dole bezpiecznego obszaru.
Tworzenie scenorysu/interfejsu
Jeśli Twoja aplikacja korzysta z Kreatora interfejsów, najpierw upewnij się, że masz włączone przewodniki po układzie w bezpiecznym obszarze. W tym celu musisz korzystać z Xcode 9 lub nowszego i kierować reklamy na iOS 9 lub nowszy.
Otwórz plik Interface Builder i kliknij scenę kontrolera widoku. Po prawej stronie zobaczysz opcje Dokumentu konstruktora interfejsu. Zaznacz pole Używaj przewodników po układzie bezpiecznego obszaru i upewnij się, że tworzysz co najmniej iOS 9.0 i nowsze.
Zalecamy ograniczenie rozmiaru banera do wymaganego rozmiaru za pomocą ograniczeń szerokości i wysokości.
Teraz możesz wyrównać baner z górną częścią bezpiecznego obszaru, ograniczając właściwość klasy Top GADBannerView do górnej części bezpiecznego obszaru:
Podobnie możesz wyrównać baner do dolnej krawędzi bezpiecznego obszaru, ograniczając właściwość Dół obiektu GADBannerView do dolnej krawędzi bezpiecznego obszaru:
Ograniczenia powinny teraz wyglądać podobnie do tego na zrzucie ekranu poniżej (rozmiary i położenie mogą się różnić):
ViewController
Oto prosty fragment kodu kontrolera widoku, który spełnia podstawowe wymagania do wyświetlenia banera w: GADBannerView zgodnie ze swoją konfiguracją w powyższym scenorysie:
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];
}
Dopasowujemy banery do krawędzi bezpiecznego obszaru
Jeśli chcesz, by baner został wyrównany do lewej lub do prawej, umieść go lewą/prawą krawędź bezpiecznego obszaru, a nie lewą/prawą krawędź widoku superwidoku.
Jeśli włączysz opcję Używaj prowadnic do bezpiecznego obszaru, Kreator interfejsów domyślnie użyje krawędzi bezpiecznego obszaru podczas dodawania ograniczeń do widoku.
Automatyczna
Jeśli Twoja aplikacja automatycznie tworzy banery reklamowe, możesz zdefiniować ograniczenia i ustalić pozycję banera reklamowego w kodzie. Ten przykład pokazuje, jak zablokować baner wyśrodkowany w poziomie u dołu bezpiecznego obszaru:
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
Opisane powyżej metody można łatwo wykorzystać do ograniczenia górnej części bezpiecznego obszaru przez zmianę użytych atrybutów i kotwic.
Banery inteligentne
Jeśli korzystasz z banerów inteligentnych, zwłaszcza w orientacji poziomej, zalecamy skorzystanie z ograniczeń, aby wyrównać krawędzie banera do lewej i prawej krawędzi bezpiecznego obszaru.
W kreatorze interfejsów ta funkcja jest obsługiwana w iOS 9. W tym celu zaznacz opcję Użyj prowadnic do bezpiecznego układu zgodnie z opisem powyżej.
Jeśli to możliwe, ograniczenia krawędzi w kodzie powinny być ustawione względem prowadnic względem bezpiecznego obszaru. Oto fragment kodu, który dodaje widok banera i ogranicza widok do dołu o pełnej szerokości:
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]];
}
Reklamy natywne
Jeśli aplikacja przypina reklamy natywne u góry lub u dołu ekranu, obowiązują te same zasady dotyczące reklam natywnych, co w przypadku banerów reklamowych.
Główna różnica polega na tym, że zamiast dodawać ograniczenia do elementu GADBannerView, musisz dodać ograniczenia do elementu GADUnifiedNativeAdView (lub widoku nadrzędnego reklamy) zgodnie z instrukcjami układu bezpiecznego obszaru. W przypadku widoków natywnych zalecamy konkretne ograniczenia rozmiaru.
Reklamy pełnoekranowe i reklamy z nagrodą
Od wersji 7.26.0 pakiet SDK do reklam mobilnych Google w pełni obsługuje formaty reklam pełnoekranowych i reklam z nagrodą na iPhone'a X.