Usar uma variante para criar um estado visual

Uma variante define um estado visual específico para um painel, permitindo que um único painel tenha várias representações visuais distintas, como um estado aberto ou fechado. Use XML para configurar a variante. Use uma subtag em um elemento <Panel>.

Cada tag <Variant> tem um atributo id obrigatório para identificação exclusiva. A tag também pode se referir a uma variante principal para herdar propriedades. Esse mecanismo de herança permite a definição eficiente de propriedades comuns em várias variantes.

Atributos XML

Para definir estados e transições, use esses atributos com a tag <TaskPanel> ou <DecorPanel>.

Atributo Status Descrição
id Obrigatório Identificador exclusivo da variante. Esse ID é usado para se referir à variante em transições ou como o defaultVariant de um painel.
parent Opcional Especifica o ID de outra variante de que a variante atual deve herdar propriedades. Se uma propriedade não for definida explicitamente na variante atual, ela vai usar o valor definido na variante principal.

Elementos filhos XML

Use estes elementos opcionais para especificar as características visuais do painel quando ele está no estado desta variante.

Elemento filho Descrição
<Visibility> Especifica se o painel está visível ou oculto e contém um atributo isVisible (booleano).
<Alpha> Especifica o nível de transparência do painel e contém um atributo alpha (float, 0,0 a 1,0).
<Layer> Define a ordem Z do painel em relação a outros painéis. Contém um atributo layer (número inteiro). Valores mais altos são mostrados na parte de cima.
<Focus> Especifica se o painel pode ganhar foco durante uma transição. Contém um atributo onTransition (booleano).
<Bounds>

Define a área retangular (posição e tamanho) do painel na tela. Essa área é controlada por atributos como esquerda, superior, inferior, largura e altura.

  • left e right especificam a distância da borda esquerda da tela.
  • top e bottom especificam a distância da borda superior da tela.
  • width e height especificam a largura e a altura do retângulo e são necessários apenas quando left e right (ou top e bottom) não são especificados.
  • dimensions pode ser especificado em pixels, DP, porcentagens ou referências de recursos.

Ao usar porcentagens, é possível empregar atributos de ajuste para aplicar ajustes fixos aos limites baseados em porcentagem: leftOffset, topOffset, rightOffset e bottomOffset.

Por exemplo, para designar que um painel ocupe 100% da altura da tela, excluindo uma barra de navegação de altura fixa na parte de baixo, defina a altura como 100% e o bottomOffset como a altura fixa da barra de navegação. Isso puxa a borda inferior do painel para cima.
<SafeBounds> Especifica uma área segura dentro dos limites do painel que não é sobreposta por cortes ou encartes da tela, para enfatizar a compatibilidade com apps renderizados dentro dela. Os atributos são semelhantes a <Bounds>.
<Corner> Define o raio dos cantos do painel, permitindo cantos arredondados e contém um atributo de raio (número inteiro). Um canto agudo é o padrão e não precisa ser definido.
<Insets>

Especifica os encartes (padding) do painel. Ele contém atributos à esquerda, acima, à direita e abaixo. Esses encartes são informados aos apps iniciados no painel.

  • left especifica o encarte no lado esquerdo.
  • right especifica o encarte no lado direito. Por exemplo, um encarte direito zero indica que não há encartes no lado direito.
  • top especifica o encarte na parte de cima.
  • bottom especifica o recuo na parte de baixo. Por exemplo, uma inserção direita zero indica que não há inserções no lado direito.
<Background> Apresenta um painel de decoração de plano de fundo opcional para evitar efeitos de transparência ao trocar de apps. Ele define propriedades como cor e alfa para essa camada de decoração. As propriedades da camada de decoração, como limites e camada, são definidas como as propriedades da variante quando ainda não estão definidas.

Exemplo de código

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

Interpolar propriedades visuais

Use KeyFrameVariant para interpolar propriedades visuais. Essa extensão especializada de variant se baseia em um valor fracionário contínuo (de 0 a 1) que permite transições suaves e dinâmicas impulsionadas por entrada contínua, como uma operação de arrastar quando o estado do painel muda dinamicamente com a quantidade de arrasto.

Atributos XML

KeyFrameVariant não tem atributos. A tag <KeyFrameVariant> contém as informações necessárias para definir um KeyFrameVariant.

Elementos filhos XML

KeyFrameVariant contém uma ou mais tags filhas <KeyFrame>. Cada <KeyFrame> tem um atributo framePosition (0 a 100) e se refere a um atributo de variante (o ID de outra variante). Esses keyframes definem o estado do painel em pontos específicos de uma transição contínua.

Código de exemplo

<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
Configurar um painel
Avançar
Configurar transições