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

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

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

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

מודעות באנר

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

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

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

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

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

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

באופן דומה, אפשר ליישר את הבאנר לתחתית האזור הבטוח על ידי הגבלת המאפיין התחתון של ה-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 = "/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];
}

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

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

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

תמיכה ב-iOS 8 ומטה

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

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

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

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

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

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

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

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

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

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

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

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

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