Отображение флоу и пейволов — Android

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

Warning

Этот гайд охватывает флоу и пейволы, отображаемые Adapty. Процесс отличается для пейволов с Remote Config и Observer mode.

Для отображения пейволов с Remote Config см. Отображение пейвола, созданного с помощью Remote Config.
Для отображения пейволов в режиме Observer см. Android — отображение флоу в режиме Observer

Чтобы получить объект flowConfiguration, используемый ниже, см. Получение флоу и пейволов.

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

   val flowView = AdaptyUI.getFlowView(
       activity,
       flowConfiguration,
       products,
       eventListener,
       insets,
       customAssets,
       tagResolver,
       timerResolver,
   )

   val flowView =
        AdaptyFlowView(activity) // or retrieve it from xml
   ...
   with(flowView) {
       showFlow(
           flowConfiguration,
           products,
					 eventListener,
           insets,
           customAssets,
           tagResolver,
           timerResolver,
       )
   }

AdaptyFlowView flowView = AdaptyUI.getFlowView(
        activity,
        flowConfiguration,
        products,
        eventListener,
        insets,
        customAssets,
        tagResolver,
        timerResolver
);

AdaptyFlowView flowView =
  new AdaptyFlowView(activity); //add to the view hierarchy if needed, or you receive it from xml
...
flowView.showFlow(flowConfiguration, products, eventListener, insets, customAssets, tagResolver, timerResolver);

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

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

Если вы получаете AdaptyFlowView не с помощью вызова AdaptyUI.getFlowView(), вам также потребуется вызвать метод .showFlow().

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

AdaptyFlowScreen(
    flowConfiguration,
    products,
    eventListener,
    insets,
    customAssets,
    tagResolver,
    timerResolver,
)

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

Параметр	Обязательность	Описание
flowConfiguration	обязательный	Передайте объект `AdaptyUI.FlowConfiguration`, содержащий визуальные параметры флоу. Используйте метод `AdaptyUI.getFlowConfiguration(flow)` для его загрузки. Подробнее см. в разделе Получение конфигурации экрана.
products	опциональный	Передайте массив `AdaptyPaywallProduct`, чтобы оптимизировать время отображения продуктов на экране. Если передать `null`, AdaptyUI автоматически загрузит необходимые продукты.
eventListener	опциональный	Передайте `AdaptyFlowEventListener` для отслеживания событий флоу. Для удобства рекомендуется расширить `AdaptyFlowDefaultEventListener`. Подробнее см. в разделе Обработка событий флоу и пейвола.
insets	опциональный	Отступы — это пространство вокруг флоу, которое защищает интерактивные элементы от перекрытия системными панелями. По умолчанию: `Unspecified` — Adapty автоматически подстраивает отступы, что хорошо работает для edge-to-edge флоу. Если ваш флоу не является edge-to-edge, возможно, потребуется задать пользовательские отступы. Подробнее см. в разделе Изменение отступов флоу.
customAssets	опциональный	Передайте объект `AdaptyCustomAssets`, чтобы заменить изображения и видео в вашем флоу или пейволе во время выполнения. Подробнее см. в разделе Настройка ресурсов.
tagResolver	опциональный	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте флоу. Резолвер принимает тег и преобразует его в соответствующую строку.
timerResolver	опциональный	Передайте резолвер, если планируете использовать пользовательскую функциональность таймера.

Tip

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

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

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

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

Если ни строка состояния, ни панель навигации не перекрывают AdaptyFlowView, используйте AdaptyFlowInsets.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
flowView.onReceiveSystemBarsInsets { insets ->
    val flowInsets = AdaptyFlowInsets.vertical(insets.top, 0)
    flowView.showFlow(
           flowConfiguration,
           products,
					 eventListener,
           flowInsets,
           customAssets,
           tagResolver,
           timerResolver,
       )
}


...

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

    AdaptyFlowInsets flowInsets =
                AdaptyFlowInsets.vertical(systemBarInsets.top, 0);
    flowView.showFlow(flowConfiguration, products, eventListener, flowInsets);

    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>

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

Warning

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

Для показа пейволов на основе Remote Config см. Отображение пейвола, созданного с помощью Remote Config.
Для показа пейволов в режиме Observer см. Android — показ пейволов Paywall Builder в режиме Observer

Чтобы получить объект 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	необязательный	Отступы вокруг пейвола, которые предотвращают перекрытие интерактивных элементов системными панелями. По умолчанию: `UNSPECIFIED` — Adapty автоматически подбирает отступы, что отлично работает для пейволов на весь экран. Если ваш пейвол не занимает весь экран, возможно, вам потребуется задать пользовательские отступы. Подробнее читайте в разделе Изменение отступов пейвола ниже.
personalizedOfferResolver	необязательный	Чтобы указать персонализированную цену (подробнее), реализуйте `AdaptyUiPersonalizedOfferResolver` и передайте собственную логику, которая возвращает `true` для `AdaptyPaywallProduct` с персонализированной ценой и `false` в противном случае.
tagResolver	необязательный	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте пейвола. Резолвер принимает тег и возвращает соответствующую строку. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
timerResolver	необязательный	Передайте резолвер, если планируете использовать пользовательский таймер.

Tip

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

Отступы — это пространство вокруг пейвола, которое не даёт интерактивным элементам скрыться за системными панелями. По умолчанию 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); /* in 1 hour */
    }
};

В этом примере 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>