Android — Отображение пейволов, созданных в новом Paywall Builder

Если вы настроили пейвол с помощью Paywall Builder, вам не нужно беспокоиться о его отрисовке в коде мобильного приложения для отображения пользователю. Такой пейвол содержит как то, что должно быть показано, так и то, как именно это должно отображаться.

Этот гайд предназначен только для пейволов, созданных в новом Paywall Builder, которые требуют SDK v3.0. Процесс отображения пейволов отличается для пейволов, разработанных с использованием разных версий Paywall Builder, пейволов на основе Remote Config, а также в режиме Observer mode.

Для отображения пейволов Remote Config, см. Отображение пейволов на основе Remote Config.
Для отображения пейволов в режиме Observer mode, см. Android — отображение пейволов Paywall Builder в режиме Observer mode

Чтобы получить объект viewConfiguration, используемый ниже, см. Получение пейволов Paywall Builder и их конфигурации.

Чтобы отобразить визуальный пейвол на экране устройства, его необходимо предварительно настроить. Для этого вызовите метод AdaptyUI.getPaywallView() или создайте AdaptyPaywallView напрямую:

   val paywallView = AdaptyUI.getPaywallView(
       activity,
       viewConfiguration,
       products,
       eventListener,
       insets,
       personalizedOfferResolver,
       tagResolver,
       timerResolver,
   )

   val paywallView =
        AdaptyPaywallView(activity) // or retrieve it from xml
   ...
   with(paywallView) {
       showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           insets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
   }

AdaptyPaywallView paywallView = AdaptyUI.getPaywallView(
        activity,
        viewConfiguration,
        products,
        eventListener,
        insets,
        personalizedOfferResolver,
        tagResolver,
        timerResolver
);

AdaptyPaywallView paywallView =
  new AdaptyPaywallView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
paywallView.showPaywall(viewConfiguration, products, eventListener, insets, personalizedOfferResolver, tagResolver, timerResolver);

<com.adapty.ui.AdaptyPaywallView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

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

Если вы получаете AdaptyPaywallView не через вызов AdaptyUI.getPaywallView(), вам также потребуется вызвать метод .showPaywall().

Чтобы отобразить визуальный пейвол на экране устройства, его необходимо сначала настроить. Используйте для этого следующую composable-функцию:

AdaptyPaywallScreen(
    viewConfiguration,
    products,
    eventListener,
    insets,
    personalizedOfferResolver,
    tagResolver,
    timerResolver,
)

Параметры запроса:

Параметр	Обязательность	Описание
viewConfiguration	обязательный	Передайте объект `AdaptyUI.LocalizedViewConfiguration` с визуальными настройками пейвола. Используйте метод `Adapty.getViewConfiguration(paywall)` для его загрузки. Подробнее — в разделе Получение визуальной конфигурации пейвола.
products	необязательный	Передайте массив `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `null`, AdaptyUI автоматически загрузит необходимые продукты.
eventListener	необязательный	Передайте `AdaptyUiEventListener` для отслеживания событий пейвола. Для удобства рекомендуется расширить `AdaptyUiDefaultEventListener`. Подробнее — в разделе Обработка событий пейвола.
insets	необязательный	Insets — это отступы вокруг пейвола, которые не дают интерактивным элементам скрываться за системными панелями. По умолчанию: `UNSPECIFIED` — Adapty автоматически подбирает отступы, что отлично работает для edge-to-edge пейволов. Если ваш пейвол не является edge-to-edge, возможно, потребуется задать кастомные отступы. Как это сделать — читайте в разделе Изменение отступов пейвола ниже.
personalizedOfferResolver	необязательный	Чтобы указать персонализированную цену (подробнее), реализуйте `AdaptyUiPersonalizedOfferResolver` и передайте собственную логику, которая возвращает `true` для `AdaptyPaywallProduct` с персонализированной ценой и `false` в остальных случаях.
tagResolver	необязательный	Используйте `AdaptyUiTagResolver` для обработки кастомных тегов в тексте пейвола. Резолвер принимает тег и возвращает соответствующую строку. Подробнее — в разделе Кастомные теги в Paywall Builder.
timerResolver	необязательный	Передайте резолвер, если планируете использовать функциональность кастомного таймера.

Хотите увидеть реальный пример интеграции Adapty SDK в мобильное приложение? Посмотрите наши примеры приложений — они демонстрируют полную настройку: отображение пейволов, совершение покупок и другие базовые функции.

Изменение отступов пейвола

Отступы — это пространство вокруг пейвола, которое не даёт интерактивным элементам скрыться за системными панелями. По умолчанию Adapty автоматически подбирает отступы, что отлично работает для пейволов во весь экран.

Если ваш пейвол не занимает весь экран, можно задать отступы вручную:

Если ни строка состояния, ни панель навигации не перекрываются с AdaptyPaywallView, используйте AdaptyPaywallInsets.NONE.
Для более нестандартных случаев, например если пейвол перекрывается с верхней строкой состояния, но не с нижней панелью, можно установить только bottomInset в 0, как показано в примере ниже:


//create extension function
fun View.onReceiveSystemBarsInsets(action: (insets: Insets) -> Unit) {
    ViewCompat.setOnApplyWindowInsetsListener(this) { _, insets ->
        val systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars())
        ViewCompat.setOnApplyWindowInsetsListener(this, null)
        action(systemBarInsets)
        insets
    }
}
//and then use it with the view
paywallView.onReceiveSystemBarsInsets { insets ->
    val paywallInsets = AdaptyPaywallInsets.vertical(insets.top, 0)
    paywallView.showPaywall(
           viewConfiguration,
           products,
					 eventListener,
           paywallInsets,
           personalizedOfferResolver,
           tagResolver,
           timerResolver,
       )
}


...

ViewCompat.setOnApplyWindowInsetsListener(paywallView, (view, insets) -> {
    Insets systemBarInsets = insets.getInsets(WindowInsetsCompat.Type.systemBars());
    ViewCompat.setOnApplyWindowInsetsListener(paywallView, null);

    AdaptyPaywallInsets paywallInsets =
                AdaptyPaywallInsets.of(systemBarInsets.top, 0);
    paywallView.showPaywall(paywall, products, viewConfiguration, paywallInsets, productTitleResolver);

    return insets;
});

Использование таймеров, заданных разработчиком

Чтобы использовать таймеры, заданные разработчиком, в своём мобильном приложении, создайте объект timerResolver — словарь или карту, в которых каждый пользовательский таймер сопоставлен со строковым значением, на которое он будет заменён при отображении пейвола. Пример:


...

val customTimers = mapOf(
    "CUSTOM_TIMER_NY" to Calendar.getInstance(TimeZone.getDefault()).apply { set(2025, 0, 1) }.time, // New Year 2025
)
val timerResolver = AdaptyUiTimerResolver { timerId ->
    customTimers.getOrElse(timerId, { Date(System.currentTimeMillis() + 3600 * 1000L) /* in 1 hour */ } )
}


...

Map<String, Date> customTimers = new HashMap<>();
customTimers.put(
        "CUSTOM_TIMER_NY",
        new Calendar.Builder().setTimeZone(TimeZone.getDefault()).setDate(2025, 0, 1).build().getTime()
);
AdaptyUiTimerResolver timerResolver = new AdaptyUiTimerResolver() {
    @NonNull
    @Override
    public Date timerEndAtDate(@NonNull String timerId) {
        Date date = customTimers.get(timerId);
        return date != null ? date : new Date(System.currentTimeMillis() + 3600 * 1000L); /* через 1 час */
    }
};

В этом примере CUSTOM_TIMER_NY — это Timer ID таймера, заданного разработчиком в дашборде Adapty. timerResolver гарантирует, что приложение динамически обновляет таймер с правильным значением — например, 13d 09h 03m 34s (вычисляется как время окончания таймера, например Новый год, минус текущее время).

Использование пользовательских тегов

Чтобы использовать пользовательские теги в мобильном приложении, создайте объект tagResolver — словарь или карту, которая сопоставляет пользовательские теги со строковыми значениями, подставляемыми при отображении пейвола. Пример:

val customTags = mapOf("USERNAME" to "John")
val tagResolver = AdaptyUiTagResolver { tag -> customTags[tag] }

Map<String, String> customTags = new HashMap<>();
customTags.put("USERNAME", "John");
AdaptyUiTagResolver tagResolver = customTags::get;

В этом примере USERNAME — это кастомный тег, который вы добавили в дашборде Adapty как <USERNAME/>. tagResolver обеспечивает динамическую замену этого тега на указанное значение — например, John.

Рекомендуем создавать и заполнять tagResolver непосредственно перед показом пейвола. Когда он будет готов, передайте его в метод AdaptyUI, который вы используете для отображения пейвола.

Изменение цвета индикатора загрузки пейвола

Вы можете переопределить цвет индикатора загрузки по умолчанию следующим образом:


<style name="AppTheme" parent="android:Theme.Material.Light.NoActionBar">

    <item name="adapty_progressIndicatorColor">@color/yourColor</item>
</style>