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

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

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

• מייבאים את Google Mobile Ads SDK מגרסה 7.26.0 ואילך, בנפרד או כחלק מ-Firebase.

מודעות באנר

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

בונה סטוריבורד/ממשק

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

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

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

עכשיו אפשר ליישר את הבאנר לחלק העליון של האזור הבטוח על ידי הגבלת הנכס 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];
}

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

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

אם הפעלתם את האפשרות Use Safe Area Layout Guides (שימוש במדריכים לפריסה של אזור בטוח), הכלי לבניית ממשק ישתמש כברירת מחדל בקצוות של האזור הבטוח כשתוסיפו אילוצים לתצוגה.

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

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

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, Google Mobile Ads SDK תומך באופן מלא בפורמטים של מודעות מעברון ומודעות מתגמלות ב-iPhone X.