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

De Appmethod Topics
Aller à : navigation, rechercher

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


Ce tutoriel décrit la stratégie qui consiste à utiliser une fiche commune pour différents facteurs de forme (comme le téléphone ou la tablette) sans avoir besoin d'utiliser des fiches différentes pour chaque facteur de forme.

Dans le Concepteur de fiches mobiles FireMonkey, vous pouvez prévisualiser l'interface utilisateur sans qu'il soit nécessaire d'exécuter l'application sur un périphérique ; il vous suffit de choisir un autre périphérique ou de changer l'orientation dans la liste déroulante située dans le coin supérieur droit :

SelectDeviceFormFactor.png

Pour de plus amples informations, voir Paramètres du périphérique mobile.

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 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 et 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 (1) composant qui utilise Client.

AlClientOnLandscapeOrPortlaitForm2.png

Utilisation de la propriété Margins

Margins assure la séparation entre des contrôles positionnés automatiquement 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, comme les marges d'une page imprimée. Dans l'Inspecteur d'objets, vous pouvez définir les valeurs (en pixels) de 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 de saisie

Si un contrôle de saisie est placé sur une barre d'outils, il est souhaitable de garder une distance fixe entre le bord droit du contrôle de saisie et le bord de la fiche (plus précisément de la barre d'outils). 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 de saisie 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 de saisie 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 seulement 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.

Manipulation d'une interface encombrée : Utilisation du composant TVertScrollBox

Généralement, il faut éviter d'avoir trop d'éléments dans une fiche, car cela oblige les utilisateurs à faire défiler l'interface utilisateur. Très souvent, le défilement peut être évité en utilisant un composant TabControl composé de plusieurs pages.

Si vous devez placer beaucoup d'éléments sur votre fiche, vous pouvez utiliser un composant TVertScrollBox pour définir une zone de défilement comme décrit ci-dessous :

  1. Sélectionnez Périphérique personnalisé sur le Concepteur de fiches mobiles FireMonkey.
    SelectCustomDevice01.png

  2. Changez la taille du périphérique personnalisé en faisant glisser le bord du concepteur de façon à obtenir la forme et la taille voulues.
  3. Déposez un composant TVertScrollBox et définissez sa propriété Align sur Client. Le composant TVertScrollBox occupe la totalité de la zone client.
  4. Localisez les composants sur le composant TVertScrollBox :
    ChangeSizeOfCustomDevice.png

Vous pourrez faire défiler cette fiche à l'exécution par un mouvement de glissement sur l'interface utilisateur.

Voir aussi