Layout Controls

File: JVE.Layout.pas Inheritance: TLayout ⬅ TJVESpan ⬅ TJVELayout

These layout controls were created specifically to make dynamic size screens easier to develop. While FMX comes with a TGridLayout, it is really no match to the VCL TGridPanel.

TJVELayout works similarly to TGridPanel, with the following enhancements:

  • Shares are used instead of percent. The difference: shares need not sum to 100% (for example, 2 shares out of 5 is 40%). You can create columns without worrying about the total number of shares, only keeping the proportions intact.
  • A Column or a Row can have a combination of Shares and Pixels in its definition. First pixels are assigned to columns and rows, then remaining pixels are split amount the shares. This allows you to specify the minimum number of pixels for a column or a row.
  • If you need to span multiple columns or rows, place TJVESpan (or even a child TJVELayout) on your TJVELayout, set ColSpan and/or RowSpan properties accordingly (same as in HTML).

 

Controls placement, on the other hand, works similarly to the TGridLayout, except:

  • A Column or a Row can be marked as a divider then child controls will skip this column or row.
  • The TJVELayout control ensures that every column and every row start on an integer pixel and occupy integer number of pixels: not all controls look good, when there is a gap of half‑a‑pixel.
  • All child controls of TGridLayout work as if having Align set to alClient; TJVELayout also support alFit, alFitLeft and alFitRight.

To ensure a perfect layout, especially with smaller columns and rows, TJVELayout will guarantee that all the columns, which have the same Share value, get exactly the same number of pixels per share.

 

In runtime neither control has any visual drawing. In design time the TJVESpan has a dashed line around it (same as most layout controls). The design time presentation of TJVELayout is more complicated: if will draw a red grid over columns and rows, marked as dividers and a green shade over the cells, which are open for placement.

The list of properties, this control exposed is (listed for TJVELayout; TJVESpan only exposes ColSpan and RowSpan):

layouts