Using Layouts to Arrange Components

From Appmethod Topics
Jump to: navigation, search

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... > Object Pascal Projects > Multi-Device Application > Blank Application:
    FireMonkey HD Application.png
     Creating a Object Pascal HD Application
  2. Add a TLayout to the form.
  3. Add to the TLayout:
  4. In the Object Inspector, make the following changes:
    • For the button, set Align to MostTop.
    • For the label, set Align to VertCenter.
    Layoput on form.png
    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.
    Copy layout.pngPaste layout.png
  6. Rotate the second layout by setting the RotationAngle to -60.
    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 a RotationAngle of 90.
    This is the final pattern:
    Final patern 2.png
  8. Run the project by pressing F9. The result should look like this:
    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:
    Final pattern at run time1.png

Next

See Also