Tutoriel mobile : Utilisation d'un composant Bouton avec différents styles (iOS et Android)

De Appmethod Topics
Aller à : navigation, rechercher

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


Boutons dans les applications mobiles FireMonkey

FireMonkey définit plusieurs types de boutons que vous pourrez utiliser en suivant les étapes décrites dans ce tutoriel. Les boutons FireMonkey comprennent TButton et TSpeedButton.

Vous trouverez ci-après quelques exemples des divers styles de composants Bouton à utiliser à différents endroits de l'interface utilisateur de votre application mobile :

  • Boutons placés sur la fiche :
iOS 6 iOS 7 Android

Tint Buttons IOS6.png

Tint Buttons IOS7.png

Tint Buttons Android.png

IOSSegmentedControl.png

IOS7 SegmentedControl.png

AndroidSegmentedControl.png
  • Boutons placés sur la barre de navigation (aussi appelée Barre d'outils) :
iOS 6 iOS 7 Android

IOSToolBarAndBackButton.png

IOS7 ToolBarAndBackButton.png

AndroidToolBarAndBackButton.png

IOSToolBarWithArrowButtons.png

IOS7 ToolBarWithArrowButtons.png

AndroidToolBarWithArrowButtons.png

IOSToolBarCancelDoneButtons.png

IOS7 ToolBarCancelDoneButtons.png

AndroidToolBarCancelDoneButtons.png

IOSToolBarWithPlusButton.png

IOS7 ToolBarWithPlusButton.png

AndroidToolBarWithPlusButton.png

IOS6 ToolBarWIthToolButtonIcons.png

IOS7 ToolBarWIthToolButtonIcons.png

AndroidToolBarWIthColoredToolButtons.png

IOSScopeBar.png

IOS7 ScopeBar.png

AndroidScopeBar.png

Définition de l'apparence d'un composant Bouton

Après avoir placé un nouveau bouton sur le Concepteur mobile FireMonkey, vous pouvez spécifier d'importantes propriétés pour le composant sélectionné en utilisant l'inspecteur d'objets.

Sélectionnez un composant (dans ce cas, un bouton), puis modifiez les valeurs de certaines propriétés en procédant comme suit :

  • Changez le texte affiché à la surface du bouton en modifiant la valeur de la propriété Text.
  • Changez la valeur des propriétés Position.X et Position.Y (ou faites glisser le composant en utilisant la souris).
  • Changez la valeur des propriétés Height et/ou Width (ou faites glisser le bord du composant en utilisant la souris).
  • Cliquez sur la flèche vers le bas de la propriété StyleLookup.
    Dans la liste déroulante StyleLookup, sélectionnez un style prédéfini en fonction de la façon dont votre composant est utilisé :

    IOSButtonStyleLookup.png
  • Pour modifier la couleur d'un bouton, changez les valeurs des propriétés Tint et IconTintColor. La dernière propriété est disponible uniquement pour les boutons stylés avec icônes.

Utilisation de TintColor sur des boutons

Pour TButton et TSpeedButton, FireMonkey fournit deux propriétés qui déterminent la nuance ou la couleur du bouton :

  • TintColor spécifie la couleur d'arrière-plan du bouton.
  • IconTintColor spécifie la couleur de l'icône sur les boutons stylés.

Pour la plate-forme cible Android, vous pouvez appliquer une nuance à des boutons quel que soit leur style.

Pour la plate-forme cible iOS, FireMonkey fournit des boutons qui correspondent au Guide de style Apple. Il se peut que certains boutons ne supportent pas la fonction de nuance. Par exemple, sur iOS 6, les boutons segmentés ne supportent pas la fonction de nuance, mais sur iOS 7, ces boutons ont la propriété TintColor.

Lorsque vous changez la propriété StyleLookup d'un bouton, l'inspecteur d’objets affiche ou masque automatiquement les propriétés TintColor et IconTintColor. L'image suivante affiche trois TSpeedButton sur une app Android :

TintColor2.png

Création d'un contrôle segmenté en utilisant les composants Bouton

FireMonkey utilise un composant SpeedButton pour définir le contrôle segmenté ; il permet aux utilisateurs de sélectionner une valeur parmi plusieurs options.

iOS Android

IOSSegmentedControl.png

AndroidSegmentedControl.png

Pour définir un contrôle segmenté, utilisez les étapes suivantes :

  1. Placez trois composants TSpeedButton à partir de la palette d'outils. Placez les composants TSpeedButton les uns après les autres en utilisant la souris :
iOS Android

ThreeButtonControls.png

AndroidThreeButtonControls.png

  1. Sélectionnez le premier composant et changez sa propriété StyleLookup en segmentedbuttonleft :
iOS Android

ChangeFirstButtonToSegment.png

AndroidChangeFirstButtonToSegment.png

  1. Sélectionnez le second composant et changez sa propriété StyleLookup en segmentedbuttonmiddle.
  2. Sélectionnez le troisième composant et changez sa propriété StyleLookup en segmentedbuttonright. Maintenant les trois boutons ont l'apparence d'un contrôle segmenté :
iOS Android

AllButtonsAreNowSegments.png

AndroidAllButtonsAreNowSegments.png

  1. Sélectionnez chaque composant et changez sa propriété Text comme vous le souhaitez :
iOS Android

LeftMiddleRightButtons.png

AndroidLeftMiddleRightButtons.png

  1. Cliquez sur ces trois boutons et faites-les glisser pour les sélectionner :
iOS Android

SelectAllThreeButtons.png

AndroidSelectAllThreeButtons.png

  1. Définissez la propriété GroupName en spécifiant un nom unique tel que LocationSegments :
SetStayPressedToTrue.png

  1. Pour spécifier que l'un de ces composants apparaîtra par défaut à l'état appuyé, définissez sa propriété IsPressed sur True :
iOS Android

IOSSegmentedControl.png

AndroidSegmentedControl.png

Création d'une barre de portée sur un composant Barre d'outils

Vous pouvez définir un contrôle segmenté sur une barre d'outils. Ce composant également appelé barre de portée est un contrôle segmenté pouvant être utilisé pour contrôler la portée d'une recherche.

Utilisez les mêmes contrôles TSpeedButton que lors des étapes précédentes, mais en utilisant les valeurs suivantes pour la propriété StyleLookup :

  • toolbuttonleft
  • toolbuttonmiddle
  • toolbuttonright
iOS Android

IOSScopeBar.png

AndroidScopeBar.png

Voir aussi