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

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

Warning

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

Для отображения кастомных пейволов см. Отображение кастомных пейволов.
Для отображения пейволов в режиме 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	необязательный	Insets — это отступы вокруг флоу, которые не дают интерактивным элементам скрываться за системными панелями. По умолчанию: `Unspecified` — Adapty автоматически подберёт отступы, что отлично работает для флоу на весь экран. Если ваш флоу не занимает весь экран, можно задать отступы вручную. Подробнее об этом читайте в разделе Изменение отступов флоу ниже.
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 (вычисляется как время окончания таймера, например Новый год, минус текущее время).

Используйте пользовательские теги

Основная статья: Передача данных во флоу

Создайте AdaptyUiTagResolver, который возвращает значение вашего приложения для каждого пользовательского тега во флоу:

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

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

В этом примере username — это имя пользовательского тега во флоу. Пользователи увидят «DragonSlayer42» вместо тега.

Передайте резолвер в параметре tagResolver метода AdaptyUI.getFlowView, AdaptyFlowView.showFlow или AdaptyFlowScreen.

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

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


<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 или более ранних версий, кастомного пейвола или пейвола в режиме Observer работает иначе.

Для показа кастомных пейволов см. Показ кастомных пейволов.
Для показа пейволов в режиме 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>