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 chính xác trên iPhone X.
Điều kiện tiên quyết
- Hoàn thành các bước trong phần Bắt đầu sử dụng.
Quảng cáo biểu ngữ
Bạn phải đặt quảng cáo biểu ngữ ở "Vùng an toàn" để tránh bị góc bo tròn, vỏ cảm biến và biểu tượng Màn hình chính che khuất. Trên trang này, bạn sẽ tìm thấy ví dụ về cách thêm các quy tắc ràng buộc để đặt một biểu ngữ ở đầu hoặc cuối Vùng an toàn. Cả quy tắc ràng buộc của bảng phân cảnh và quy tắc có lập trình đều được minh hoạ trong môi trường hỗ trợ iOS 9+ và Xcode 9 trở lên. Ngoài ra, cũng lưu ý Các giải pháp cho các phiên bản iOS và Xcode trước đây.
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 rằng bạn đã bật chỉ dẫn bố cục Vùng an toàn. Để làm điều này, bạn cần phải chạy Xcode 9+ và nhắm đến iOS 9+.
Mở tệp Trình tạo giao diện và nhấp vào cảnh của bộ điều khiển chế độ xem. Bạn sẽ thấy các tuỳ chọn Tài liệu trình tạo giao diện ở bên phải. Chọn Sử dụng chỉ dẫn bố cục vùng an toàn và đảm bảo rằng bạn đang xây dựng ứng dụng cho iOS 9.0 trở lên.
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 điều kiện ràng buộc về chiều rộng và chiều cao.
Giờ đây, 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 Top của GAMBannerView ở đầ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 ràng buộc thuộc tính Bottom của GAMBannerView ở dưới cùng của vùng an toàn:
Các quy tắc ràng buộc của bạn bây giờ sẽ trông tương tự như ảnh chụp màn hình dưới đây (kích thước/vị trí có thể thay đổi):
ViewController
Dưới đây là một đoạn mã đơn giản của trình 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ị biểu ngữ trong GAMBannerView 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: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Replace this ad unit ID with your own ad unit ID.
bannerView.adUnitID = "/6499/example/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 = @"/6499/example/banner";
self.bannerView.rootViewController = self;
GAMRequest *request = [GAMRequest 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 biểu ngữ có chiều rộng đầy đủ, được căn trái hoặc căn phải, hãy ràng buộc cạnh trái/phải của biểu ngữ với 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 tuỳ chọn Sử dụng chỉ dẫn bố cục 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 khung hiển thị.
Hỗ trợ iOS 8 trở xuống
Nếu muốn hỗ trợ iOS 8 trở xuống bằng cách sử dụng Trình tạo giao diện, bạn nên bỏ chọn Sử dụng chỉ dẫn bố cục vùng an toàn cho các tệp Trình tạo giao diện và bảng thiết kế.
Bây giờ, bạn có thể thêm các quy tắc ràng buộc vào phía dưới cùng của chỉ dẫn bố cục trên cùng (thay vì phía trên cùng của 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ì dưới cùng của 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 về bố cục này không tồn tại. Tuỳ chọn an toàn trong Trình tạo giao diện sẽ khiến các giới hạn cạnh trái và phải tương ứng với lề:
Điều này sẽ bù trừ 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 biểu ngữ của bạn không bị che khuất theo hướng ngang trên iPhone X. Bạn cũng có thể đạt được kết quả mong muốn bằng 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, thì 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ụ sau (đối với iOS phiên bản 7.0 trở lên) cho thấy cách ràng buộc để một biểu ngữ căn giữa theo chiều ngang ở cuối Vùng an toàn:
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 = "/6499/example/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 = @"/6499/example/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 hiển thị ở phần trên cùng của vùng an toàn bằng cách sửa đổi các thuộc tính và neo được sử 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ự
sẽ được áp dụng cho quảng cáo gốc giống như cho quảng cáo biểu ngữ.
Điểm khác biệt chính là thay vì thêm các điều kiện ràng buộc vào GAMBannerView, bạn sẽ
cần thêm các quy tắc ràng buộc vào GADNativeAppInstallAdView và
GADNativeContentAdView (hoặc chế độ xem có chứa quảng cáo) để
tuân thủ chỉ dẫn về 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, do SDK quảng cáo trên thiết bị di động của Google hiển thị. Chúng tôi sẽ cập nhật SDK quảng cáo trên thiết bị di động của Google để đảm bảo rằng các thành phần 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 có thay đổi này.