Layout using a template

To customize the layout and design, you can use a standard template or create your own design based on a standard template.

  1. Using the standard layout template
  2. Creating your own template-based layout
  3. Setting the position and the ad size

Using the standard layout template

Note.

After setting up the layout, set the position and ad size relative to the device screen.

  1. Create an instance of the YMANativeBannerView class and set the loaded ad for it:
    YMANativeBannerView *bannerView = [[YMANativeBannerView alloc] init];
    bannerView.ad = ad;
    [self.view addSubview:bannerView];
  2. To receive notifications of user interaction with the ad (opening the ad or exiting the app), assign it the YMANativeAdDelegate that implements the methods:
    ad.delegate = self;
  3. Example of using the standard layout template:

Note. If the standard layout doesn't fit your app, you can change it. For more information, see Creating your own template-based layout.

Creating your own template-based layout

Note.

After setting up the layout, set the position and ad size relative to the device screen.

  1. Create an instance of the YMANativeBannerView class and set the loaded ad for it:
    YMANativeBannerView *bannerView = [[YMANativeBannerView alloc] init];
    bannerView.ad = ad;
    [self.view addSubview:bannerView];
  2. To receive notifications of user interaction with the ad (opening the ad or exiting the app), assign it the YMANativeAdDelegate that implements the methods:
    ad.delegate = self;
  3. Request the settings for the standard layout template:
    YMAMutableNativeTemplateAppearance *appearance = [[YMANativeTemplateAppearance defaultAppearance] mutableCopy];
  4. Set the preferred settings.
  5. To apply the settings to the template, call the – applyAppearance: method:
    [bannerView applyAppearance:appearance];

Example of layout configuration

// Define custom colors.
UIColor *orangeColor = 
  [UIColor colorWithRed:255.f / 255.f green:176.f / 255.f blue:32.f / 255.f alpha:1.f];
UIColor *blueColor = 
  [UIColor colorWithRed:0.f / 255.f green:170.f / 255.f blue:255.f / 255.f alpha:1.f];

// Creating a copy with the settings of the standard layout template.
YMAMutableNativeTemplateAppearance *appearance = [[YMANativeTemplateAppearance defaultAppearance] mutableCopy];

// Starting to change the standard template settings.

// Setting the color for the ad frame.
appearance.borderColor = orangeColor;

// Creating a copy with rating settings.
YMAMutableRatingAppearance *ratingAppearance = [appearance.ratingAppearance mutableCopy];

// Setting the color for filled stars in the rating.
ratingAppearance.filledStarColor = orangeColor;
appearance.ratingAppearance = ratingAppearance;

// Setting the font color and size for the action button label.
YMALabelAppearance *callToActionTextAppearance =
    [YMALabelAppearance appearanceWithFont:[UIFont systemFontOfSize:14.f]
                                 textColor:blueColor];

//  Setting the button color for the normal state and the clicked state, along with the color and width of the button border.
YMAButtonAppearance *callToActionAppearance =
    [YMAButtonAppearance appearanceWithTextAppearance:callToActionTextAppearance
                                          normalColor:[UIColor clearColor]
                                     highlightedColor:[UIColor grayColor]
                                          borderColor:blueColor
                                          borderWidth:1.f];
appearance.callToActionAppearance = callToActionAppearance;

// Setting the font size and color for the age restriction label.
appearance.ageAppearance = 
  [YMALabelAppearance appearanceWithFont:[UIFont systemFontOfSize:12.f]
                               textColor:[UIColor grayColor]];

// Setting the font size and color for the ad title.
appearance.titleAppearance = 
  [YMALabelAppearance appearanceWithFont:[UIFont systemFontOfSize:14.f]
                               textColor:[UIColor blackColor]];

// Setting the font size and color for the main ad text.
appearance.bodyAppearance = 
  [YMALabelAppearance appearanceWithFont:[UIFont systemFontOfSize:12.f]
                               textColor:[UIColor grayColor]];

// Setting the image width and sizing constraint.
YMASizeConstraint *imageConstraint = 
  [YMASizeConstraint constraintWithType:YMASizeConstraintTypeFixed value:60.f];

// Applying the settings to the image.
appearance.imageAppearance = 
  [YMAImageAppearance appearanceWithWidthConstraint:imageConstraint];

We get our custom design based on the template:

Setting the position and the ad size

Restriction. Requirements for mediaView size when displaying video ads

Minimum size of an instance of the YMANativeMediaView class, which supports video playback: 300x160 or 160x300.

To support video playback in native ad templates, we recommend setting the width for YMANativeBannerView to at least 300. The correct height for mediaView will be calculated automatically based on the width to height ratio.

There are two ways to control size and location:
  1. Using the system's AutoLayout mechanism.
    Note.

    When using AutoLayout, set constraint for the UIView width. The height is determined automatically based on the specified width.

  2. By manually setting all the sizes.

Setting sizes manually

Note.

We don't recommend setting an object width greater than 420 logical pixels.

Set the width and height for the YMANativeBannerView object. The height is determined using the + heightWithAd:width:appearance: method, which must be passed the ad, the width, and the YMANativeTemplateAppearance object (used for setting the ad's appearance).

// Set the margins on the left and right relative to the screen.
CGFloat inset = 50.f;

// Set the width.
CGFloat width = CGRectGetWidth(self.view.frame) - 2 * inset;

// Set the height.
CGFloat height = [YMANativeBannerView heightWithAd:ad width:width appearance:nil];

// Set the vertical position.
CGFloat y = CGRectGetMaxY(self.view.frame) - height - inset;

// Set the coordinates and sizes for the frame.
bannerView.frame = CGRectMake(inset, y, width, height);