Фоны
Установите фон для любого экрана в панели Fill в разделе Screen settings. Каждый слой в панели — это заливка одним цветом, градиент, изображение или видео; на одном экране можно накладывать несколько слоёв — именно так создаётся тонирование изображения или видео.
Фон также может стать главным изображением. Чтобы добиться этого эффекта, поместите контент в выдвижную панель.
Изображение
Загрузите файл .JPG, .PNG или .WEBP размером до 20 МБ. Изображение масштабируется, чтобы покрыть весь фон.
Фоновые изображения и видео заполняют весь экран, включая области за вырезом камеры и системными панелями — даже если включена Safe area. Держите важный контент подальше от краёв, чтобы он не обрезался.
Чтобы менять фоновое изображение во время выполнения из кода приложения, включите пользовательский медиа-ID.
Видео
Загрузите файл .MP4 или .WEBM размером до 50 МБ. В превью отображается статичный кадр — но на устройстве видео воспроизводится в реальном времени.
Включите Loop, чтобы видео повторялось непрерывно.
Чтобы подменить фоновое видео в рантайме, включите пользовательский медиа-идентификатор.
Однотонный цвет
Введите шестизначный hex-код, например #FFFFFF, и задайте непрозрачность от 0 до 100%. Сокращённое значение блокирует публикацию. Выберите сохранённый стиль цвета из палитры, чтобы применить цвет вашего бренда — фон автоматически подстраивается под светлую и тёмную темы.
Градиент
Создайте многоточечный линейный градиент:
- Direction — поворачивает градиент от 0 до 360°.
- Stops — перетаскивайте маркеры по полосе для изменения позиции. Нажмите на маркер, чтобы задать шестизначный hex-код и прозрачность.
- Opacity — ползунок в строке слоя масштабирует все маркеры одновременно, сохраняя плавность перехода между ними.
Используйте фон как hero-изображение
Основная статья: Скользящий шит
Во флоу hero-изображение строится из фона экрана и Sliding sheet. Шит перекрывает нижнюю часть экрана и поднимается поверх фона при прокрутке.
-
Установите Fill экрана в значение Image или Video и загрузите hero-изображение.
-
Добавьте Sliding sheet: > Layout > Sliding sheet.
-
Установите Start position листа — доля экрана, которую он занимает снизу. При значении по умолчанию 55% верхние 45% экрана остаются открытыми.
- Добавьте содержимое внутрь листа.
- Чтобы наложить заголовок или логотип поверх изображения героя, добавьте эти элементы за пределами листа. Они отображаются поверх фона экрана.
- При необходимости измените Start position, чтобы изменить размер листа. Установить абсолютную высоту для этого элемента невозможно.
Затемнение фона
Текст поверх изображения или видео читается только там, где фон оказывается достаточно тёмным. Чтобы выровнять яркость по всей области, добавьте полупрозрачный слой поверх медиаконтента:
- В Screen settings установите для слоя Fill ваше изображение или видео.
- Чтобы добавить второй слой, нажмите рядом с Fill. Новый слой появится вверху списка и перекроет медиаконтент.
- Нажмите на образец цвета слоя и выберите Gradient . Чтобы затемнить только тот край, где расположен текст, задайте градиент от непрозрачного стопа у этого края до прозрачного у противоположного.
- Для настройки интенсивности оттенка перетащите ползунок в строке слоя.
Перетащите слой, чтобы изменить его положение в стеке, и нажмите , чтобы удалить его.
