使用变体设计视觉状态

变体用于定义面板的特定视觉状态，使单个面板能够具有多种不同的视觉表示形式，例如打开或关闭状态。使用 XML 配置变体。在 <Panel> 元素中使用子标记。

每个 <Variant> 标记都有一个强制性 id 属性，用于唯一标识该标记。该标记还可以引用父变体以继承属性。借助此继承机制，您可以高效地定义多个变体的通用属性。

XML 属性

如需定义状态和过渡，请将这些属性与 <TaskPanel> 或 <DecorPanel> 标记搭配使用。

属性	状态	说明
id	强制	变体的唯一标识符。此 ID 用于在过渡中引用变体，或用作面板的 defaultVariant。
parent	可选	指定当前变体应从中继承属性的另一个变体的 ID。如果当前变体中未明确定义某个属性，则会回退到其父变体中定义的值。

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>	引入了一个可选的背景装饰面板，以防止在切换应用时出现透视效果。它定义了此装饰层的颜色和 Alpha 等属性。如果尚未设置装饰层（例如边界和层）的属性，则默认使用变体的属性。

示例代码

<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），并引用一个变体属性（另一个变体的 ID）。这些 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>