Layout using a template
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.
Using the standard layout template
After setting up the layout, set the position and ad size relative to the device screen.
- Create an instance of the YMANativeBannerView class and set the loaded ad for it:
let bannerView = YMANativeBannerView() bannerView.ad = ad view.addSubview(bannerView)
YMANativeBannerView *bannerView = [[YMANativeBannerView alloc] init]; bannerView.ad = ad; [self.view addSubview:bannerView];
- 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
ad.delegate = self;
- Example of using the standard layout template:
Creating your own template-based layout
After setting up the layout, set the position and ad size relative to the device screen.
- Create an instance of the YMANativeBannerView class and set the loaded ad for it:
let bannerView = YMANativeBannerView() bannerView.ad = ad view.addSubview(bannerView)
YMANativeBannerView *bannerView = [[YMANativeBannerView alloc] init]; bannerView.ad = ad; [self.view addSubview:bannerView];
- 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
ad.delegate = self;
- Request the settings for the standard layout template:
let appearance = YMAMutableNativeTemplateAppearance.default()
YMAMutableNativeTemplateAppearance *appearance = [[YMANativeTemplateAppearance defaultAppearance] mutableCopy];
- Set the preferred settings.
- To apply the settings to the template, call the -applyAppearance: method:
bannerView.apply(appearance)
[bannerView applyAppearance: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)
// 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 thickness 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 text of the ad.
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
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.
- Using the system's
AutoLayout
mechanism.Note.When using
AutoLayout
, setconstraint
for theUIView
width. The height is determined automatically based on the specified width. - By manually setting all the sizes.
Setting sizes manually
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)
// Set the margins on the left and right relative to the screen.
CGFloat inset = 50.f;
// Setting the width.
CGFloat width = CGRectGetWidth(self.view.frame) - 2 * inset;
// Setting the height.
CGFloat height = [YMANativeBannerView heightWithAd:ad width:width appearance:nil];
// Setting the vertical position.
CGFloat y = CGRectGetMaxY(self.view.frame) - height - inset;
// Setting the coordinates and sizes for the frame.
bannerView.frame = CGRectMake(inset, y, width, height);