Panduan ini menunjukkan praktik terbaik tentang cara membuat kode aplikasi untuk merender iklan dengan benar di iPhone X.
Prasyarat
- Selesaikan Mulai.
Iklan banner
Iklan banner harus ditempatkan di "Area Aman" agar tidak terhalang oleh sudut bulat, dudukan sensor, dan indikator Layar utama. Di halaman ini, Anda akan menemukan contoh cara menambahkan batasan untuk memosisikan banner di bagian atas atau bawah Area Aman. Batasan storyboard dan terprogram ditunjukkan di lingkungan yang mendukung iOS 9+ dan Xcode 9+. Solusi untuk versi sebelumnya iOS dan Xcode juga dicantumkan.
Pembuat Papan Cerita/Antarmuka
Jika aplikasi Anda menggunakan Interface Builder, pertama-tama, pastikan Anda telah mengaktifkan panduan tata letak Area Aman. Untuk melakukan ini, Anda perlu menjalankan Xcode 9+ dan menargetkan iOS 9+.
Buka file Interface Builder dan klik pada scene pengontrol tampilan. Anda akan melihat opsi Interface Builder Document di sebelah kanan. Centang Use Safe Area Layout Guides dan pastikan Anda membangun aplikasi untuk iOS 9.0 dan yang lebih baru sebagai minimum.
Sebaiknya batasi banner dengan ukuran yang diperlukan menggunakan batasan lebar dan tinggi.
Sekarang Anda dapat menyejajarkan banner ke bagian atas Area Aman dengan membatasi properti Top GAMBannerView ke bagian atas Area Aman:
Anda juga dapat menyelaraskan banner ke bagian bawah Area Aman dengan membatasi properti Bawah GAMBannerView ke bagian bawah area aman:
Batasan Anda kini akan terlihat seperti screenshot di bawah (penentuan ukuran/posisi dapat bervariasi):
ViewController
Berikut adalah cuplikan kode pengontrol tampilan sederhana yang melakukan jumlah minimum yang diperlukan untuk menampilkan banner dalam GAMBannerView
seperti yang dikonfigurasi di storyboard di atas:
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]; }
Menyejajarkan banner dengan tepi area aman
Jika Anda ingin membuat banner lebar penuh, rata kiri atau kanan, batasi tepi kiri/kanan banner ke tepi kiri/kanan Superview, bukan di tepi kiri/kanan superview.
Jika Anda telah mengaktifkan Gunakan Panduan Tata Letak Area Aman, builder antarmuka akan secara default menggunakan tepi area aman saat menambahkan batasan ke tampilan.
Mendukung iOS 8 dan yang lebih lama
Jika Anda ingin mendukung iOS 8 atau yang lebih lama menggunakan Interface Builder, Anda harus menghapus centang pada Use Safe Area Layout Guides untuk storyboard dan file Builder Antarmuka.
Sekarang Anda dapat menambahkan batasan ke bagian bawah panduan tata letak atas (bukan bagian atas Area Aman):
Tambahkan juga batasan ke bagian atas panduan tata letak bawah (bukan di bagian bawah Area Aman):
Untuk banner dengan lebar penuh (hanya terpengaruh oleh Area Aman dalam mode lanskap), panduan tata letak ini tidak tersedia. Opsi aman di Interface Builder adalah membuat batasan tepi kiri dan kanan relatif terhadap margin:
Tindakan ini akan sedikit mengimbangi tepi banner dari tepi superview/Area Aman, sehingga memastikan bahwa banner Anda tidak akan terhalang dalam orientasi lanskap di iPhone X. Anda juga dapat mencapai hasil yang diinginkan secara terprogram.
Terprogram
Jika aplikasi membuat iklan banner secara terprogram, Anda dapat menentukan batasan dan menempatkan iklan banner dalam kode. Contoh ini (untuk iOS versi 7.0 dan yang lebih baru) menunjukkan cara membatasi banner agar diposisikan di tengah secara horizontal di bagian bawah Area Aman:
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
Teknik di atas dapat dengan mudah digunakan untuk membatasi ke bagian atas area aman dengan memodifikasi atribut dan anchor yang digunakan.
Iklan native
Jika aplikasi Anda menyematkan iklan native ke bagian atas atau bawah layar, prinsip yang sama berlaku untuk iklan native seperti untuk iklan banner.
Perbedaan utamanya adalah, bukannya menambahkan batasan ke GAMBannerView
, Anda harus
menambahkan batasan ke GADNativeAppInstallAdView
dan
GADNativeContentAdView
(atau tampilan yang memuatnya untuk iklan) untuk
mematuhi panduan tata letak Area Aman. Untuk tampilan native, sebaiknya berikan
batasan ukuran yang lebih eksplisit.
Iklan interstisial dan reward
Format iklan layar penuh, termasuk iklan interstisial dan reward, dirender oleh Google Mobile Ads SDK. Akan ada update pada Google Mobile Ads SDK untuk memastikan elemen iklan seperti tombol tutup dirender di tempat yang tepat. Kami akan memperbarui catatan rilis dan halaman dokumentasi ini saat perubahan ini tersedia.