رندر تبلیغات آیفون X

این راهنما بهترین روش‌ها را در مورد نحوه کدنویسی برنامه‌های خود برای نمایش صحیح تبلیغات در iPhone X نشان می‌دهد.

پیش نیازها

تبلیغات بنری باید در "منطقه امن" قرار داده شود تا توسط گوشه های گرد، محفظه حسگر و نشانگر خانه مبهم نشود. در این صفحه نمونه هایی از نحوه اضافه کردن محدودیت ها برای قرار دادن یک بنر در بالا یا پایین منطقه امن را خواهید دید.

Storyboard/Interface Builder

اگر برنامه شما از Interface Builder استفاده می‌کند، ابتدا مطمئن شوید که راهنمای طرح‌بندی منطقه امن را فعال کرده‌اید. برای انجام این کار باید Xcode 9+ را اجرا کرده و iOS 9+ را هدف قرار دهید.

فایل Interface Builder خود را باز کنید و روی صحنه نمایش کنترلر خود کلیک کنید. در سمت راست گزینه های Interface Builder Document را خواهید دید. Use Safe Area Layout Guides را بررسی کنید و مطمئن شوید که حداقل برای iOS 9.0 و نسخه های جدیدتر می سازید.

توصیه می کنیم با استفاده از محدودیت های عرض و ارتفاع، بنر را به اندازه مورد نیاز محدود کنید.

اکنون می توانید با محدود کردن ویژگی Top GADBannerView در بالای منطقه امن، بنر را با بالای منطقه امن تراز کنید:

به همین ترتیب، می‌توانید با محدود کردن ویژگی پایین GADBannerView در پایین ناحیه امن، بنر را در پایین منطقه امن تراز کنید:

محدودیت‌های شما اکنون باید مشابه تصویر زیر به نظر برسند (اندازه/موقعیت می‌تواند متفاوت باشد):

ViewController

در اینجا یک قطعه کد کنترلر View ساده وجود دارد که حداقل های لازم را برای نمایش یک بنر در GADBannerView همانطور که در استوری بورد بالا پیکربندی شده است، انجام می دهد:

سریع

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

}

هدف-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 را فعال کرده باشید، سازنده رابط به‌طور پیش‌فرض از لبه‌های ناحیه امن هنگام اضافه کردن محدودیت‌ها به نما استفاده می‌کند.

برنامه ای

اگر برنامه شما تبلیغات بنری را به صورت برنامه ریزی شده ایجاد می کند، می توانید محدودیت ها را تعریف کرده و بنر تبلیغاتی را در کد قرار دهید. این مثال نشان می دهد که چگونه می توان یک بنر را به صورت افقی در پایین منطقه امن محدود کرد:

سریع

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

}

هدف-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

تکنیک های بالا را می توان به راحتی برای محدود کردن بالای منطقه امن با اصلاح ویژگی ها و لنگرهای مورد استفاده استفاده کرد.

بنرهای هوشمند

اگر از بنرهای هوشمند استفاده می‌کنید، به‌ویژه در منظره، توصیه می‌کنیم از محدودیت‌ها برای تراز کردن لبه‌های بنر در لبه‌های چپ و راست منطقه امن استفاده کنید.

در سازنده رابط، با علامت زدن گزینه Use Safe Area Layout Guides همانطور که در بالا ذکر شد، این مورد به iOS 9 پشتیبانی می شود.

در کد، باید محدودیت‌های لبه خود را نسبت به راهنمای طرح‌بندی منطقه امن در صورت وجود ایجاد کنید. در اینجا یک قطعه کد وجود دارد که یک نمای بنر را به نما اضافه می کند و به پایین نما، به عرض کامل، محدود می کند:

سریع

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

هدف-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 پشتیبانی می‌کند.