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

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

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

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

Чтобы получить объект 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	необязательный	Insets — это отступы вокруг флоу, которые не дают интерактивным элементам скрываться за системными панелями. По умолчанию: `Unspecified` — Adapty автоматически подберёт отступы, что отлично работает для edge-to-edge флоу. Если ваш флоу не является edge-to-edge, возможно, потребуется задать пользовательские отступы. Как это сделать — читайте в разделе Изменение отступов флоу ниже.
customAssets	необязательный	Передайте объект `AdaptyCustomAssets`, чтобы заменить изображения и видео во флоу или пейволе во время выполнения. Подробнее см. в разделе Настройка ресурсов.
tagResolver	необязательный	Используйте `AdaptyUiTagResolver` для обработки пользовательских тегов в тексте флоу. Резолвер принимает тег и возвращает соответствующую строку. Подробнее см. в разделе «Пользовательские теги в Paywall Builder».
timerResolver	необязательный	Передайте резолвер сюда, если планируете использовать пользовательскую функциональность таймера.

Хотите увидеть реальный пример интеграции 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, вам не нужно беспокоиться о его рендеринге в коде мобильного приложения для отображения пользователю. Такой пейвол содержит как то, что должно отображаться внутри него, так и то, как именно это должно показываться.

Этот гайд предназначен только для пейволов нового Paywall Builder, которые требуют SDK v3.0. Процесс отображения пейволов отличается для пейволов, созданных с разными версиями Paywall Builder, пейволов на 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	необязательный	Передайте резолвер, если планируете использовать пользовательский таймер.

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

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