Используйте вариант для разработки визуального состояния

Вариант определяет конкретное визуальное состояние панели, позволяя одной панели иметь несколько различных визуальных представлений, например, открытое или закрытое состояние. Используйте XML для настройки варианта. Используйте подтег внутри элемента <Panel> .

Каждый тег <Variant> имеет обязательный атрибут id для его уникальной идентификации. Тег также может ссылаться на родительский вариант для наследования свойств. Этот механизм наследования позволяет эффективно определять общие свойства для нескольких вариантов.

XML-атрибуты

Для определения состояний и переходов используйте эти атрибуты с тегом <TaskPanel> или <DecorPanel> .

Атрибут Статус Описание
id Обязательный Уникальный идентификатор варианта. Этот идентификатор используется для ссылки на вариант в переходах или в качестве defaultVariant для панели.
parent Необязательный Указывает идентификатор другого варианта, от которого текущий вариант должен наследовать свойства. Если свойство явно не определено в текущем варианте, оно принимает значение, определенное в родительском варианте.

XML дочерние элементы

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

Дочерний элемент Описание
<Visibility> Указывает, видна или скрыта панель, и содержит атрибут isVisible (логическое значение).
<Alpha> Задает уровень прозрачности панели; содержит атрибут alpha (число с плавающей запятой, от 0,0 до 1,0).
<Layer> Задает порядок отображения панели по оси Z относительно других панелей; содержит атрибут layer (целое число). Значения большего размера отображаются поверх остальных.
<Focus> Указывает, может ли панель получать фокус во время перехода; содержит атрибут onTransition (логическое значение).
<Bounds>

Определяет прямоугольную область (положение и размер) панели на экране. Эта область контролируется такими атрибутами, как left, top, bottom, width и height.

  • left и right указывают расстояние от левого края экрана.
  • top и bottom указывают расстояние от верхнего края экрана.
  • width и height задают ширину и высоту прямоугольника и необходимы только в том случае, если параметры left и right (или top и bottom ) не указаны.
  • dimensions могут быть указаны в пикселях, DP, процентах или в виде ссылок на ресурсы.

При использовании процентов можно применять атрибуты смещения для внесения фиксированных корректировок в границы, заданные в процентах: leftOffset , topOffset , rightOffset и bottomOffset .

Например, чтобы указать, что панель занимает 100% высоты экрана, исключая при этом панель навигации фиксированной высоты внизу, установите высоту на 100%, а bottomOffset равным фиксированной высоте панели навигации. Это приведет к тому, что нижний край панели будет приподнят.

<SafeBounds> Задает безопасную область внутри границ панели, не перекрываемую вырезами или отступами на экране, чтобы подчеркнуть совместимость с приложениями, отображаемыми в этой области. Ее атрибуты аналогичны атрибуту <Bounds> .
<Corner> Определяет радиус скругления углов панели, допуская закругленные углы, и содержит атрибут радиуса (целое число). Острый угол является значением по умолчанию и не требует указания радиуса.
<Insets>

Задает отступы (поля) для панели. Содержит атрибуты left, top, right, bottom. Эти отступы передаются приложениям, запущенным в рамках данной панели.

  • Параметр left обозначает вставку с левой стороны.
  • right обозначает отступ с правой стороны. Например, нулевой отступ справа означает отсутствие отступов с правой стороны.
  • top обозначает углубление на верхней стороне.
  • bottom обозначает отступ с нижней стороны. Например, нулевой правый отступ означает отсутствие отступов с правой стороны.
<Background> Вводит дополнительную панель фонового оформления, предотвращающую эффект прозрачности при переключении приложений. Она определяет такие свойства, как цвет и альфа-канал, для этого слоя оформления. Свойства слоя оформления, такие как границы и слой, по умолчанию соответствуют свойствам варианта, если они еще не заданы.

Пример кода

<Variant id="@id/opened">
    <Visibility isVisible="true"/>
    <Bounds left="0dp"
            top="0dp"
            right="100%"
            bottom="100%"
            bottomOffset="100dp"/>
    <Alpha value="1.0"/>
    <Layer value="10"/>
    <Focus onTransition="true"/>
    <Corner radius="24dp"/>
    <Insets left="16dp" top="0dp" right="16dp" bottom="48dp"/>
    <Background color="@color/app_background" alpha="0.9"/>
</Variant>

Интерполяция визуальных свойств

Используйте KeyFrameVariant для интерполяции визуальных свойств. Это специализированное расширение параметра variant основано на непрерывном дробном значении (от 0 до 1), что позволяет создавать плавные, динамические переходы, управляемые непрерывным вводом, например, при операции перетаскивания, когда состояние панели динамически изменяется в зависимости от величины перетаскивания.

XML-атрибуты

KeyFrameVariant не имеет атрибутов. Тег <KeyFrameVariant> содержит информацию, необходимую для определения KeyFrameVariant .

XML дочерние элементы

KeyFrameVariant содержит один или несколько дочерних тегов <KeyFrame> . Каждый <KeyFrame> имеет атрибут framePosition (0-100) и ссылается на атрибут variant (идентификатор другого варианта). Эти keyframes определяют состояние панели в определенных точках непрерывного перехода.

Пример кода

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>