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 principal para heredar propiedades. Este mecanismo de herencia permite definir de manera eficiente propiedades comunes en varias variantes.

Atributos XML

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

Atributo Estado Descripción
id Obligatorio Es el identificador único de la variante. Este ID se usa para hacer referencia a la variante en las transiciones o como 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 principal.

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 u oculto y contiene un atributo isVisible (booleano).
<Alpha> Especifica el nivel de transparencia del panel y contiene un atributo alpha (número de punto flotante, de 0.0 a 1.0).
<Layer> Establece el orden Z del panel en relación con otros paneles; contiene un atributo layer (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 atributo onTransition (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 son necesarios 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 desplazamiento 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 del borde inferior del panel hacia arriba.
<SafeBounds> Especifica un área segura dentro de los límites del panel que no se superpone con los cortes o las inserciones de pantalla, para destacar la compatibilidad con las apps dibujadas dentro de ella. Sus atributos son similares a los de <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 de izquierda, arriba, derecha y abajo. Estos ajustes 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, un valor cero en la inserción derecha 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 a la derecha de cero indica que no hay inserciones en el lado derecho.
<Background> Se agregó un panel de decoración de fondo opcional para evitar efectos de transparencia 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 se han establecido.

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>

Cómo interpolar propiedades visuales

Usa KeyFrameVariant para interpolar propiedades visuales. Esta extensión especializada de variant se basa en un valor fraccionario continuo (de 0 a 1) que permite transiciones dinámicas y fluidas 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 atributo framePosition (de 0 a 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