Material Design

Базовые узлы

Для конструирования сложных объектов используются базовые примитивы:

• Sprite - узел, закрытый текстурой. Базовый узел для всех отображаемых узлов.
• Layer - узел со сплошной или градиентной заливкой
• Label - узел для отображения текста (в том числе, со сложным форматированием)
• VectorSprite - узел для векторных изображений и иконок
• ScrollView - узел с горизонтальной или вертикальной прокруткой содержимого

Основы реализации Material Design

SDK использует концепцию Material Design 3. Модуль xenolith_renderer_material2d

Основа определения дизайна - цветовая схема material2d::ColorScheme. На основе этой цветовой схемы динамически определяются другие цвета.

Цветовую схему сегента дерева узлов определяет компонент material2d::StyleContainer. Компонент material2d::StyleMonitor позволяет отслеживать изменения цветовой схемы, например, при переходе в ночной режим.

Одна из ключевых концепций MD3 - поверхность. Она представлена узлом вида Surface или LayerSurface. В зависимсоти от параметров поверхности изменяются параметры узлов в ней. Параметры поверхности доступны через компонент SurfaceInterior. Его наличие в стеке компонентов показывает, что узел находится на поверхности, и необходимо адаптировать его параметры под поверхность. Таким образом, большинство узлов стилизуются автоматически.

Основные визуальные параметры определяются дискретными значениями Elevation, ShapeFamily, ShapeStyle, NodeStyle, ActivityState. Эти параметры задаются в структуре SurfaceStyle. Но для применения ноду необходимы непрерывные параметры, кроме того, это нужно для гладкости переходных анимаций. За компиляцию дискретных параметров в непрерывные отвечает SurfaceStyleData, из которой и читаются финальные значения для отображения.

Класс TypescaleLabel реализует тексовое поле, способное динамически менять свой основной стиль для соотвествия поверхности. Также, для него предусмотрен ряд пресетов из документации MD3.

Класс IconSprite реализует векторную иконку, аналогично, относящуюся к поверхности.

Цвет теста и иконки составной, состав определяется значением смешивания blendValue. Чем оно больше, тем больше влияния заданного цвета и меньше - цвета, требуемого поверхностью.

Компоненты

Реализованы следующие компоненты:

• AppBar
• Button
• TabBar
• InputField
• Menu
• Sidebar
• NavigationDrawer

Укладки

Внешние укладки представляют то, как приложение в целом размещается на экране.

Базовая укладка DecoratedLayout реализует простую укладку одного элемента с возможностью получить доступ к закрашиванию декораций окна там, где это возможно.

Укладка FlexibleLayout заполняет экран двумя узлами. Верхний узел представляет аголовок окна и может растягиваться и сжиматься вплоть до исчезновения с экрана.

Укладка MultiViewLayout реализует листаемое влево-вправо постранично содержимое.

Укладка OverlayLayout предназначена для оверлеев, затемняющих основной контент.