Визуальное оформление элементов

Видимость элементов

Элементы могут иметь разные состояния видимости, которые влияют на их отображение и поведение:

  • visible — элемент видим и занимает место в layout;
  • invisible — элемент невидим, но продолжает занимать место в layout;
  • gone — элемент полностью скрыт и не занимает места в layout.

Наследование видимости

При вложении элементов в контейнеры действует система наследования видимости:

  • Элементы внутри контейнера наследуют видимость родительского контейнера
  • Фактическая видимость элемента определяется как минимальная видимость между его собственной видимостью и видимостью родительского контейнера
  • Приоритет видимости: gone > invisible > visible

Это означает, что если контейнер имеет видимость invisible или gone, все его дочерние элементы также будут невидимы, независимо от их собственных настроек видимости.

Прозрачность

Для элемента можно установить прозрачность, указав значение от 0 до 1 параметра alpha:

  • 0 — полностью прозрачное;
  • 0,5 — полупрозрачное;
  • 1 — непрозрачное изображение.

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

Фон

У всех визуальных элементов может быть задан фон в background. Типы фона:

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

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

Рамка

С помощью параметра border можно задать рамку, её цвет и ширину, скругление углов у элемента, а также тень:

  1. Добавьте элемент, например текст.
  2. Добавьте рамку border и скруглите углы с помощью параметра corner_radius.
  3. Добавьте заливку.
  4. Добавьте на получившуюся кнопку действие, которое она будет выполнять при нажатии.
Посмотреть интерактивный пример

Узнать больше

Вы можете обсуждать интересующие вас темы в сообществе пользователей DivKit в Telegram: https://t.me/divkit_community_ru.

Репозиторий DivKit