Know Your Alignments

FireMonkey offers a lot more alignment options than those offered in the VCL. The Alignment aligns the control within its parent, setting anchors, size and position. The Default is None. To make it easier to think about them, you can group the different types of alignments.

  • Anchor and fill along edge – these are 4 of the alignments you are most likely familiar with.
    • Top, Bottom, Left, Right
  • Like the above, but takes precedence over other alignments
    • MostBottom, MostTop, MostLeft, MostRight
  • Fill parent, but preserve aspect ratio – very powerful, especially when applied to one of the new layouts, like the TScaledLayout.
    • Fit, FitLeft, FitRight
  • Resize only on one axis (width or height) to fill that axis of the parent and optionally centered
    • Vertical, VertCenter, Horizontal, HorzCenter
  • Miscellaneous
    • Client – Fills remaining space not occupied by other pinned controls.
    • Contents – Fills entire client area of the parent overlapping other controls.
    • Center – Just moves to the center without resizing.
    • Scale – Maintains relative size and position relative to the parent as it resizes.

Checkout the full DocWiki pages for more details on FMX.Types.TAlignLayout and Vcl.Controls.TAlign.

This entry was posted in design. Bookmark the permalink.

4 Responses to Know Your Alignments

  1. Les Kaye says:

    There is some horrible javascript on this page which prevents it from being accessible from the Studio IDE Welcome page. Also applies to your previous blog post on the main feed.

  2. Jim McKeeth says:

    Thanks for letting me know. I actually just cleaned up some other majorly messed up JavaScript that was causing Chrome to hang sometimes. I’ll take a look.

  3. Like the above, but takes precedence over other alignments

    MostBottom, MostTop, MostLeft, MostRight

    Interesting. So what happens when you set two controls with the same parent to MostTop?

  4. Jim McKeeth says:

    The DocWiki describes it in more detail, or you can test it.

Leave a Reply