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

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

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

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

מודעות באנר

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

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

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

פותחים את הקובץ Interface Builder ולוחצים על סצנת בקר התצוגה. משמאל יופיעו האפשרויות של Interface Builder Document. מסמנים את האפשרות Use Safe Area Layout Guides ומוודאים שאתם בונים לאפליקציות ל-iOS 9.0 ואילך לפחות.

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

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

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

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

ViewController

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

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: AdManagerBannerView!

  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(AdManagerRequest())
  }

}

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];
}

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

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

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

תמיכה ב-iOS 8 ובגרסאות קודמות

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

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

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

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

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

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

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

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    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(AdManagerRequest())
  }

  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 כדי לוודא שרכיבי מודעות כמו לחצן הסגירה מוצגים במקום הנכון. אנחנו נעדכן את הערות הגרסה ואת דף התיעוד הזה כשהשינוי הזה יהיה זמין.