Tutorial: Using Layouts in FireMonkey FM2 to Arrange Components

By: Tim DelChiaro

Abstract: This tutorial demonstrates how to use FireMonkey layouts to arrange 2D components in a round pattern

This tutorial is part of the RAD Studio XE3 online documentation. Links in the article go to the Embarcadero Doc Wiki. 

To follow along with these steps, you can buy or download a trial of an Embarcadero developer tool with FireMonkey including Delphi, C++Builder and RAD Studio.

  1. Select File > New > Other > Delphi Projects > HD FireMonkey Application:
     Creating a Delphi HD Application
  2. Add a TLayout to the form.
  3. Add to the form:
    File:Layoput on form.png
  4. In the Object Inspector, make the following changes:
    • For the button, set Align to alMostTop.
    • For the label, set Align to alVertCenter.
    • For the layout, move the rotation center point in the middle of the bottom edge by setting the RotationCenter.X to 0.5, and RotationCenter.Y, to 1.
    • Rotate the layout by setting the RotationAngle to -90.
    File:Layout properties.png
  5. In the Structure View, right-click the layout and follow the steps in the images below to copy and paste the layout on the form.
    File:Copy layout.pngFile:Paste layout.png
  6. Rotate the second layout by setting the RotationAngle to -60.
    File:The rotated layout 2.png
  7. Continue copying and pasting the last modified layout, and change its RotationAngle with a value with 30 grades higher than the previous layout, until you reach aRotationAngle of 90.
    This is the final pattern:
    File:Final patern 2.png
  8. Run the project by pressing F9. The result should look like this:
    File:final pattern at run time.png
  9. To obtain a different visual effect, go to the Object Inspector, and change the RotationAngle of each label on the form to 90:
    File:final pattern at run time1.png

Server Response from: ETNASC03