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 identificá-la de forma 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 <TaskPanel> ou <DecorPanel> tag.

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

Elementos filhos XML

Use esses elementos opcionais para especificar as características visuais do painel quando ele estiver no estado dessa variante.

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

Define a área retangular (posição e tamanho) do painel na tela. Essa área é controlada por atributos como left, top, bottom, width e height.

  • 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ó são necessários 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 deslocamento 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 recuos de exibição, para destacar a compatibilidade com apps desenhados nela. Os atributos são semelhantes a <Bounds>.
<Corner> Define o raio dos cantos do painel, permitindo cantos arredondados cantos e contém um atributo de raio (inteiro). Um canto nítido é o padrão e não precisa ser definido.
<Insets>

Especifica os recuos (padding) do painel. Ele contém atributos left, top, right e bottom. Esses recuos são informados aos apps iniciados no painel.

  • left especifica o recuo no lado esquerdo.
  • right especifica o recuo no lado direito. Por exemplo, um recuo direito zero indica que não há recuos no lado direito.
  • top especifica o recuo na parte de cima.
  • bottom especifica o recuo na parte de baixo. Por exemplo, um recuo direito zero indica que não há recuos no lado direito.
<Background> Apresenta um painel de decoração de plano de fundo opcional para evitar efeitos transparentes quando os apps são trocados. 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 é baseada 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 em uma transição contínua.

Exemplo de código

<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