本指南將說明如何編寫應用程式程式碼,以便在 iPhone X 上正確顯示廣告。
必要條件
橫幅廣告
橫幅廣告必須置於「安全區域」中,以免遭到圓角、感應器區域 (俗稱「瀏海」區域) 和底部橫條遮蓋。您可從本頁參考範例,瞭解如何加上限制來讓橫幅廣告貼齊安全區域的頂部或底部。在支援 iOS 9 以上版本和 Xcode 9 以上版本的環境中,會同時示範使用情境板和程式碼限制。此外,也會提供 iOS 和 Xcode 舊版的解決方法。
分鏡腳本/Interface Builder
如果您的應用程式使用 Interface Builder,請先確認您已啟用安全區域版面配置指南。如要執行此操作,您必須執行 Xcode 9 以上版本,並指定 iOS 9 以上版本。
開啟 Interface Builder 檔案,然後按一下 View Controller 情境。您會在右側看到「Interface Builder Document」選項。請勾選「Use Safe Area Layout Guides」,並確保您至少針對 iOS 9.0 以上版本進行建構。
建議您使用寬度和高度限制,將橫幅限制在所需大小。
現在,您可以將 GAMBannerView 的 Top 屬性限制為安全區域頂端,讓橫幅與安全區域頂端對齊:
同樣地,您也可以將 GAMBannerView 的 Bottom 屬性限制在安全區域的底部,讓橫幅廣告對齊安全區域的底部:
限制現在應類似於下方螢幕截圖 (大小/位置可能不同):
ViewController
以下是簡單的 View Controller 程式碼片段,可執行上述情節板中所需的最低作業,在 GAMBannerView
中顯示橫幅:
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 = "/21775744923/example/adaptive-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 = @"/21775744923/example/adaptive-banner"; self.bannerView.rootViewController = self; GAMRequest *request = [GAMRequest request]; [self.bannerView loadRequest:request]; }
將橫幅對齊安全區邊緣
如果您想要顯示全寬、左對齊或右對齊的橫幅,請將橫幅的左/右邊緣限制在安全區域的左/右邊緣,而非超級檢視畫面的左/右邊緣。
如果您已啟用「使用安全區域版面配置輔助線」,則在為檢視區塊新增限制時,介面建構工具預設會使用安全區域邊緣。
支援 iOS 8 以下版本
如果您想使用 Interface Builder 支援 iOS 8 以下版本,請取消勾選 Interface Builder 檔案和情節板的「Use Safe Area Layout Guides」。
您現在可以將限制新增至頂部版面配置指南的底部 (而非安全區域的頂部):
並在底部版面配置指南的頂端 (而非安全區域的底部) 新增限制:
對於全螢幕橫幅廣告 (僅受橫向模式的安全區域影響),這些版面配置輔助線不存在。Interface Builder 中的安全選項是讓左邊和右邊邊界限制相對於邊界:
這會使橫幅的邊緣與超級檢視區/安全區域的邊緣略有偏差,確保橫幅不會在 iPhone X 的橫向模式下遭到遮蔽。您也可以透過程式碼達到預期結果。
程式輔助
如果應用程式會以程式輔助方式建立橫幅廣告,您可以定義限制條件,並在程式碼中放置橫幅廣告。這個範例 (適用於 iOS 7.0 以上版本) 說明如何限制橫幅廣告在安全區域底部水平居中:
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 = "/21775744923/example/adaptive-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 = @"/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
您可以修改所用屬性和錨點,輕鬆運用上述技巧,將內容限制在安全區頂端。
原生廣告
如果應用程式將原生廣告固定在畫面頂端或底部,則原生廣告適用的規則與橫幅廣告相同。主要差異在於,您需要在 GADNativeAppInstallAdView
和 GADNativeContentAdView
(或廣告的容器檢視畫面) 中加入限制,而不是在 GAMBannerView
中加入限制,以便遵守安全區版面配置指南。針對原生檢視畫面,建議您提供更明確的大小限制。
插頁式廣告和獎勵廣告
全螢幕廣告格式 (包括插頁式廣告和獎勵廣告) 是由 Google Mobile Ads SDK 算繪。Google Mobile Ads SDK 將進行更新,確保關閉按鈕等廣告元素顯示在正確的位置。這項變更推出後,我們會更新版本資訊和這個說明文件頁面。