Using Layouts to Arrange Components

From RAD Studio
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... > Delphi > Multi-Device Application > Blank Application:
    Blank Application.png
     Creating a Delphi 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.
    Creating Application.png
    Rotation Center.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.
    Design Copy.pngDesign Paste.png
  6. Rotate the second layout by setting the RotationAngle to -60.
    Second Layout.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:
    Design Labels.png
  8. Run the project by pressing F9. The result should look like this:
    Run Design.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:
    Labels Design.png


See Also