Layout using a template

Warning.

This is an archived version of the documentation. Actual documentation for all platforms can be found here.

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:
    let bannerView = YMANativeBannerView()
    bannerView.ad = ad
    view.addSubview(bannerView)
  2. To receive notifications about user interactions with the ad (opening the ad or exiting the app), assign it the YMANativeAdDelegate, which 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:
    let bannerView = YMANativeBannerView()
    bannerView.ad = ad
    view.addSubview(bannerView)
  2. To receive notifications about user interactions with the ad (opening the ad or exiting the app), assign it the YMANativeAdDelegate, which implements the methods:
    ad.delegate = self
  3. Request the settings for the standard layout template:
    let appearance = YMAMutableNativeTemplateAppearance.default()
  4. Set the preferred settings.
  5. To apply the settings to the template, call the -applyAppearance: method:
    bannerView.apply(appearance)

Example of layout configuration

// Defining a custom color scheme.
let orangeColor = UIColor(red: 1, green: 176.0/255, blue: 32.0/255, alpha: 1)
let blueColor = UIColor(red: 0, green: 170.0/255, blue: 1, alpha: 1)

// Creating a copy with the settings of the native design template.
let appearance = YMAMutableNativeTemplateAppearance.default()

// Starting to change the native template settings.

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

// Creating a copy with rating settings.
let ratingAppearance = appearance.ratingAppearance?.mutableCopy() as? YMAMutableRatingAppearance

// 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.
let callToActionTextAppearance = YMALabelAppearance(font: .systemFont(ofSize: 14), textColor: blueColor)

// Setting the button color for the normal state and clicked state, along with the color and thickness of the button border.
let callToActionAppearance = YMAButtonAppearance(
    textAppearance: callToActionTextAppearance,
    normalColor: .clear,
    highlightedColor: .gray,
    borderColor: blueColor,
    borderWidth: 1
)
appearance.callToActionAppearance = callToActionAppearance

// Setting the font size and color for the age restriction label.
appearance.ageAppearance = YMALabelAppearance(font: .systemFont(ofSize: 12), textColor: .gray)

// Setting the font size and color for the ad title.
appearance.titleAppearance = YMALabelAppearance(font: .systemFont(ofSize: 14), textColor: .black)

// Setting the font size and color for the main ad text.
appearance.bodyAppearance = YMALabelAppearance(font: .systemFont(ofSize: 12), textColor: .gray)

// Setting the image width and the sizing rule.
let imageConstraint = YMASizeConstraint(type: .fixed, value: 60)

// Applying the settings to the image.
appearance.imageAppearance = YMAImageAppearance(widthConstraint: imageConstraint)

We get our custom design based on the template:

Setting the position and the ad size

Restriction. mediaView size requirements 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).

// Setting the margins on the left and right relative to the screen.
let inset: CGFloat = 50

// Setting the width.
let width = view.frame.width - 2 * inset

// Setting the height.
let height = YMANativeBannerView.height(with: ad, width: width, appearance: nil)

// Setting the vertical position.
let y = view.frame.maxY - height - inset

// Setting the coordinates and sizes for the frame.
bannerView.frame = CGRect(x: inset, y: y, width: width, height: height)