Personnalisation de l'apparence de la vue liste FireMonkey
Remonter à Conception d'applications FireMonkey
Sommaire
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.
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
etListHeader
. 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
etListHeader
. 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.
- Dans la vue Structure, localisez le composant ListView puis cliquez sur
ItemAppearance
dans la hiérarchie. - Dans l'inspecteur d'objets, définissez chaque propriété (FooterAppearance, HeaderAppearance, ItemAppearance, ItemEditAppearance) sur la valeur souhaitée.
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 :
- TTextObjectAppearance. Décrit l'apparence graphique de l'objet texte de l'élément de la vue liste.
- TImageObjectAppearance. Décrit l'apparence graphique de l'objet icône de l'élément de la vue liste.
- TAccessoryObjectAppearance. Décrit l'apparence graphique de l'objet accessoire de l'élément de la vue liste.
- TTextButtonObjectAppearance. Décrit l'apparence graphique de l'objet bouton texte de l'élément de la vue liste.
- TGlyphButtonObjectAppearance. Décrit l'apparence graphique du bouton glyphe (image graphique) de l'élément de la vue liste.
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 :
- Accessory. C'est une instance de TAccessoryObjectAppearance. Non visible par défaut.
- Detail. C'est une instance de TTextObjectAppearance. Non visible par défaut.
- GlyphButton. C'est une instance deTGlyphButtonObjectAppearance. Non visible par défaut.
- Image. C'est une instance de TImageObjectAppearance. Non visible par défaut.
- Text. C'est une instance de TTextObjectAppearance. Visible par défaut.
- TextButton. C'est une instance deTTextButtonObjectAppearance. Non visible par défaut.
- Remarque : Vous pouvez personnaliser les objets de l'apparence des éléments à la conception en changeant leurs propriétés à l'aide de l'inspecteur d'objets ou en activant Basculer Mode conception.
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
.
AItem.Objects.AccessoryObject.Visible := True;
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.
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
- Implémentez un nouveau package d'apparence TListView. Les exemples suivants contiennent différents exemples qui personnalisent l'apparence de la vue liste à afficher :
- Installez le package d'apparence personnalisée dans l'EDI.
- Après l'installation, vous pouvez utiliser la nouvelle apparence dans un composant TListView au sein de l'inspecteur d'objets.
- Remarque : La valeur MultiDetailItem est un package d'apparence personnalisée, précédemment installé dans l'EDI.
Voir aussi
- Tutoriel mobile : Utilisation de LiveBindings pour remplir une vue liste (iOS et Android)
- Contrôles iOS natifs de FireMonkey
- FMX.ListView.TAppearanceListView.ItemAppearance
- FMX.ListView.Appearances.TPublishedAppearance.FooterHeight
- FMX.ListView.Appearances.TPublishedAppearance.FooterAppearance
- FMX.ListView.Appearances.TPublishedAppearance.HeaderHeight
- FMX.ListView.Appearances.TPublishedAppearance.HeaderAppearance
- FMX.ListView.Appearances.TPublishedAppearance.ItemHeight
- FMX.ListView.Appearances.TPublishedAppearance.ItemAppearance
- FMX.ListView.Appearances.TPublishedAppearance.ItemEditHeight
- FMX.ListView.Appearances.TPublishedAppearance.ItemEditAppearance