Personnalisation de l'apparence de la vue liste FireMonkey

De RAD Studio
Aller à : navigation, rechercher

Remonter à Conception d'applications FireMonkey

Vous pouvez personnaliser l'apparence d'une vue liste FireMonkey en modifiant la disposition des éléments de la liste, notamment le libellé, l'image associée, les détails du texte ou l'icône accessoire.

AndroidScreen.png LBListView Android.png

Personnalisation des propriétés d'apparence de la vue liste

A la conception, vous pouvez changer l'apparence du pied de page, de l'en-tête et de la liste des éléments (pour le mode Edition également) en modifiant les valeurs des propriétés dans la propriété ItemAppearance. La propriété ItemAppearance contrôle la taille du pied de page, de l'en-tête et des éléments (en mode normal et en mode Edition).

Les propriétés d'apparence suivantes d'une vue liste sont regroupées dans l'inspecteur d'objets et dans la vue Structure ; vous pouvez modifier leurs valeurs pour personnaliser l'apparence de votre vue liste.

Propriétés du pied de page

  • FooterHeight. Cette propriété désigne la hauteur du pied de page de la liste (en pixels). Valeur par défaut : 24.
  • FooterAppearance. Cette propriété désigne l'apparence graphique du pied de page. Les valeurs possibles sont : Custom et ListHeader. Valeur par défaut : ListHeader.

Propriétés de l'en-tête

  • HeaderHeight. Cette propriété désigne la hauteur du pied de page de la liste (en pixels). Valeur par défaut : 24.
  • HeaderAppearance. Cette propriété désigne l'apparence graphique du pied de page. Les valeurs possibles sont : Custom et ListHeader. Valeur par défaut : ListHeader.

Propriétés des éléments de la liste

  • ItemHeight. Cette propriété désigne la hauteur de l'élément (en pixels). Valeur par défaut : 44.
  • ItemAppearance. Cette propriété désigne l'apparence graphique des éléments (image, libellé, bouton accessoire, etc.). Valeur par défaut : ListItem.
Choisissez l'une des valeurs suivantes :
Propriété Objets visibles
Custom Voir Utilisation de la valeur Custom
DynamicAppearance Voir Utilisation de la valeur DynamicAppearance
ImageListItem Une image, un libellé et un bouton graphique accessoire
ImageListItemBottomDetail Une image, un libellé, un texte de détails et un bouton graphique accessoire
ImageListItemBottomDetailRightButton Une image, un libellé, un texte de détails et un bouton texte accessoire
ImageListItemRightButton Une image, un libellé et un bouton texte accessoire
ListItem Un libellé et un bouton graphique accessoire
ListItemRightDetail Un libellé, un texte de détails et un bouton graphique accessoire

Utilisez la commande de menu contextuel Basculer Mode édition pour changer l'affichage en vue Mode conception des éléments de l'objet Vue liste dans le Concepteur de fiches en vue Mode édition. Pour permuter en mode Edition, cliquez avec le bouton droit sur l'objet TListView dans la vue Structure ou dans le Concepteur de fiches et sélectionnez Basculer Mode édition.

Voir l'exemple FMX.ListViewCustomBottomDetail et d'autres exemples.

Propriétés des éléments de liste dans le mode Edition

  • ItemEditHeight. Cette propriété désigne la hauteur des éléments (en pixels) en mode Edition. Valeur par défaut : 44.
  • ItemEditAppearance. Cette propriété désigne l'apparence graphique des éléments en mode Edition. Valeur par défaut : ListItemShowCheck.
Choisissez l'une des valeurs suivantes :
Propriété Objets visibles
Custom Voir Utilisation de la valeur Custom
DynamicAppearance Voir Utilisation de la valeur DynamicAppearance
ImageListItemBottomDetailRightButtonShowCheck Une image, un libellé, un texte de détails et un bouton glyphe case à cocher et un bouton texte
ImageListItemBottomDetailShowCheck Une image, un libellé, un texte de détails, un bouton glyphe case à cocher et un bouton graphique accessoire
ImageListItemDelete Une image, un libellé, un bouton glyphe supprimer et un bouton graphique accessoire
ImageListItemRightButtonDelete Une image, un libellé, un bouton glyphe supprimer et un bouton texte
ImageListItemRightButtonShowCheck Une image, un libellé, un bouton glyphe case à cocher et un bouton texte
ImageListItemShowCheck Une image, un libellé, un bouton glyphe case à cocher et un bouton graphique accessoire
ListItemDelete Un libellé, un bouton glyphe supprimer et un bouton graphique accessoire
ListItemRightDetailDelete Un libellé, un texte de détails, un bouton glyphe supprimer et un bouton graphique accessoire
ListItemRightDetailShowCheck Un libellé, un texte de détails, un bouton glyphe case à cocher et un bouton graphique accessoire
ListItemShowCheck Un libellé, un bouton glyphe case à cocher et un bouton graphique accessoire


Voir l'exemple FMX.ListViewCustomBottomDetail et d'autres exemples.

Comment modifier les propriétés d'apparence de la vue liste

Utilisez la vue Structure et l'inspecteur d'objets pour rechercher le composant ListView.

ItemAppearenceValueListView.png

Apparences des éléments personnalisables

Les valeurs DynamicAppearance et Custom vous permettent de personnaliser l'apparence des éléments d'un ListView. Vous pouvez utilisez la valeur Custom pour les propriétés FooterAppearance, HeaderAppearance, ItemAppearance et ItemEditAppearance des éléments de ListView, bien que vous pouvez utiliser la valeur DynamicAppearance pour les propriétés ItemAppearance et ItemEditAppearance des éléments de ListView.

Utilisation de la valeur DynamicAppearance

La valeur DynamicAppearance vous permet de personnaliser de façon dynamique l'apparence des éléments de ListView à la conception. La différence entre DynamicAppearance et les autres propriétés d'apparence des éléments consiste dans le fait que DynamicAppearance vous permet d'ajouter à l'apparence de votre élément autant d'objets que vous le souhaitez.

Par défaut, la valeur DynamicAppearence contient un seul objet texte. Pour ajouter plusieurs éléments, sélectionnez Item de ItemAppearance dans la vue Structure. Ensuite, dans l'inspecteur d'objets, cliquez sur la propriété + et sélectionnez un des objets disponibles. Les objets disponibles sont les suivants :

DynamicAppearence.png

En mode conception, vous pouvez personnaliser les objets de l'apparence de l'élément en sélectionnant un objet dans la vue Structure et en changeant ses propriétés dans l'inspecteur d'objets. Voici quelques exemples des paramètres qu'il est possible de personnaliser : le type de fonte, la taille de texte, l'alignement du texte des objets texte ou le type de bouton dans les objets bouton. De plus, vous pouvez visuellement personnaliser les objets de l'apparence de l'élément en activant l'option Basculer Mode conception.

Conseil : Comme vous pouvez ajouter autant d'objets que vous souhaitez, il est hautement recommandé d'utiliser DynamicAppearance avec Basculer Mode conception activé.

Utilisation de la valeur Custom

La sélection de la valeur d'apparence Custom active les objets suivants dans l'apparence des éléments :

CustomValueStructure.png

Pour définir la visibilité des objets souhaités :

  • Activez la propriété Visible (en définissant sa valeur sur True) dans l'inspecteur d'objets pour les objets souhaités et modifiez les propriétés en fonction de vos besoins.
  • Dans le code source, activez la propriété Visible des objets en la définissant sur True.
Delphi : 
AItem.Objects.AccessoryObject.Visible := True;
C++ : 
void __fastcall TForm1::SetEditItemProperties( TItemAppearanceObjects * AObjects)
{
	AObjects->GlyphButton->Visible = true;
}

Le mode Conception

Le mode Conception vous permet de personnaliser visuellement l'apparence d'un élément d'une vue liste en mode conception. Vous pouvez sélectionner ce mode pour n'importe quelle propriété ItemAppearance (Custom, DynamicAppearance, ListItem, ImageListItem, etc.).

Conseil : Le mode Conception est fortement recommandé lorsque la valeur DynamicAppearance est sélectionnée, car DynamicAppearance vous permet de personnaliser librement la propriété ItemAppearance.

Pour activer le mode Conception, cliquez avec le bouton droit sur l'objet TListView dans la vue Structure ou dans le Concepteur de fiches et sélectionnez Basculer Mode conception. La commande Basculer mode Conception change la vue du mode conception de l'objet vue liste en remplaçant la zone vide par une prévisualisation de l'élément vue liste. Vous pouvez alors :

  • Personnaliser visuellement l'apparence des éléments dans la fiche.
  • Visualiser les changements que vous effectuez aux propriétés d'apparence des éléments en utilisant l'inspecteur d'objets.
ToggleDesignMode.png

Création d'une classe d'apparence personnalisée

Vous pouvez créer et installer une nouvelle classe d'apparence personnalisée et l'utiliser dans votre conception, en installant un nouveau package. Ce package définit les classes qui implémentent une apparence personnalisée pour les éléments de la vue liste. Vous pouvez personnaliser les champs selon vos besoins, pour implémenter un contrôle image rating par exemple (contrôle qui affiche une image différente en fonction d'une valeur numérique).

Comment utiliser la classe d'apparence personnalisée

  1. Implémentez un nouveau package d'apparence TListView. Les exemples suivants contiennent différents exemples qui personnalisent l'apparence de la vue liste à afficher :
  2. Installez le package d'apparence personnalisée dans l'EDI.
  3. Après l'installation, vous pouvez utiliser la nouvelle apparence dans un composant TListView au sein de l'inspecteur d'objets.

CustomizedAppearancePackage.png

Remarque : La valeur MultiDetailItem est un package d'apparence personnalisée, précédemment installé dans l'EDI.

Voir aussi

Exemples

Récupérée de « http://docwiki.embarcadero.com/RADStudio/Rio/f/index.php?title=Personnalisation_de_l%27apparence_de_la_vue_liste_FireMonkey&oldid=208731 »