Оформление с помощью шаблона

Внимание.

Это архивная версия документации. Актуальная документация по всем платформам находится здесь.

Для настройки внешнего оформления можно использовать стандартный шаблон оформления или создать свое оформление на основе стандартного шаблона.

  1. Использование стандартного шаблона оформления
  2. Создание своего оформления на основе шаблона
  3. Настройка местоположения и размера рекламы

Использование стандартного шаблона оформления

Примечание.

После настройки оформления задайте местоположение и размеры рекламы относительно экрана устройства.

  1. Создайте объект — экземпляр класса YMANativeBannerView и установите для него загруженную рекламу:
    let bannerView = YMANativeBannerView()
    bannerView.ad = ad
    view.addSubview(bannerView)
  2. Чтобы получать уведомления о взаимодействии пользователя с рекламой (открытие рекламы, выход из приложения), установите для нее делегат YMANativeAdDelegate, реализующий методы:
    ad.delegate = self
  3. Пример использования стандартного шаблона оформления:

Примечание. Если вашему приложению не подходит стандартное оформление, его можно изменить. Подробнее смотрите в разделе Создание своего оформления на основе шаблона.

Создание своего оформления на основе шаблона

Примечание.

После настройки оформления задайте местоположение и размеры рекламы относительно экрана устройства.

  1. Создайте объект — экземпляр класса YMANativeBannerView и установите для него загруженную рекламу:
    let bannerView = YMANativeBannerView()
    bannerView.ad = ad
    view.addSubview(bannerView)
  2. Чтобы получать уведомления о взаимодействии пользователя с рекламой (открытие рекламы, выход из приложения), установите для нее делегат YMANativeAdDelegate, реализующий методы:
    ad.delegate = self
  3. Запросите настройки стандартного шаблона оформления:
    let appearance = YMAMutableNativeTemplateAppearance.default()
  4. Задайте предпочитаемые настройки.
  5. Чтобы применить настройки к шаблону, вызовите метод -applyAppearance::
    bannerView.apply(appearance)

Пример настроек оформления

// Определяем собственные цветовые решения для работы.
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)

// Создаем копию с настройками стандартного шаблона оформления.
let appearance = YMAMutableNativeTemplateAppearance.default()

// Начинаем изменять стандартные настройки шаблона.

// Задаем цвет для рамки рекламного объявления.
appearance.borderColor = orangeColor

// Создаем копию с настройками рейтинга.
let ratingAppearance = appearance.ratingAppearance?.mutableCopy() as? YMAMutableRatingAppearance

// Задаем цвет для закрашенных звезд в рейтинге.
ratingAppearance?.filledStarColor = orangeColor
appearance.ratingAppearance = ratingAppearance

// Задаем цвет и размер шрифта для надписи на кнопке с действием.
let callToActionTextAppearance = YMALabelAppearance(font: .systemFont(ofSize: 14), textColor: blueColor)

// Задаем цвет кнопки для обычного и нажатого состояния, цвет и толщину обводки кнопки.
let callToActionAppearance = YMAButtonAppearance(
    textAppearance: callToActionTextAppearance,
    normalColor: .clear,
    highlightedColor: .gray,
    borderColor: blueColor,
    borderWidth: 1
)
appearance.callToActionAppearance = callToActionAppearance

// Задаем размер и цвет шрифта для надписи с возрастным ограничением.
appearance.ageAppearance = YMALabelAppearance(font: .systemFont(ofSize: 12), textColor: .gray)

// Задаем размер и цвет шрифта для заголовка рекламного объявления.
appearance.titleAppearance = YMALabelAppearance(font: .systemFont(ofSize: 14), textColor: .black)

// Задаем размер и цвет шрифта для основного рекламного текста.
appearance.bodyAppearance = YMALabelAppearance(font: .systemFont(ofSize: 12), textColor: .gray)

// Задаем ширину изображения и правило формирования размера.
let imageConstraint = YMASizeConstraint(type: .fixed, value: 60)

// Применяем настройки к изображению.
appearance.imageAppearance = YMAImageAppearance(widthConstraint: imageConstraint)

Получаем собственный дизайн на основе шаблона:

Настройка местоположения и размера рекламы

Ограничение. Требования к размерам mediaView при отображении видеорекламы

Минимальный размер экземпляра класса YMANativeMediaView, в котором поддерживается воспроизведение видео: 300x160 или 160x300.

Для поддержки воспроизведения видео в шаблонах нативной рекламы рекомендуется выставить ширину для YMANativeBannerView не менее 300. Корректная высота для mediaView будет вычислена автоматически, с учетом соотношения ширины и высоты.

Управлять размерами и местоположением можно одним из двух способов:
  1. с помощью системного механизма AutoLayout;
    Примечание.

    При работе с AutoLayout задайте constraint для ширины UIView. Высота будет определена автоматически на основании указанной ширины.

  2. вручную, задавая все размеры.

Настройка размеров вручную

Примечание.

Не рекомендуется задавать ширину объекта более 420 логических пикселей.

Задайте для объекта YMANativeBannerView ширину и высоту. Высота определяется с помощью метода +heightWithAd:width:appearance:, в который необходимо передать рекламное объявление, ширину и объект YMANativeTemplateAppearance (используется для настроек внешнего вида рекламного объявления).

// Задаем отступы слева и справа относительно экрана.
let inset: CGFloat = 50

// Задаем ширину.
let width = view.frame.width - 2 * inset

// Задаем высоту.
let height = YMANativeBannerView.height(with: ad, width: width, appearance: nil)

// Задаем позицию по вертикали.
let y = view.frame.maxY - height - inset

// Задаем координаты и размеры для frame.
bannerView.frame = CGRect(x: inset, y: y, width: width, height: height)