Модальные Rich Media для Android

Важно

Доступно с версии SDK 6.7.13

Функция модальных Rich Media для Android позволяет разработчикам отображать HTML-контент во всплывающем модальном окне в приложении. Это окно не блокирует другие элементы интерфейса и легко закрывается с помощью жестов смахивания. Модальное окно предлагает множество настроек для внешнего вида, поведения, анимации и многого другого, обеспечивая гибкий пользовательский опыт.

Ключевые особенности

• Неблокирующий UI: Модальное окно не блокирует взаимодействие с другими элементами интерфейса.
• Настраиваемые жесты смахивания: Настройте жесты смахивания для закрытия модального окна в различных направлениях.
• Гибкое позиционирование: Выбирайте, где на экране будет появляться модальное окно (сверху, по центру или снизу).
• Пользовательские анимации: Управляйте появлением и исчезновением модального окна с помощью различных типов анимации.
• Закрытие смахиванием: Пользователи могут закрыть модальное окно, смахнув его в любом направлении.
• Настраиваемая длительность анимации: Точно настраивайте скорость анимации модального окна.
• Обработка строки состояния: Возможность отображать модальное окно под или над строкой состояния.
• Настраиваемая ширина окна: Возможность установить ширину модального окна на весь экран или по содержимому.

Использование

Включение модальных Rich Media

Чтобы включить функцию модальных Rich Media, необходимо настроить ее в файле AndroidManifest.xml вашего приложения, добавив следующую запись с метаданными:

<meta-data
    android:name="com.wavesend.rich_media_type"
    android:value="Modal" />

Конфигурация по умолчанию

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

Параметры настройки

Позиция модального окна

Вы можете установить позицию модального окна на экране с помощью setViewPosition(). Доступные значения для этого параметра:

• TOP
• CENTER (по умолчанию)
• BOTTOM

Типы анимации закрытия

Настройте, как модальное окно будет закрываться, с помощью setDismissAnimationType(). Доступные варианты:

• FADE_OUT (по умолчанию)
• SLIDE_UP
• SLIDE_DOWN
• SLIDE_LEFT
• SLIDE_RIGHT
• NONE

Типы анимации появления

Определите, как модальное окно будет появляться, с помощью setPresentAnimationType(). Доступные варианты:

• FADE_IN
• SLIDE_UP
• SLIDE_RIGHT
• DROP_DOWN
• SLIDE_LEFT
• NONE (по умолчанию)

Настройка жестов смахивания

Модальное окно можно закрыть с помощью жестов смахивания в разных направлениях, используя setSwipeGesture(). Доступные жесты смахивания:

• UP
• LEFT
• RIGHT
• DOWN
• NONE (по умолчанию)

Длительность анимации

Управляйте скоростью анимации, установив animationDuration() в миллисекундах. Длительность задается целым числом, представляющим время в миллисекундах.

Ширина модального окна

Ширину модального окна можно установить с помощью setWindowWidth(), который определяет, будет ли модальное окно занимать всю ширину экрана или только ту, что необходима для содержимого. Возможные значения:

• FULL_SCREEN (по умолчанию)
• WRAP_CONTENT

Обработка строки состояния

По умолчанию модальное окно не будет перекрывать строку состояния. Чтобы разрешить модальному окну появляться под строкой состояния, установите для свойства setStatusBarCovered() значение true.

Пример конфигурации

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

Пример жеста смахивания

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setStatusBarCovered(false)
                .setSwipeGesture(ModalRichMediaSwipeGesture.RIGHT)
                .setViewPosition(ModalRichMediaViewPosition.CENTER)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_RIGHT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_FROM_LEFT)
                .setAnimationDuration(800)
                .setWindowWidth(ModalRichMediaWindowWidth.WRAP_CONTENT));

Пример анимации выпадания

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.UP)
                .setViewPosition(ModalRichMediaViewPosition.TOP)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.SLIDE_UP)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.DROP_DOWN)
                .setAnimationDuration(1000));

Пример Rich Media внизу экрана

        RichMediaManager.setDefaultRichMediaConfig(new ModalRichmediaConfig()
                .setSwipeGesture(ModalRichMediaSwipeGesture.DOWN)
                .setViewPosition(ModalRichMediaViewPosition.BOTTOM)
                .setDismissAnimationType(ModalRichMediaDismissAnimationType.FADE_OUT)
                .setPresentAnimationType(ModalRichMediaPresentAnimationType.SLIDE_UP)
                .setAnimationDuration(2000));

Заключение

Функция модальных Rich Media для Android предоставляет простой и гибкий способ отображения HTML-контента в вашем приложении, не мешая пользовательскому опыту. Благодаря обширным возможностям настройки, включая жесты смахивания, анимацию, позиционирование и ширину окна, вы можете создать бесшовное и увлекательное взаимодействие для ваших пользователей.