Utiliser une variante pour concevoir un état visuel

Une variante définit un état visuel spécifique pour un panneau, ce qui permet à un même panneau d'avoir plusieurs représentations visuelles distinctes, comme un état ouvert ou fermé. Utilisez le format XML pour configurer la variante. Utilisez une sous-balise dans un élément <Panel>.

Chaque balise <Variant> possède un attribut id obligatoire pour l'identifier de manière unique. Le tag peut également faire référence à une variante parente pour hériter des propriétés. Ce mécanisme d'héritage permet de définir efficacement des propriétés communes à plusieurs variantes.

Attributs XML

Pour définir des états et des transitions, utilisez ces attributs avec la balise <TaskPanel> ou <DecorPanel>.

Attribut État Description
id Obligatoire Identifiant unique de la variante. Cet ID est utilisé pour faire référence à la variante dans les transitions ou comme defaultVariant pour un panneau.
parent Facultatif Spécifie l'ID d'une autre variante à partir de laquelle la variante actuelle doit hériter des propriétés. Si une propriété n'est pas explicitement définie dans la variante actuelle, elle reprend la valeur définie dans sa variante parente.

Éléments enfants XML

Utilisez ces éléments facultatifs pour spécifier les caractéristiques visuelles du panneau lorsqu'il se trouve dans l'état de cette variante.

Élément enfant Description
<Visibility> Indique si le panneau est visible ou masqué et contient un attribut isVisible (booléen).
<Alpha> Spécifie le niveau de transparence du panneau. Contient un attribut alpha (float, de 0.0 à 1.0).
<Layer> Définit l'ordre Z du panneau par rapport aux autres panneaux. Contient un attribut layer (entier). Les valeurs les plus élevées sont affichées au-dessus.
<Focus> Indique si le panneau peut être sélectionné lors d'une transition. Contient un attribut onTransition (booléen).
<Bounds>

Définit la zone rectangulaire (position et taille) du panneau sur l'écran. Cette zone est contrôlée par des attributs tels que "left" (gauche), "top" (haut), "bottom" (bas), "width" (largeur) et "height" (hauteur).

  • left et right spécifient la distance par rapport au bord gauche de l'écran.
  • top et bottom spécifient la distance par rapport au bord supérieur de l'écran.
  • width et height spécifient la largeur et la hauteur du rectangle. Ils ne sont nécessaires que lorsque left et right (ou top et bottom) ne sont pas spécifiés.
  • dimensions peut être spécifié en pixels, en DP, en pourcentage ou en références de ressources.

Lorsque vous utilisez des pourcentages, vous pouvez utiliser des attributs de décalage pour appliquer des ajustements fixes aux limites basées sur des pourcentages : leftOffset, topOffset, rightOffset et bottomOffset.

Par exemple, pour qu'un panneau occupe 100 % de la hauteur de l'écran tout en excluant une barre de navigation à hauteur fixe en bas, définissez la hauteur sur 100 % et le bottomOffset sur la hauteur fixe de la barre de navigation. Le bord inférieur du panneau est alors tiré vers le haut.
<SafeBounds> Spécifie une zone sécurisée dans les limites du panneau qui n'est pas chevauchée par les encoches ou les encarts, afin de souligner la compatibilité pour les applications affichées à l'intérieur. Ses attributs sont semblables à ceux de <Bounds>.
<Corner> Définit le rayon des angles du panneau, ce qui permet d'avoir des angles arrondis. Contient un attribut de rayon (entier). Un angle vif est la valeur par défaut et n'a pas besoin d'être défini.
<Insets>

Spécifie les encarts (marge intérieure) pour le panneau. Il contient les attributs "left", "top", "right" et "bottom". Ces encarts sont signalés aux applications lancées dans le panneau.

  • left spécifie l'encart à gauche.
  • right spécifie l'encart sur le côté droit. Par exemple, une marge intérieure droite de zéro indique qu'il n'y a pas de marge intérieure sur le côté droit.
  • top spécifie l'encart sur le côté supérieur.
  • bottom spécifie l'encart sur le côté inférieur. Par exemple, une marge intérieure droite de zéro indique qu'il n'y a pas de marge intérieure à droite.
<Background> Ajout d'un panneau de décoration d'arrière-plan facultatif pour éviter les effets de transparence lors du changement d'application. Il définit des propriétés telles que la couleur et l'alpha pour ce calque de décoration. Les propriétés du calque de décoration, telles que les limites et le calque, sont définies par défaut sur les propriétés de la variante lorsqu'elles ne sont pas déjà définies.

Exemple de code

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

Interpoler les propriétés visuelles

Utilisez KeyFrameVariant pour interpoler les propriétés visuelles. Cette extension spécialisée de variant est basée sur une valeur fractionnaire continue (de 0 à 1) qui permet des transitions fluides et dynamiques pilotées par une entrée continue, telle qu'une opération de déplacement lorsque l'état du panneau change de manière dynamique en fonction de la quantité de déplacement.

Attributs XML

KeyFrameVariant ne comporte aucun attribut. La balise <KeyFrameVariant> contient les informations nécessaires pour définir un KeyFrameVariant.

Éléments enfants XML

KeyFrameVariant contient une ou plusieurs balises enfants <KeyFrame>. Chaque <KeyFrame> possède un attribut framePosition (0 à 100) et fait référence à un attribut de variante (l'ID d'une autre variante). Ces keyframes définissent l'état du panneau à des points spécifiques d'une transition continue.

Code Samole

<KeyFrameVariant id="@id/panel_resizing">
    <KeyFrame framePosition="0" variant="@id/minimized"/>
    <KeyFrame framePosition="75" variant="@id/opened"/>
    <KeyFrame framePosition="100" variant="@id/expanded"/>
</KeyFrameVariant>
Précédent
Configurer un panneau
Suivant
Configurer les transitions