רינדור מודעות ב-iPhone X

במדריך הזה מפורטות שיטות מומלצות לכתוב את הקוד של האפליקציות כדי להציג מודעות בצורה תקינה ב-iPhone X.

דרישות מוקדמות

• משלימים את תחילת העבודה.

מודעות באנר

צריך למקם מודעות באנר ב'אזור בטוח' כדי למנוע את הסתרתן על ידי פינות מעוגלות, בתי חיישנים והאינדיקטור של כפתור הבית. בדף הזה מפורטות דוגמאות להוספת אילוצים כדי למקם מודעת באנר בחלק העליון או התחתון של האזור הבטוח. אנחנו מדגימים את המגבלות של הסטוריבורד והמגבלות הפרוגרמטיות בסביבה שתומכת ב-iOS מגרסה 9 ואילך וב-Xcode מגרסה 9 ואילך. אנחנו גם מציינים דרכים לעקיפת הבעיה בגרסאות קודמות של iOS ו-Xcode.

סטוריבורד/כלי ליצירת ממשקים

אם באפליקציה שלכם נעשה שימוש ב-Interface Builder, קודם כול עליכם לוודא שהפעלתם את ההנחיות של הפריסה של אזור בטוח. כדי לעשות זאת, צריך להשתמש ב-Xcode בגרסה 9 ואילך ולכוון ל-iOS בגרסה 9 ואילך.

פותחים את הקובץ ב-Interface Builder ולוחצים על הסצנה של ה-View Controller. האפשרויות של מסמך ב-Interface Builder יופיעו בצד שמאל. כדאי לעיין במאמר שימוש במדריכים לגבי פריסת אזורים בטוחים ולוודא שאתם מפתחים ל-iOS מגרסה 9.0 ואילך לפחות.

מומלץ להגביל את הבאנר לגודל הנדרש באמצעות אילוצים של רוחב וגובה.

עכשיו אפשר ליישר את הבאנר לחלק העליון של האזור הבטוח על ידי הגבלת הנכס Top של GAMBannerView לחלק העליון של האזור הבטוח:

באופן דומה, אפשר ליישר את הבאנר לתחתית האזור הבטוח על ידי הגבלת המאפיין Bottom של GAMBannerView לתחתית האזור הבטוח:

האילוצים אמורים להיראות עכשיו כמו בצילום המסך הבא (הגודל והמיקום עשויים להשתנות):

ViewController

לפניכם קטע קוד פשוט של בקר תצוגה שמבצע את הפעולות המינימליות הנדרשות כדי להציג באנר ב-GAMBannerView, כפי שהוגדר בסטוריבורד שלמעלה:

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 = "/21775744923/example/adaptive-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 = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

התאמת הבאנר לקצה של האזור הבטוח

אם רוצים להציג באנר ברוחב מלא שמוגדר שמאלה או ימינה, צריך להגביל את הקצה השמאלי או הימני של הבאנר לקצה השמאלי או הימני של אזור הבטיחות, ולא לקצה השמאלי או הימני של התצוגה המלאה.

אם ההגדרה שימוש בהנחיות למיקום רכיבים באזור בטוח מופעלת, ברירת המחדל של הכלי ליצירת ממשקים תהיה להשתמש בקצוות של אזור בטוח כשמוסיפים אילוצים לתצוגה.

תמיכה ב-iOS מגרסה 8 ואילך

אם רוצים לתמוך ב-iOS 8 וגרסאות ישנות יותר באמצעות Interface Builder, צריך לבטל את הסימון של האפשרות Use Safe Area Layout Guides בקובצי ה-Interface Builder ובסטוריבורדים.

עכשיו אפשר להוסיף אילוצים לתחתית מדריך הפריסה העליון (במקום לחלק העליון של האזור הבטוח):

מוסיפים גם אילוצים לחלק העליון של קו הנחיה התחתון של הפריסה (במקום לחלק התחתון של האזור הבטוח):

במודעות באנר ברוחב מלא (שמושפעות מאזור בטוח רק במצב לרוחב), הנחיות הפריסה האלה לא קיימות. האפשרות הבטוחה ב-Interface Builder היא להגדיר את האילוצים של הקצוות השמאלי והימני ביחס לשוליים:

כך קצה הבאנר יהיה קצת מוסט מקצה התצוגה המלאה או האזור הבטוח, וכך מוודאים שהבאנר לא יוסתר במצב לרוחב ב-iPhone X. אפשר להשיג את התוצאה הרצויה גם באופן פרוגרמטי.

פרסום פרוגרמטי

אם המודעות באנר נוצרות באופן פרוגרמטי באפליקציה, אפשר להגדיר אילוצים ולמקם את מודעות הבאנר בקוד. בדוגמה הזו (ל-iOS מגרסה 7.0 ואילך) מוסבר איך להגביל מודעת באנר כך שתהיה ממוקמת במרכז אופקית בחלק התחתון של האזור הבטוח:

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 = "/21775744923/example/adaptive-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 = @"/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

אפשר להשתמש בשיטות שלמעלה כדי להגביל את הרכיבים לחלק העליון של האזור הבטוח, על ידי שינוי המאפיינים והעוגנים שבהם נעשה שימוש.

מודעות מותאמות

אם באפליקציה שלכם מוצמדות מודעות מותאמות לחלק העליון או התחתון של המסך, אותם עקרונות חלים על מודעות מותאמות כמו על מודעות באנר. ההבדל העיקרי הוא שבמקום להוסיף אילוצים ל-GAMBannerView, צריך להוסיף אילוצים ל-GADNativeAppInstallAdView ול-GADNativeContentAdView (או לתצוגה שמכילה את המודעה) כדי לפעול בהתאם להנחיות הפריסה של אזור בטוח. לצפיות במודעות מותאמות, מומלץ לספק הגבלות גודל מפורטות יותר.

מודעות מעברון ומודעות מתגמלות

פורמטים של מודעות במסך מלא, כולל מודעות מעברון ומודעות מתגמלות, עוברים עיבוד על ידי Google Mobile Ads SDK. תתבצע עדכון ל-Google Mobile Ads SDK כדי לוודא שרכיבי מודעות כמו לחצן הסגירה יוצגו במקום הנכון. נעדכן את הערות המוצר ואת דף המסמכים הזה כשהשינוי יהיה זמין.