يوضّح هذا الدليل أفضل الممارسات حول كيفية ترميز تطبيقاتك لعرض الإعلانات بشكل صحيح على هاتف iPhone X.
المتطلبات الأساسية
- استورِد الإصدار 7.26.0 أو إصدار أحدث من حزمة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة، إما بمفردها أو كجزء من Firebase.
إعلانات البانر
يجب وضع إعلانات البانر في "المنطقة الآمنة" لتجنّب حجبها بالأركان المستديرة وصندوق أداة الاستشعار ومؤشّر الصفحة الرئيسية. في هذه الصفحة، ستجد أمثلة على كيفية إضافة قيود لتحديد موضع إعلان البانر في أعلى "المنطقة الآمنة" أو أسفلها.
Storyboard/Interface Builder
إذا كان تطبيقك يستخدم Interface Builder، تأكَّد أولاً من تفعيل إرشادات التنسيق لمنطقة العرض الآمنة. لإجراء ذلك، يجب استخدام الإصدار 9 من Xcode والإصدار 9 من نظام التشغيل iOS أو الإصدارات الأحدث.
افتح ملف Interface Builder وانقر على مشهد "عنصر التحكّم في العرض". ستظهر لك خيارات مستند Interface Builder على يسار الصفحة. راجِع استخدام أدلة تنسيق المساحات الآمنة وتأكَّد من أنّك تُنشئ التطبيق ليعمل على الإصدار 9.0 من نظام التشغيل iOS والإصدارات الأحدث كحدّ أدنى.
ننصحك بتقييد البانر بالحجم المطلوب باستخدام قيود العرض والارتفاع.
يمكنك الآن محاذاة البانر في أعلى "المنطقة الآمنة" من خلال تقييد سمة Top في GADBannerView بأعلى "المنطقة الآمنة":
وبالمثل، يمكنك محاذاة إعلان البانر في أسفل "المنطقة الآمنة" من خلال تقييد سمة Bottom في GADBannerView بأسفل المنطقة الآمنة:
من المفترض أن تبدو القيود الآن مشابهة لقطة الشاشة أدناه (يمكن أن يختلف الحجم أو الموضع):
ViewController
في ما يلي مقتطف رمز بسيط لعنصر التحكّم في العرض ينفّذ الحد الأدنى المطلوب ل
عرض بانر في GADBannerView كما تم ضبطه في لوحة القصة أعلاه:
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]; }
محاذاة إعلانات البانر مع حافة المنطقة الآمنة
إذا كنت تريد عرض بانر مُحاذاً لليمين أو لليسار، يجب تقييد الحافة اليسرى/اليمنى للبانر بالحافة اليسرى/اليمنى للمساحة الآمنة وليس بالحافة اليسرى/اليمنى للعرض الفائق.
إذا فعّلت الخيار استخدام أدلة تنسيق المنطقة الآمنة، سيستخدم "أداة إنشاء الواجهات" بشكل تلقائي حواف المنطقة الآمنة عند إضافة قيود إلى العرض.
آلية
إذا كان تطبيقك ينشئ إعلانات بانر آليًا، يمكنك تحديد القيود وتحديد موضع إعلان البانر في الرمز البرمجي. يوضّح هذا المثال كيفية تقييد إعلان بانر ليكون في المنتصف أفقيًا في أسفل "المنطقة الآمنة":
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
يمكن استخدام الأساليب أعلاه بسهولة للتقييد بأعلى المنطقة الآمنة من خلال تعديل السمات والمرسّيات المستخدَمة.
إعلانات البانر الذكية
إذا كنت تستخدم إعلانات البانر الذكية، خاصةً في الوضع الأفقي، ننصحك باستخدام قيود لمحاذاة حواف إعلان البانر مع الحواف اليمنى واليسرى للمنطقة الآمنة.
في أداة إنشاء الواجهات، يتوفّر هذا الخيار منذ الإصدار iOS 9 من خلال وضع علامة في المربّع بجانب الخيار استخدام أدلة تنسيق المنطقة الآمنة على النحو الموضّح أعلاه.
في الرمز البرمجي، يجب ضبط قيود الحواف بالنسبة إلى المنطقة الآمنة وأداة توجيهات التنسيق متى توفّرت. في ما يلي مقتطف رمز يضيف عرض بانر إلى العرض ويحدّده في أسفل العرض بالعرض الكامل:
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]]; }
إعلانات مدمجة مع المحتوى
إذا كان تطبيقك يثبت الإعلانات المدمجة مع المحتوى في أعلى الشاشة أو أسفلها، تنطبق مبادئ إعلانات البانر نفسها على الإعلانات المدمجة مع المحتوى.
يكمن الاختلاف الرئيسي في أنّه بدلاً من إضافة قيود إلى GADBannerView، عليك
إضافة قيود إلى GADUnifiedNativeAdView (أو العرض المضمّن
للإعلان) من أجل الالتزام بإرشادات تصميم "المنطقة الآمنة". بالنسبة إلى المشاهدات المدمجة، ننصحك بتقديم قيود أكثر وضوحًا على الحجم.
الإعلانات البينية والإعلانات التي تضم مكافأة
اعتبارًا من الإصدار 7.26.0، تتيح حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" بشكل كامل أشكال الإعلانات البينية و الإعلانات التي تضم مكافأة على أجهزة iPhone X.