Usa una variante para diseñar un estado visual

Una variante define un estado visual específico para un panel, lo que permite que un solo panel tenga varias representaciones visuales distintas, como un estado abierto o cerrado. Usa XML para configurar la variante. Usa una etiqueta secundaria dentro de un elemento <Panel>.

Cada etiqueta <Variant> tiene un atributo id obligatorio para identificarla de forma única. La etiqueta también puede hacer referencia a una variante superior para heredar propiedades. Este mecanismo de herencia permite la definición eficiente de propiedades comunes en varias variantes.

Atributos XML

Para definir estados y transiciones, usa estos atributos con la <TaskPanel> o <DecorPanel> etiqueta.

Atributo Estado Descripción
id Obligatorio Identificador único de la variante. Este ID se usa para hacer referencia a la variante en las transiciones o como el defaultVariant para un panel.
parent Opcional Especifica el ID de otra variante de la que la variante actual debe heredar propiedades. Si una propiedad no se define de forma explícita en la variante actual, se recurre al valor definido en su variante superior.

Elementos secundarios XML

Usa estos elementos opcionales para especificar las características visuales del panel cuando se encuentra en el estado de esta variante.

Elemento secundario Descripción
<Visibility> Especifica si el panel está visible o oculto y contiene un isVisible atributo (booleano).
<Alpha> Especifica el nivel de transparencia del panel; contiene un alpha atributo (flotante, de 0.0 a 1.0).
<Layer> Establece el orden Z del panel en relación con otros paneles; contiene un layer atributo (número entero). Los valores más altos se dibujan en la parte superior.
<Focus> Especifica si el panel puede obtener el enfoque durante una transición; contiene un onTransition atributo (booleano).
<Bounds>

Define el área rectangular (posición y tamaño) del panel en la pantalla. Esta área se controla con atributos como left, top, bottom, width y height.

  • left y right especifican la distancia desde el borde izquierdo de la pantalla.
  • top y bottom especifican la distancia desde el borde superior de la pantalla.
  • width y height especifican el ancho y la altura del rectángulo, y solo se necesitan cuando no se especifican left y right (o top y bottom).
  • dimensions se puede especificar en píxeles, DP, porcentajes, o referencias de recursos.

Cuando usas porcentajes, puedes emplear atributos de compensación para aplicar ajustes fijos a los límites basados en porcentajes: leftOffset, topOffset, rightOffset y bottomOffset.

Por ejemplo, para designar que un panel ocupe el 100% de la altura de la pantalla y, al mismo tiempo, excluir una barra de navegación de altura fija en la parte inferior, establece la altura en 100% y el bottomOffset en la altura fija de la barra de navegación. Al hacerlo, se tira hacia arriba del borde inferior del panel.
<SafeBounds> Especifica un área segura dentro de los límites del panel que no se superpone con los cortes de pantalla ni las inserciones, para destacar la compatibilidad con las apps que se dibujan dentro de ella. Sus atributos son similares a <Bounds>.
<Corner> Define el radio de las esquinas del panel, lo que permite esquinas redondeadas y contiene un atributo de radio (número entero). Una esquina afilada es el valor predeterminado y no es necesario definirla.
<Insets>

Especifica las inserciones (padding) del panel. Contiene atributos left, top, right y bottom. Estas inserciones se informan a las apps que se inician dentro del panel.

  • left especifica la inserción en el lado izquierdo.
  • right especifica la inserción en el lado derecho. Por ejemplo, una inserción derecha cero indica que no hay inserciones en el lado derecho.
  • top especifica la inserción en el lado superior.
  • bottom especifica la inserción en el lado inferior. Por ejemplo, una inserción derecha cero indica que no hay inserciones en el lado derecho.
<Background> Presenta un panel de decoración de fondo opcional para evitar efectos transparentes cuando se cambian las apps. Define propiedades como el color y el alfa para esta capa de decoración. Las propiedades de la capa de decoración, como los límites y la capa, se establecen de forma predeterminada en las propiedades de la variante cuando aún no están configuradas.

Código de muestra

<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>

Interpola propiedades visuales

Usa KeyFrameVariant para interpolar propiedades visuales. Esta extensión especializada de variant se basa en un valor fraccional continuo (de 0 a 1) que permite transiciones fluidas y dinámicas impulsadas por una entrada continua, como una operación de arrastre cuando el estado del panel cambia de forma dinámica con la cantidad de arrastre.

Atributos XML

KeyFrameVariant no tiene atributos. La etiqueta <KeyFrameVariant> contiene la información necesaria para definir un KeyFrameVariant.

Elementos secundarios XML

KeyFrameVariant contiene una o más etiquetas secundarias <KeyFrame>. Cada <KeyFrame> tiene un framePosition atributo (0-100) y hace referencia a un atributo de variante (el ID de otra variante). Estos keyframes definen el estado del panel en puntos específicos de una transición continua.

Código de muestra

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Anterior
Cómo configurar un panel
Siguiente
Cómo configurar transiciones