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

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

Boutons dans les applications mobiles

FireMonkey définit plusieurs types de boutons que vous pourrez utiliser en suivant les étapes décrites dans ce tutoriel. Les boutons FireMonkey incluent 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 :

• Boutons placés sur la fiche :

iOS	Android

• Boutons placés sur la barre de navigation (aussi appelée Barre d'outils) :

iOS	Android

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

Après avoir placé un nouveau bouton sur le Concepteur de fiches, 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 dans l'inspecteur d'objets.
• 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é :
  
  

  

• Pour modifier la couleur d'un bouton, changez les valeurs des propriétés TintColor et IconTintColor. La dernière propriété est disponible uniquement pour les boutons stylés avec icônes. La section suivante fournit plus de détails sur l'utilisation de TintColor et IconTintColor.

Utilisation de TintColor et IconTintColor 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 du bouton pour les boutons stylés.

Remarque : Les propriétés TintColor et IconTintColor sont seulement disponibles dans l'inspecteur d'objets si vous sélectionnez un style approprié pour le bouton et une vue appropriée dans le Concepteur de fiches (ces propriétés ne sont pas visibles dans toutes les vues).

Pour la plate-forme cible Android :

Vous pouvez appliquer une nuance à des boutons quel que soit leur style :

• Pour les turboboutons, vous devez sélectionner une valeur StyleLookup appropriée afin de modifier la valeur de TintColor dans l'inspecteur d'objets.
• Pour modifier TintColor et IconTintColor, choisissez un périphérique Android dans le coin supérieur droit de la liste Vues du Concepteur de fiches.

Pour les plates-formes cibles iOS :

• FireMonkey fournit des boutons qui correspondent au Guide de style Apple (EN). Il se peut que certains boutons ne prennent pas en charge la fonction de nuance.
• Par exemple, sur iOS, les boutons segmentés 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 selon ce qui est approprié pour la valeur de la propriété StyleLookup. L'image suivante affiche trois TSpeedButton sur une app Android :

Utilisation de boutons stylés et de couleur sur les plates-formes cible

Pour plus d'informations sur la disponibilité des propriétés StyleLookup, TintColor et IconTintColor pour les boutons sur toutes les plates-formes cible, consultez ce tableau récapitulatif : Utilisation de boutons stylés et de couleur sur les plates-formes cible.

Personnalisation des boutons avec les styles

A présent dans FireMonkey, un composant TStyleBook est une collection de styles pour diverses plates-formes cible. Vous pouvez créer des styles personnalisés pour des boutons individuels ou pour une classe de contrôle complète (TButton ou TSpeedButton).

Pour commencer à utiliser des styles personnalisés pour les boutons

1. Dans le Concepteur de fiches, assurez-vous que vous avez sélectionné Maître dans le sélecteur de vue.
2. Dans le Concepteur de fiches, cliquez avec le bouton droit sur un bouton ou un turbobouton, puis choisissez l'un des éléments suivants dans le menu contextuel :
   • Modifier un style personnalisé : ouvre le Concepteur de styles FireMonkey pour modifier les styles du bouton sélectionné.
   • Modifier le style par défaut : ouvre le Concepteur de styles FireMonkey pour modifier les styles de la classe de contrôle sélectionnée (par exemple TButton ou TSpeedButton).

Pour plus d'informations sur l'utilisation des styles personnalisés, voir les rubriques suivantes :

• Personnalisation des applications FireMonkey avec les styles
• Concepteur de styles FireMonkey
• Editeur BitmapLinks

Placement d'une image sur un bouton

RAD Studio vous permet de placer facilement des images personnalisées sur les composants bouton lors de la conception.

Pour placer une image sur un bouton :

1. Avec un composant TButton et un composant TImage sur le Concepteur de fiches, définissez TImage en tant que composant enfant de TButton. (Utilisez la vue Structure.)
2. Dans l'inspecteur d'objets, sélectionnez TImage et définissez sa propriété Align sur Client.
3. Dans la vue Structure, sélectionnez le bouton, développez le noeud Image, puis cliquez sur 0 - Empty (1.000).
4. Dans l'inspecteur d'objets, cliquez sur le bouton points de suspension (...) à côté de Bitmap.
5. Ajoutez votre image personnalisée dans l'éditeur MultiResBitmap.
6. Dans l'inspecteur d'objets, sélectionnez TButton et procédez comme suit :
   • Effacez la propriété Text.
   • Définissez les propriétés Height et Width de TButton sur la hauteur et la largeur réelles de votre image.

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

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

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

iOS	Android

3. Sélectionnez le second composant et changez sa propriété StyleLookup en segmentedbuttonmiddle.
4. 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

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

iOS	Android

6. Utilisez la souris pour sélectionner ces trois boutons :

iOS	Android

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

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

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 définissant les valeurs suivantes pour la propriété StyleLookup (seulement disponible sur la plate-forme cible iOS) :

• toolbuttonleft
• toolbuttonmiddle
• toolbuttonright

(Sur la plate-forme cible Android, définissez StyleLookup en tant que toolbutton pour chacun des boutons.)

iOS	Android

Différences importantes entre un TButton et un TSpeedButton

• TSpeedButton ne peut pas recevoir la focalisation TAB. Cela signifie également que la focalisation reste sur les autres éléments lorsque vous appuyez sur un TSpeedButton.
• TSpeedButton est destiné à être utilisé en tant que bouton de barre d'outils.
• Le style de TSpeedButton peut différer du style de TButton. Par exemple, sur la plate-forme Android, le style par défaut du TSpeedButton ressemble au style toolbutton du TButton. Si vous souhaitez un TSpeedButton avec un style similaire à celui du TButton, choisissez le style buttonstyle.

Voir aussi

• Tutoriel mobile : Création d'une application pour les plates-formes mobiles (iOS et Android)
• Tutoriel mobile : Utilisation d'un composant Calendrier pour sélectionner une date (iOS et Android)
• Tutoriel : Utilisation de l'éditeur BitmapLinks
• Concepteur de styles FireMonkey
• Développement d'applications mobiles Android
• Exemple FMX.Controls
• FMX.StdCtrls.TButton
• FMX.StdCtrls.TSpeedButton
• FMX.Controls.TStyledControl.StyleLookup
• FMX.StdCtrls.TToolBar
• FMX.StdCtrls.TCustomButton.IconTintColor
• FMX.StdCtrls.TCustomButton.TintColor
• FMX.StdCtrls.TToolBar.TintColor