iPhone X 廣告顯示

本指南將說明如何編寫應用程式程式碼,在 iPhone X 上正確顯示廣告。

必要條件

橫幅廣告必須置於「安全區域」中,以免遭到圓角、感應器區域 (俗稱「瀏海」區域) 和底部橫條遮蓋。本頁面提供範例,說明如何加上限制,讓橫幅廣告貼齊安全區域的頂部或底部。本文會示範支援 iOS 9 以上版本和 Xcode 9 以上版本的環境,如何使用分鏡腳本和程式輔助限制。此外,也會說明舊版 iOS 和 Xcode 的解決方法

分鏡腳本/介面建構器

如果應用程式使用介面建構器,請先確認已啟用「安全區域」版面配置指南。如要這麼做,您必須執行 Xcode 9 以上版本,並以 iOS 9 以上版本為目標。

開啟 Interface Builder 檔案,然後按一下檢視畫面控制器場景。右側會顯示「Interface Builder Document」選項。請勾選「Use Safe Area Layout Guides」(使用安全區域版面配置指南),並確保您建構的最低版本為 iOS 9.0 以上

建議您使用寬度和高度限制,將橫幅限制為所需大小。

現在,您可以將 GAMBannerView 的 Top 屬性限制為安全區域的頂端,讓橫幅廣告與安全區域的頂端對齊:

同樣地,您可以將 GAMBannerView 的 Bottom 屬性限制在安全區域底部,將橫幅對齊安全區域底部:

現在,您的限制條件應會類似下方螢幕截圖 (大小/位置可能有所不同):

ViewController

以下是簡單的檢視畫面控制器程式碼片段,可執行最低需求,在上述情節提要中設定的 GAMBannerView 顯示橫幅:

Swift

class ViewController: UIViewController {

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

  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(AdManagerRequest())
  }

}

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];
}

將橫幅對齊安全區域的邊緣

如要製作全寬、靠左或靠右對齊的橫幅,請將橫幅的左/右邊緣限制在「安全區域」的左/右邊緣,而非超級檢視區塊的左/右邊緣。

如果啟用「Use Safe Area Layout Guides」(使用安全區域版面配置指南),介面建構器預設會在對檢視區塊新增限制時,使用安全區域邊緣。

支援 iOS 8 以下版本

如要使用介面建構器支援 iOS 8 以下版本,請取消勾選介面建構器檔案和情節提要的「Use Safe Area Layout Guides」(使用安全區域版面配置指南)

現在您可以將限制加到頂端版面配置指南的底部 (而非安全區域的頂端):

此外,請在底部版面配置指南的頂端新增限制 (而非安全區域的底部):

如果是全螢幕寬度的橫幅 (只會受到橫向模式安全區域影響),則沒有這些版面配置輔助線。介面製作工具中的安全選項會讓左側和右側邊緣限制條件與邊界相關:

這樣一來,橫幅的邊緣就會稍微偏離超級檢視區塊/安全區域的邊緣,確保橫幅在 iPhone X 的橫向模式中不會遭到遮蔽。您也可以透過程式達成所需結果。

程式輔助

如果應用程式是以程式輔助方式建立橫幅廣告,您可以在程式碼中定義限制並放置橫幅廣告。這個範例 (適用於 iOS 7.0 以上版本) 說明如何限制橫幅廣告,使其在安全區域底部水平置中:

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    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(AdManagerRequest())
  }

  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

只要修改使用的屬性和錨點,即可輕鬆運用上述技巧,將限制條件設為安全區域頂端。

原生廣告

如果應用程式將原生廣告固定在畫面頂端或底部,原生廣告的適用原則與橫幅廣告相同。 主要差異在於您需要將限制新增至 GADNativeAppInstallAdViewGADNativeContentAdView (或廣告的容器檢視區塊),才能遵守安全區域版面配置指南,而不是將限制新增至 GAMBannerView。如果是原生檢視區塊,建議提供更明確的大小限制。

插頁式廣告和獎勵廣告

全螢幕廣告格式 (包括插頁式廣告和獎勵廣告) 會由 Google Mobile Ads SDK 顯示。Google Mobile Ads SDK 將進行更新,確保關閉按鈕等廣告元素顯示在正確位置。這項變更推出後,我們會更新版本資訊和這個說明文件頁面。