Skip to content

Overview (FMX)

Carlo Barazzetta edited this page Dec 8, 2020 · 13 revisions

Overview of the FMX components

TIconFontsImageList component

TIconFontsImageList is an FMX component for Delphi derived from TCustomImageList component, that auto-build icons using a collection of TIconFontsSourceItem (derived from TCustomSourceItem) that uses a special TIconFontMultiResBitmap (derived from TMultiResBitmap) to build bitmaps using Icon Fonts.

https://github.com/EtheaDev/IconFontsImageList/blob/master/Packages/IconFontsImageListComponentIcon.png

The Component is available at "Ethea" page, after installing the run-time and design-time Packages located in \Packages\DXXX\IconFontsImageListFMX.dpk and \Packages\DXXX\dclIconFontsImageListFMX.dpk

Into component TIconFontsImageListFMX you can define:

  • AutoSizeBitmaps (default true) to obtain "dynamic" Bitmaps scaled for the requested components. If AutoSizeBitmaps is false it's possibile to build "static" Bitmaps with different Scale factors, as a normal ImageList that uses bitmap files.
  • Size (default 32) to set the same Size for all the icons in the Source Collection, if you don't use the AutoSizeBitmaps option.
  • FontName (default FontName for any source Items)
  • FontColor (default FontColor for any source Items)
  • Opacity (default Opacity for any source Items)

At TIconFontsSourceItem level you can define, for each source item of the ImageList:

  • FontIconDec: Icon value in decimal (stored into dfm)
  • Character: WideString (with support of surrogate pair) (not stored)
  • FontIconHex: Icon value in hexadecimal (not stored)
  • IconName (required)

if you want, you can also use specific values for every item of:

  • FontName (if different by ImageList FontName)
  • FontColor (if different by ImageList FontColor)
  • Opacity (if different by ImageList Opacity)

TIconFontsImageList Methods

Method available for single Icon:

  • InsertIcon
  • DeleteIcon

Multiple Icons methods:

  • AddIcons
  • ClearIcons

TIconFontsImageList Implicit Methods:

Setting "FontName", "FontColor", "Opacity", "Zoom" updates all attributes of any source item with no specific value assigned.

Setting "Size" resize all Icons at new size (not used when AutoResizeBitmap is True)

Use "Width" and "Height" if you want to have different proportion of Icons.

Advanced Component Editor

At design time is very easy to build the Icons using the * The Advanced Component Editor supplied with the component.

TIconFontImage component

TIconFontImage is an FMX component for Delphi derived from TImage component, that auto-build icon using a collection a TIconFontFixedMultiResBitmap (derived from TFixedMultiResBitmap) to build bitmaps for different scale using Icon Fonts.

https://github.com/EtheaDev/IconFontsImageList/blob/master/Packages/IconFontImageComponentIcon.png

At TIconFontImageFMX component level you don't have to set nothing.

At TIconFontFixedBitmapItem level you can define, for each Scale factor:

  • FontName
  • FontColor
  • Opacity
  • FontIconDec: Character value in decimal (stored into dfm)
  • Character: Character value (not stored)
  • FontIconHex: Character value in hexadecimal (not stored)
  • Size
  • IconName (optional)

If you resize the image the MultiResBitmap rebuild the bitmap to show a perfect icon at any resolution.

You need more than one bitmap only if you want to have different aspect icon for different Device scale-factor: if you need only to resize your icon you must define only one MultiResBitmapItem with 16x16 bitmap size: at run-time the icon is built at the correct resolution needed by the Image at any scale factor.

TIconFontsImage Implicit Methods:

Component Editor

Actually there isn't a specific component editor: to define the IconFontImage properties: you must use the object inspector and the Structure Editor to define the TIconFontFixedMultiResBitmap and the TIconFontFixedBitmapItem items. Don't use MultiResBitmap editor to create your bitmap, because your icons are not loaded from files but generated by font.

See how it works with the Demos Project (FMX)