Using Layouts to Arrange Components

Go Up to Tutorial: Using FireMonkey Layouts

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

1. Select File > New Other... > Delphi > Multi-Device Application > Blank Application:
   

   

    Creating a Delphi HD Application

2. Add a TLayout to the form.
3. Add to the TLayout:

   • A TButton
   • A TLabel

4. In the Object Inspector, make the following changes:

   • For the button, set Align to MostTop.
   • For the label, set Align to VertCenter.

   

   • 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.

   

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.

   

6. Rotate the second layout by setting the RotationAngle to -60.

   

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 a RotationAngle of 90.

   This is the final pattern:

   

8. Run the project by pressing F9. The result should look like this:

   

9. To obtain a different visual effect, go to the Object Inspector, and change the RotationAngle of each label on the form to 90:

   

Next

• Using Layouts to Create a Scaled Effect

See Also

• Creating a FireMonkey Component (Delphi)
• Creating a FireMonkey Component (C++)
• HD Multi-Device Application
• FireMonkey Layouts Strategies