Hướng dẫn này trình bày các phương pháp hay nhất về cách lập trình ứng dụng của bạn để hiển thị quảng cáo chính xác trên iPhone X.
Điều kiện tiên quyết
- Nhập SDK Quảng cáo của Google trên thiết bị di động phiên bản 7.26.0 trở lên một mình hoặc như một phần của Firebase.
Quảng cáo biểu ngữ
Quảng cáo biểu ngữ phải được đặt ở "An toàn Diện tích" để tránh bị các góc bo tròn, vỏ cảm biến và Home chỉ báo. Trên trang này, bạn sẽ tìm thấy các ví dụ về cách thêm các quy tắc ràng buộc vào đặt một biểu ngữ vào đầu hoặc cuối Vùng an toàn.
Bảng phân cảnh/Trình tạo giao diện
Nếu ứng dụng của bạn sử dụng Trình tạo giao diện, trước tiên, hãy đảm bảo bạn đã bật Vùng an toàn hướng dẫn về bố cục. Để thực hiện điều này, bạn cần phải chạy Xcode 9+ và nhắm mục tiêu iOS 9+.
Mở tệp Trình tạo giao diện rồi nhấp vào cảnh của trình điều khiển chế độ xem. Bạn sẽ thấy các tùy chọn Tài liệu trình tạo giao diện ở bên phải. Đánh dấu vào mục Sử dụng Hướng dẫn bố cục vùng an toàn và đảm bảo rằng bạn đang xây dựng cho iOS 9.0 trở lên tối thiểu.
Bạn nên ràng buộc biểu ngữ ở kích thước bắt buộc bằng cách sử dụng chiều rộng và giới hạn chiều cao.
Bây giờ, bạn có thể căn chỉnh biểu ngữ lên đầu Vùng an toàn bằng cách ràng buộc Thuộc tính Hàng đầu của GADBannerView ở đầu Vùng an toàn:
Tương tự, bạn có thể căn chỉnh biểu ngữ xuống cuối Vùng an toàn bằng cách ràng buộc thuộc tính Bottom của GADBannerView ở dưới cùng của vùng an toàn vùng:
Các quy tắc ràng buộc của bạn bây giờ sẽ giống như ảnh chụp màn hình dưới đây (kích thước/vị trí có thể khác nhau):
ViewController
Đây là một đoạn mã đơn giản của đơn vị kiểm soát chế độ xem thực hiện công việc tối thiểu cần thiết để
hiển thị một biểu ngữ trong GADBannerView như đã định cấu hình trong bảng phân cảnh ở trên:
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];
}
Căn chỉnh các biểu ngữ theo cạnh của vùng an toàn
Nếu bạn muốn có biểu ngữ căn trái hoặc phải, hãy ràng buộc cạnh trái/phải của biểu ngữ sang cạnh trái/phải của vùng an toàn chứ không phải cạnh trái/phải của siêu xem.
Nếu bạn đã bật Sử dụng chỉ dẫn bố cục vùng an toàn, 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 thành phần hiển thị.
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ữ vào mã. Ví dụ này cho thấy 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: 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
Có thể dễ dàng dùng các kỹ thuật trên để ràng buộc vào phần trên cùng của khoá an toàn bằng cách sửa đổi các thuộc tính và quảng cáo cố định được sử dụng.
Biểu ngữ thông minh
Nếu đang sử dụng biểu ngữ thông minh, đặc biệt là có định dạng ngang, bạn nên sử dụng các quy tắc ràng buộc để căn chỉnh cạnh biểu ngữ với cạnh trái và phải của vùng an toàn.
Trong trình tạo giao diện, điều này được hỗ trợ trở lại iOS 9 bằng cách kiểm tra Tuỳ chọn Sử dụng chỉ dẫn bố cục vùng an toàn như đã trình bày ở trên.
Trong mã, bạn nên thực hiện các điều kiện ràng buộc đối với các cạnh tương ứng với vùng an toàn hướng dẫn về bố cục nếu có. Dưới đây là một đoạn mã thêm chế độ xem biểu ngữ vào khung hiển thị và các điều kiện ràng buộc ở đáy của khung hiển thị (toàn chiều rộng):
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]];
}
Quảng cáo gốc
Nếu ứng dụng của bạn ghim quảng cáo gốc vào đầu hoặc cuối màn hình, thì tương tự
nguyên tắc này áp dụng cho quảng cáo gốc giống như đối với 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 GADBannerView, bạn sẽ
cần thêm các điều kiện ràng buộc vào GADUnifiedNativeAdView (hoặc khung hiển thị vùng chứa
cho quảng cáo) để tuân theo chỉ dẫn bố cục Vùng an toàn. Đối với 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
Kể từ phiên bản 7.26.0, SDK quảng cáo trên thiết bị di động của Google hỗ trợ đầy đủ quảng cáo xen kẽ và định dạng quảng cáo có tặng thưởng cho iPhone X.