Stratégies des dispositions FireMonkey

De RAD Studio
Aller à : navigation, rechercher

Remonter à Arrangement des contrôles FireMonkey

Les dispositions FireMonkey sont des conteneurs pour les autres objets graphiques qui peuvent être utilisés pour construire des interfaces complexes avec un attrait visuel. Les dispositions FireMonkey étendent les fonctionnalités de TControl pour contrôler l'arrangement, le dimensionnement et la mise à l'échelle de leurs contrôles enfant, et offrent la possibilité de manipuler un groupe de contrôles dans son ensemble.

L'utilisation de propriétés telles que Position, Align, Margins et Padding avec Anchors et des dispositions peut conduire à des interfaces complexes sans utiliser explicitement des calculs complexes.

Exemples d'interfaces :

ClockFace.png Calculator interface.png Final pattern at run time1.png

Les dispositions disponibles se trouvent dans la palette d'outils, sous la catégorie Dispositions.

Pour utiliser une disposition, effectuez simplement un glisser-déposer de la disposition de la palette d'outils sur la fiche.

               Layouts in tool palette.png

Types de dispositions

Les dispositions FireMonkey peuvent être séparées en plusieurs catégories :

Conteneur simple

               TLayouts.png TLayout.

Un conteneur simple n'est pas visible à l'exécution et il peut être utilisé pour regrouper d'autres contrôles à manipuler dans leur ensemble. Par exemple, vous pouvez définir la visibilité d'un groupe de contrôles à un moment donné en définissant seulement la propriété Visible de la disposition. TLayout ne définit pas automatiquement les propriétés de ses enfants.

Pour obtenir des interfaces complexes avec TLayout, utilisez plusieurs dispositions et les propriétés d'arrangement des contrôles enfant des dispositions, et des dispositions elles-mêmes. Par exemple, un moyen facile d'obtenir une distribution circulaire des contrôles consiste à définir l'emplacement initial d'un TLayout avec les contrôles à l'intérieur, puis à copier et à coller les dispositions positionnées, en conservant le même emplacement et en changeant l'angle de rotation.

Disposition à l'échelle

TScaleLayouts.pngTScaledLayout.

Une disposition à l'échelle est un conteneur qui offre la possibilité de mettre à l'échelle un groupe d'objets graphiques en fonction des dimensions physiques de la disposition. Les contrôles enfant s'étirent le long de la disposition lors de son redimensionnement. TScaledLayout conserve sa taille originale à travers les propriétés OriginalWidth et OriginalHeight.

Original size.png Scratched width.png Scratched height.png

Disposition de défilement

ScrollLayouts.png TScrollBox

Une disposition de défilement offre la possibilité de faire défiler des groupes d'objets graphiques. Vous pouvez utiliser des zones de défilement pour créer des zones défilantes au sein d'une fiche. Ces zones sont appelées vues. Les vues sont fréquentes dans les traitements de texte, les tableurs et les applications de gestion des projets.

Un simple TScrollBox n'est pas encadré, et à l'exécution les contrôles enfant et la barre de défilement sont visibles, sans délimitation visible sur les côtés supérieur et gauche de la zone défilée. Pour délimiter la zone défilée, utilisez TFramedScrollBox.

Scroll Boxes.png

Remarque : Vous devez ancrer les enfants d'une disposition de défilement uniquement sur le bord gauche ou le bord supérieur. Plus précisément, n'ancrez pas les enfants d'une disposition de défilement sur le bord droit ou le bord inférieur. Si la propriété Anchors d'un enfant de disposition de défilement est définie sur akBottom, akRight, ou les deux, l'enfant continue à s'étirer afin de conserver une distance constante aux bords de la disposition quand la taille du contenu de la disposition est en cours de calcul.

Défilement inertiel lent

Sous iOS, Mac OS et Android, une vue défilante répond à la vitesse et à la direction des mouvements pour afficher le contenu de façon naturelle pour l'utilisateur. Quand l'utilisateur fait glisser un contenu dans une vue défilante, le contenu suit les mouvements tactiles ; quand il effectue un mouvement sur un contenu, la vue défilante affiche rapidement le contenu et arrête le défilement quand l'utilisateur touche l'écran ou quand la fin du contenu est atteinte.

FireMonkey fournit l'unité InertialMovement, qui implémente ces mouvements inertiels lents d'une vue défilante sous Windows. En définissant les propriétés de défilement inertiel dans la classeTAniCalculations, vous pouvez personnaliser le comportement d'une vue défilante en réponse à la saisie tactile (avec la souris ou le doigt). La classe TAniCalculations permet d'émuler les mouvements inertiels lents d'une vue défilante sur les plates-formes Windows.

Dans le TScrollBox et les classes descendantes, la propriété AniCalculations gère le support du défilement inertiel lent de la fenêtre d'affichage au sein du contenu dans son ensemble. Dans la mesure où AniCalculations est une propriété publique (qui n'a pas de visibilité publiée), vous ne pouvez pas définir les propriétés de défilement dans l'inspecteur d'objets. A la place, vous devez définir par programmation les propriétés de défilement de l'objet AniCalculations.

Nous fournissons l'exemple de code FMXTAniCalculations pour montrer comment définir les propriétés de défilement par programmation.

Dispositions à arrangement prédéfini

FireMonkey fournit les dispositions TFlowLayout, TGridLayout et TGridPanelLayout qui implémentent automatiquement des arrangements prédéfinis des contrôles enfant dans des volets semblables à des grilles.

TFlowLayout

TFlowLayout.png TFlowLayout arrange ses contrôles enfant comme les mots d'un paragraphe.

Lors de l'utilisation d'un TFlowLayout, les contrôles enfant sont arrangés et affichés dans la disposition en suivant leur ordre d'ajout dans la disposition. Pour commencer l'affichage des contrôles enfant dans une nouvelle ligne, ajoutez un TFlowLayoutBreak. Le comportement résultant est semblable à celui obtenu en ajoutant une nouvelle ligne à un paragraphe de texte. TFlowLayout suit un ensemble de règles pour arranger ses enfants. Ces règles peuvent être personnalisées par le biais de ces propriétés : Justify, JustifyLastLine, VerticalGap et HorizontalGap.
Par défaut, les contrôles ajoutés à un TFlowLayout après un TFlowLayoutBreak sont arrangés en suivant les règles spécifiées par TFlowLayout. Ce comportement peut être changé en définissant la propriété ChangesRules de la classe TFlowLayoutBreak sur True. Si ChangesRules est définie sur True, les contrôles enfant ajoutés après le TFlowLayoutBreak sont positionnés en suivant les règles spécifiées par les propriétés TFlowLayoutBreak, jusqu'à ce que tous les contrôles soient affichés ou qu'un autre TFlowLayoutBreak soit trouvé.

TGridLayout

TGridLayout.png TGridLayout arrange les contrôles enfant dans une grille de cellules de taille égale.

Lors de l'utilisation de TGridLayout, les contrôles enfant sont redimensionnés afin de tenir dans les tailles spécifiées par les propriétés ItemHeight et ItemWidth. Les propriétés Height et Width des contrôles enfant sont automatiquement définies, et le changement explicite de leur valeur n'a pas d'effet.
FlowLayout and GridLayout.png
Vous pouvez toutefois personnaliser les tailles des boutons à l'aide des propriétés Margins des contrôles enfant. Par exemple, l'image suivante illustre l'utilisation de différentes marges pour les contrôles enfant Button5, Button6, Button7 et Button8 :
GridLayout 2.png
Ici nous définissons :
Découvrez comment les contrôles enfant sont redimensionnés et positionnés dans les cellules respectives de la grille.
Quand vous utilisez la disposition TGridLayout, les propriétés Position, Align et Anchors des contrôles enfant sont automatiquement définies. Le changement explicite de ces propriétés est ignoré.

TGridPanelLayout

TGridPanelLayout.png TGridPanelLayout organise les contrôles enfant dans un volet grille.

Chaque contrôle enfant est placé dans une cellule d'un volet grille. Contrairement à TGridLayout, vous pouvez redimensionner et aligner manuellement les contrôles enfant placés dans des cellules sur TGridPanelLayout.
C'est-à-dire, en utilisant la disposition TGridPanelLayout, vous pouvez définir explicitement les propriétés Height et Width des contrôles enfant. Vous pouvez aussi définir explicitement les propriétés Align et Anchors des contrôles enfant.
GridPanelLayout.png
En utilisant la disposition TGridPanelLayout, vous pouvez spécifier qu'un contrôle enfant occupe plusieurs cellules. Par exemple, observez la figure suivante :
GridPanelLayout 2.png
Ici, le bouton B4 occupe deux cellules dans la colonne la plus à droite, le bouton B5 occupe quatre cellules dans deux lignes et deux colonnes et le bouton B8 occupe trois cellules dans la ligne du bas.
L'astuce suivante permet de spécifier qu'un contrôle enfant doit occuper plusieurs cellules :
  • Dans la vue Structure, localisez le noeud disposition TGridPanelLayout souhaité.
  • Sous ce noeud, localisez le noeud Control Collection respectif.
  • Parmi les éléments contrôles présents dans ce noeud Control Collection, sélectionnez l'élément associé au contrôle enfant souhaité. L'inspecteur d'objets affiche les propriétés de cet élément contrôle.
  • Dans la propriété ColumnSpan, tapez le nombre de cellules pouvant être occupées par l'élément contrôle dans la colonne respective (spécifiée dans la propriété Column).
  • Dans la propriété RowSpan, tapez le nombre de cellules pouvant être occupées par l'élément contrôle dans la ligne respective (spécifiée dans la propriété Row).

Dispositions pour les applications 3D

Après l'ajout d'une couche à la fiche 3D, arrangez les contrôles 2D en utilisant les dispositions comme dans une application 2D.

Layouts in 3d applications.png

Layouts in 3d applications.png

Voir aussi

Exemples de code

Tutoriels