Tutoriel mobile : Utilisation de la disposition pour ajuster différentes tailles de fiches ou orientations (iOS et Android)

De RAD Studio
Aller à : navigation, rechercher

Remonter à Tutoriels mobiles : Développement d'applications mobiles (iOS et Android)

Ce tutoriel décrit une stratégie générale pour l'utilisation de la vue maître pour différents facteurs de forme (comme le téléphone ou la tablette) sans utiliser des vues différentes pour chaque facteur de forme.

Chaque composant FireMonkey peut avoir un propriétaire, un parent et des enfants

Premièrement, chaque composant FireMonkey a le concept de Propriétaire, Parent et Enfants. Si vous placez un composant sur une fiche, la fiche devient le propriétaire et le parent du composant.

Si vous ajoutez des composants (tels qu'un Bouton, un Libellé, etc.) dans d'autres composants (par exemple une Barre d'outils), la Barre d'outils devient le parent et le propriétaire du Bouton, du Libellé et des autres composants. Cette relation parent-enfant est représentée graphiquement dans la vue arborescente de la vue Structure.

La disposition d'un enfant est définie en tant que valeur relative à son parent. Dans la figure suivante, Label1 est l'enfant de Toolbar1, et la disposition de Label1 est relative à Toolbar1.

OwnerParentAndChildren.png

Utilisation des propriétés communes relatives à la disposition d'un composant FireMonkey

Utilisation de la propriété Align

La propriété Align d'un contrôle détermine s'il est automatiquement repositionné et/ou redimensionné le long des quatre côtés ou du centre de son parent, initialement et au fur et à mesure que le parent est redimensionné.

La valeur par défaut de la propriété Align est None, ce qui signifie qu'aucun calcul automatique n'est effectué : le contrôle reste à son emplacement :

Align = None

AlNone.png

Les valeurs typiques de la propriété Align sont comme suit (le bleu ciel indique la zone relative à l'enfant) :

Top Bottom
AlTop.png AlBottom.png
Left Right
AlLeft.png AlRight.png
Center Client
AlCenter.png AlClientLayout.png

Si vous utilisez l'une des valeurs Top, Bottom, Left ou Right de la propriété Align pour un composant, les propriétés Align des autres composants utilisent la zone restante.

La taille et la forme de la zone restante (Client) changent également en fonction de l'orientation du périphérique ou du facteur de forme (iPhone ou iPad).

Les images suivantes montrent la disposition en mode paysage (horizontal) et portrait (vertical) lorsque vous avez deux composants qui utilisent Top et un composant qui utilise Client.

AlClientOnLandscapeOrPortlaitForm2.png

Utilisation de la propriété Margins

Margins garantit une séparation entre les contrôles automatiquement positionnés par un parent.

Dans l'image suivante, le côté droit du composant (Align = Client) utilise la propriété Margins pour garantir un peu d'espace autour du composant.

UsingPaddingProperty2.png

Utilisation de la propriété Padding

Padding définit un espace à part sur l'intérieur de la zone de contenu du parent. Dans l'inspecteur d'objets, vous pouvez définir des valeurs (en pixels) pour la propriété Padding :

  • Left
  • Right
  • Bottom
  • Top

Dans l'image suivante, le composant parent (qui contient deux régions) utilise la propriété Padding pour garantir de l'espace à l'intérieur du composant parent :

UsingMarginsProperty2.png

Utilisation de la propriété Anchors

Les ancrages sont nécessaires quand un contrôle doit maintenir sa position à une certaine distance des bords de son parent, ou doit s'étirer tout en maintenant la distance originale entre ses bords et ceux de son parent. Les contrôles ancrés sont 'attachés' aux côtés des conteneurs, et aussi étirés si spécifié.

Propriété Anchors pour le contrôle Edit

Si un contrôle Edit est placé sur un ToolBar, il est souhaitable de garder une distance fixe entre le bord droit du contrôle Edit et le bord de la fiche (ToolBar). Les ancrages permettent de spécifier qu'un contrôle doit rester fixe dans une relation avec les côtés de ses parents.

Si vous souhaitez que le contrôle Edit garde la même relation positive avec la barre d'outils (son parent), vous pouvez définir la propriété Anchors sur akLeft, akTop, akRight. Lorsque la barre d'outils est redimensionnée, le contrôle Edit est également redimensionné en fonction des paramètres de la propriété Anchors :

iOS

AkRightForEditControl.png

Android

AkRightForEditControlAndroid.png


Propriété Anchors pour un contrôle Bouton

Si un contrôle Bouton est placé sur l'extrémité droite de la barre d'outils, il est souhaitable de garder la même distance entre le bord droit du contrôle Bouton et le bord de la fiche. Toutefois, il n'est pas souhaitable de garder la même distance entre le bord gauche du contrôle Bouton et le bord gauche de la fiche. Dans ce cas, vous pouvez définir la propriété Anchors sur akTop, akRight (désélectionnez akLeft), afin que le contrôle Bouton conserve les mêmes distances avec la barre d'outils (le parent) pour Top et Right.

iOS :

AkRightForButtonControl.png

Android :

AkRightForButtonControlAndroid.png

Utilisation du composant TLayout

TLayout, un composant non visible à l'exécution, peut être utilisé pour regrouper ses contrôles enfant afin qu'ils puissent être manipulés comme un tout. Par exemple, vous pouvez définir la visibilité d'un groupe de contrôles à un moment donné en définissant la propriété Visible de la disposition. TLayout ne définit pas automatiquement les propriétés de ses enfants.

Pour que les contrôles sélectionnés deviennent les enfants de TLayout, vous devez utiliser la vue Structure.
Mettez en surbrillance les contrôles que vous voulez déplacer. Faites glisser ensuite le groupe de contrôles sur le contrôle qui sera le parent, puis déposez les contrôles à cet endroit. Dans la vue Structure, le groupe de contrôles apparaît maintenant comme l'enfant du nouveau parent :

1. Etat initial 2. Mettez en surbrillance les contrôles à déplacer   3. Faites glisser sur le parent

Tlayer1.png

Tlayer2.png

TLayer3.png

Vous pouvez utiliser Align, Padding, Margins, Anchors et d'autres propriétés de TLayout pour définir la disposition d'une zone particulière. Vous pouvez utiliser le composant TLayout de la même façon qu'une balise DIV en HTML.


Voir aussi