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

Вариант определяет конкретное визуальное состояние панели, позволяя одной панели иметь несколько различных визуальных представлений, например, открытое или закрытое состояние. Для настройки варианта используйте 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 и right указывают расстояние от левого края экрана.
  • top и bottom определяют расстояние от верхнего края экрана.
  • width и height задают ширину и высоту прямоугольника и необходимы только в том случае, если не указаны left и right стороны (или top и bottom ).
  • dimensions можно указывать в пикселях, DP, процентах или ссылках на ресурсы.

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

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

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

Задаёт отступы (поля) для панели. Содержит атрибуты «слева», «сверху», «справа» и «снизу». Эти отступы передаются приложениям, запущенным на панели.

  • 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) и ссылается на атрибут варианта (идентификатор другого варианта). Эти keyframes определяют состояние панели в определённых точках непрерывного перехода.

Код Samole 

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Назад
Настроить панель
Далее
Настроить переходы