Изображения, видео и иконки

A flow screen with an image element on it

Flow Builder включает три типа медиаэлементов в категории Media: Image, Video и Icon.

Чтобы изображение или видео занимало весь экран — включая области за вырезом камеры и индикатором домашнего экрана — расположите его как фиксированное с нулевыми отступами со всех сторон и выберите Ignore safe area. См. Макет и позиционирование.

Изображение

Загрузите файл .JPG, .PNG или .GIF размером до 20 МБ.

  • Aspect — управляет тем, как изображение вписывается в контейнер:
    • Fit — масштабирует изображение так, чтобы оно целиком помещалось в контейнер без обрезки.
    • Fill — растягивает изображение, заполняя контейнер.
    • Cover — масштабирует изображение так, чтобы оно покрывало контейнер, обрезая при необходимости. По умолчанию.
  • Use custom media ID — см. раздел Custom media ID ниже.

Видео

Загрузите файл .MP4 или .WEBM размером до 50 МБ и продолжительностью не более 30 секунд. Минимальное разрешение видео — 640x640 пикселей.

  • Aspect — Fit, Fill или Cover. По умолчанию — Fill.
  • Loop — непрерывное воспроизведение видео. Включено по умолчанию.
  • Use custom media ID — см. Кастомный медиа-ID ниже.

В превью редактора видео не воспроизводится — на холсте отображается стоп-кадр. На устройстве в рантайме видео по умолчанию воспроизводится без звука. При включённом Loop повторяется бесконечно.

Запустить действие по окончании видео

Основная статья: Действия

Элемент Video поддерживает триггер On playback finished, который срабатывает, когда видео заканчивается. Настройте его в панели Interactions, чтобы перейти на другой экран, показать CTA или выполнить любое другое действие.

Иконка

Выбор иконки из библиотеки Tabler Icons

Выбирайте иконки из встроенной библиотеки Tabler Icons — тысячи иконок в двух стилях:

  • Stroke — только контур.
  • Filled — сплошная заливка.

Ищите иконку по ключевому слову в пикере. Цвет иконки задаётся в пикере Color — выберите сохранённый стиль цвета или укажите произвольный.

Пользовательский медиа-ID

Вы также можете задать пользовательский медиа-ID для фона в виде изображения или видео.

Присвойте элементу изображения или видео пользовательский медиа-ID, чтобы заменять его во время выполнения из кода приложения. Используйте это для персонализированных визуальных материалов — например, для отображения выбранного пользователем аватара.

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

Чтобы включить пользовательский медиа-ID для элемента изображения или видео:

  1. Установите флажок Use custom media ID под областью загрузки.
  2. Введите медиа-ID.
  3. Загрузите резервное изображение или видео.

В коде приложения получайте медиафайлы по их ID — см. Настройка ресурсов для SDK API.