Hiển thị quảng cáo trên iPhone X

Hướng dẫn này minh hoạ các phương pháp hay nhất về cách lập trình ứng dụng để hiển thị quảng cáo một cách chính xác trên iPhone X.

Điều kiện tiên quyết

Quảng cáo biểu ngữ phải được đặt trong "Khu vực an toàn" để tránh bị che khuất bởi các góc bo tròn, vỏ cảm biến và chỉ báo Trang chủ. Trên trang này, bạn sẽ thấy các ví dụ về cách thêm điều kiện ràng buộc để đặt một biểu ngữ ở đầu hoặc cuối Vùng an toàn. Cả ràng buộc trong bảng phân cảnh và ràng buộc có lập trình đều được minh hoạ trong một môi trường hỗ trợ iOS 9 trở lên và Xcode 9 trở lên. Các giải pháp cho các phiên bản cũ của iOS và Xcode cũng được lưu ý.

Trình tạo bảng phân cảnh/giao diện

Nếu ứng dụng của bạn dùng Interface Builder, trước tiên, hãy đảm bảo bạn đã bật hướng dẫn đặt bố cục cho Vùng an toàn. Để làm được việc này, bạn cần chạy Xcode 9 trở lên và nhắm đến iOS 9 trở lên.

Mở tệp Interface Builder rồi nhấp vào cảnh bộ điều khiển chế độ xem. Bạn sẽ thấy các lựa chọn Interface Builder Document (Tài liệu về Trình tạo giao diện) ở bên phải. Chọn Use Safe Area Layout Guides (Sử dụng hướng dẫn bố cục vùng an toàn) và đảm bảo bạn đang tạo cho iOS 9.0 trở lên (tối thiểu).

Bạn nên ràng buộc biểu ngữ theo kích thước bắt buộc bằng cách sử dụng các quy tắc ràng buộc đối với chiều rộng và chiều cao.

Giờ đây, bạn có thể căn chỉnh biểu ngữ ở đầu Vùng an toàn bằng cách ràng buộc thuộc tính Top của GAMBannerView với đầu Vùng an toàn:

Tương tự, bạn có thể căn chỉnh biểu ngữ ở cuối Vùng an toàn bằng cách hạn chế thuộc tính Bottom của GAMBannerView ở cuối vùng an toàn:

Các quy tắc ràng buộc của bạn hiện sẽ có dạng tương tự như ảnh chụp màn hình bên dưới (kích thước/vị trí có thể khác):

ViewController

Sau đây là một đoạn mã bộ điều khiển khung hiển thị đơn giản thực hiện những thao tác tối thiểu cần thiết để hiện một biểu ngữ trong GAMBannerView như được định cấu hình trong bảng phân cảnh ở trên:

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

Căn chỉnh biểu ngữ vào rìa vùng an toàn

Nếu bạn muốn biểu ngữ có chiều rộng tối đa, được căn trái hoặc căn phải, hãy đặt cố định cạnh trái/phải của biểu ngữ theo cạnh trái/phải của Vùng an toàn, thay vì theo cạnh trái/phải của chế độ xem superview.

Nếu bạn đã bật tuỳ chọn Use Safe Area Layout Guides (Sử dụng hướng dẫn đặt bố cục cho vùng an toàn), thì trình tạo giao diện sẽ mặc định sử dụng cạnh của vùng an toàn khi thêm các quy tắc ràng buộc vào chế độ xem.

Hỗ trợ iOS 8 trở xuống

Nếu muốn hỗ trợ iOS 8 trở xuống bằng Interface Builder, bạn nên bỏ chọn Use Safe Area Layout Guides (Sử dụng hướng dẫn đặt bố cục cho vùng an toàn) cho các tệp và bảng phân cảnh Interface Builder.

Giờ đây, bạn có thể thêm các điều kiện ràng buộc vào cuối hướng dẫn bố cục trên cùng (thay vì đầu Vùng an toàn):

Ngoài ra, hãy thêm các điều kiện ràng buộc vào đầu hướng dẫn bố cục dưới cùng (thay vì cuối Vùng an toàn):

Đối với biểu ngữ có chiều rộng đầy đủ (chỉ bị ảnh hưởng bởi Vùng an toàn ở chế độ ngang), các hướng dẫn bố cục này không tồn tại. Lựa chọn an toàn trong Trình tạo giao diện là đặt các quy tắc ràng buộc cạnh trái và cạnh phải tương ứng với lề:

Thao tác này sẽ dịch chuyển cạnh của biểu ngữ một chút so với cạnh của superview/Vùng an toàn, đảm bảo rằng biểu ngữ của bạn sẽ không bị che khuất ở hướng ngang trên iPhone X. Bạn cũng có thể đạt được kết quả mong muốn theo cách lập trình.

Có lập trình

Nếu ứng dụng của bạn tạo quảng cáo biểu ngữ theo phương thức lập trình, bạn có thể xác định các quy tắc ràng buộc và đặt quảng cáo biểu ngữ trong mã. Ví dụ này (dành cho iOS phiên bản 7.0 trở lên) cho biết cách ràng buộc một biểu ngữ để được căn giữa theo chiều ngang ở cuối Vùng an toàn:

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

Bạn có thể dễ dàng sử dụng các kỹ thuật trên để ràng buộc vào đầu vùng an toàn bằng cách sửa đổi các thuộc tính và điểm neo được dùng.

Quảng cáo gốc

Nếu ứng dụng của bạn ghim quảng cáo gốc vào phần trên cùng hoặc dưới cùng của màn hình, thì các nguyên tắc tương tự áp dụng cho quảng cáo gốc cũng sẽ được áp dụng cho quảng cáo biểu ngữ. Điểm khác biệt chính là thay vì thêm các quy tắc ràng buộc vào một GAMBannerView, bạn sẽ cần thêm các quy tắc ràng buộc vào GADNativeAppInstallAdView và GADNativeContentAdView (hoặc khung hiển thị chứa quảng cáo) để tuân theo hướng dẫn bố cục Vùng an toàn. Đối với các chế độ xem gốc, bạn nên cung cấp các quy tắc ràng buộc rõ ràng hơn về kích thước.

Quảng cáo xen kẽ và quảng cáo có tặng thưởng

Các định dạng quảng cáo toàn màn hình, bao gồm cả quảng cáo xen kẽ và quảng cáo có tặng thưởng, được Google Mobile Ads SDK hiển thị. Chúng tôi sẽ cập nhật SDK Google Mobile Ads SDK để đảm bảo các phần tử quảng cáo như nút đóng hiển thị ở đúng vị trí. Chúng tôi sẽ cập nhật ghi chú phát hành và trang tài liệu này khi thay đổi này có hiệu lực.