Этот шаблон использует вкладки для переключения между двумя вариантами одного предложения на одном экране. Каждая вкладка содержит собственный список функций, список продуктов и кнопку покупки. Нажатие на вкладку меняет отображаемый контент без перехода на другой экран — удобно для разделения планов по уровню, периоду оплаты или сегменту аудитории.

Прежде чем начать

• Создайте продукты в дашборде Adapty.
• Подключите Adapty к App Store и Google Play.

1. Настройте макет экрана

Экран служит контейнером для кнопки закрытия, заголовка, вкладок и содержимого вкладок. В этом примере фон — изображение, но сплошной цвет или градиент работают так же.

Полный список свойств экрана см. в разделе Экраны и слои — Настройки экрана.

Чтобы настроить экран:

1. Нажмите на пустую область холста, чтобы выделить экран.
2. В разделе System UI отключите Safe area, чтобы фон растянулся до краёв экрана.
3. В разделе Fill выберите тип фона и настройте его. В этом примере используется Image Image, но сплошной цвет или градиент настраиваются так же.
4. В разделе Layout задайте направление Vertical Vertical и настройте отступы и выравнивание, чтобы элементы располагались сверху вниз, а содержимое вкладки заполняло оставшееся пространство.

2. Добавьте кнопку закрытия

Кнопка закрытия скрывает пейвол. Пресет Close уже настроен — никаких дополнительных действий не требуется.

1. На холсте нажмите +.
2. Выберите Buttons > Close.

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

Заголовок находится рядом с кнопкой закрытия в верхней части экрана. Чтобы выровнять их по горизонтали, оберните оба элемента в горизонтальный стек.

Чтобы добавить заголовок:

1. Нажмите + > Text > H1.
2. Выделив H1, откройте вкладку Design и отредактируйте текст в поле Content.

Чтобы сгруппировать заголовок с кнопкой закрытия:

1. На панели Layers нажмите меню из трёх точек Context menu на слое с кнопкой закрытия и выберите Wrap > Wrap in Horizontal Stack.

2. Перетащите слой H1 в новый горизонтальный стек.

Чтобы выровнять два элемента:

1. Отрегулируйте размер кнопки закрытия и размер шрифта H1, чтобы они комфортно располагались на одной строке.
2. Выделив горизонтальный стек, задайте выравнивание и распределение в правой панели, чтобы элементы встали корректно.

4. Добавьте вкладки и настройте их метки

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

Подробнее об элементе Tabs — в разделе Элементы — Tabs. Подробнее о группах с выбором — в разделе Выбираемые элементы и группы.

Чтобы добавить вкладки:

1. Нажмите + > Tabs и выберите пресет — Segment control, Button Tabs или Underline.
2. Выделив название каждого таба на холсте или в панели Layers, отредактируйте поле Content на вкладке Design, чтобы изменить подпись — например, Premium и Pro.

5. Добавьте список функций на первую вкладку

Короткий компактный список функций внутри первой вкладки показывает пользователям, что входит в этот план.

Полный набор пресетов списков описан в разделе Элементы — Список.

Чтобы добавить список функций:

1. Нажмите + > List и выберите пресет списка. Icon List — самый компактный вариант для пейволов. Элемент появится в конце дерева слоёв.
2. Выбрав каждую строку, отредактируйте заголовок в поле Content.

3. На панели Layers перетащите список в контейнер Content первой вкладки.

6. Добавьте список продуктов на первую вкладку

Список продуктов отображает варианты подписки для первой вкладки. Элемент Products отрисовывает по одной карточке на каждый продукт, назначенный экрану, и создаёт собственную группу выбора.

Подробнее об управлении продуктами — в разделе Настройка покупок.

Чтобы добавить и настроить продукты:

1. Нажмите + > Products и выберите пресет макета. Vertical List хорошо подходит для стопки тарифов. Элемент появится в конце дерева слоёв.
2. Выберите каждую карточку продукта на холсте и выберите продукт из выпадающего списка на вкладке Design.

3. На панели Layers перетащите слой Products в контейнер Content первого таба.

7. Добавьте кнопку покупки на первый таб

Кнопка покупки запускает встроенную покупку выбранного пользователем продукта на первом табе. Её подпись использует цену выбранного продукта и автоматически синхронизируется с выбором пользователя.

Подробнее об экшне «Покупка» читайте в разделе Действия — Покупка.

Чтобы добавить и настроить кнопку покупки:

1. Нажмите + > Buttons и выберите пресет кнопки. Элемент появится в конце дерева слоёв.
2. Выделив кнопку, откройте вкладку Design и поставьте курсор в поле Content. Нажмите на иконку переменной , выберите products.selectedProduct, затем атрибут prod_price — полная переменная примет вид products.selectedProduct.prod_price. Добавьте остальной текст метки, например: Subscribe for {prod_price}.

3. Перейдите на вкладку Interactions и нажмите Add trigger > On tap > Add action.
4. Установите Action в значение Purchase, а Product — в products.selectedProduct.

5. На панели Layers перетащите кнопку в контейнер Content первой вкладки.

8. Скопируйте содержимое первой вкладки во вторую

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

Чтобы скопировать содержимое:

1. На панели Layers разверните контейнер Content первой вкладки.
2. Выделите каждый элемент внутри него (список функций, продукты, кнопку покупки), скопируйте с помощью ⌘C / Ctrl+C и вставьте с помощью ⌘V / Ctrl+V. Копии появятся в конце дерева слоёв.
3. Перетащите каждый скопированный элемент в контейнер Content второй вкладки.

9. Обновите содержимое второй вкладки

Вторая вкладка пока повторяет первую. Обновите каждый элемент, чтобы он отражал второй тарифный план.

Чтобы обновить вторую вкладку:

1. Отредактируйте список функций внутри второй вкладки так, чтобы строки соответствовали функциям второго плана.
2. Выберите каждую карточку продукта в элементе Products второй вкладки и назначьте продукты второго плана из выпадающего списка. Этот элемент Products автоматически становится отдельной выбираемой группой (products2).
3. Выберите кнопку покупки во второй вкладке. В поле Content на вкладке Design измените переменную цены с products.selectedProduct.prod_price на products2.selectedProduct.prod_price.
4. Перейдите на вкладку Interactions и обновите Product в действии Purchase с products.selectedProduct на products2.selectedProduct.

10. Добавьте общие ссылки в подвале

Ссылки на условия использования, политику конфиденциальности и восстановление покупок должны отображаться вне зависимости от активной вкладки. Добавьте их на уровне экрана — за пределами обоих контейнеров с содержимым вкладок — чтобы они были общими для обеих вкладок.

Чтобы добавить ссылки в подвале:

1. Нажмите + > Buttons > Links. В дерево слоёв добавится строка с Restore Purchases, Terms of Use и Privacy Policy — в самом конце, на уровне корня экрана, а не внутри вкладки.
2. Выберите ссылку Terms of Use, откройте вкладку Interactions и вставьте URL условий использования в поле Open URL.
3. Повторите то же самое для ссылки Privacy Policy, указав URL политики конфиденциальности.
4. Ссылку Restore Purchases оставьте без изменений — её действие уже настроено заранее.

Следующие шаги

• Сохраните и опубликуйте флоу.
• Добавьте флоу в плейсмент, чтобы начать показывать его пользователям.