Entry
Delphi: Component: Align: Group: How to align groups of components?
Aug 24th, 2003 16:32
Knud van Eeden,
----------------------------------------------------------------------
--- Knud van Eeden --- 14 October 2002 - 05:04 pm ---------------------
Delphi: Component: Align: Group: How to align groups of components?
Method: Use the alignment palette
Steps: Overview:
1. -Select the group of components (e.g. 10 buttons of the same size)
2. -Estimate the total distance needed for this components, when
moved to equal distances in between.
Put the most upper component in the top position.
Put the lower most component in the bottom position
of this area.
3. -select from menu option 'View'
4. -select from list 'Alignment palette'
5. -Select the option showing:
'Space equally vertically'
| [....]
| [....]
V
[....]
6. -This will align vertically
7. -Select the option showing
'Align left edges'
-->
[....]
[....]
[....]
8. -This will align horizontally
---
Method:
E.g. when having to align two vertical groups of buttons:
+---------------------------------------------+
| |
| +----------+ |
| | 1 | |
| +----------+ |
| +----------+ |
| | 2 | |
| +----------+ +----------+ |
| | 1 | |
| +----------+ |
| +----------+ |
| +----------+ | 2 | |
| | 1 | +----------+ |
| +----------+ |
| +----------+ |
| | 2 | |
| +----------+ |
| |
| |
| +----------+ |
| | 1 | |
| +----------+ |
| +----------+ |
| | 2 | |
| +----------+ |
| |
+---------------------------------------------+
---
Steps: Overview:
1. Determine the vertical range:
Put the upper and lower component of each group on the same height
(e.g. in the properties manually change the value of 'top' for the
heighest and lowest component so that they become equal).
E.g. both the heighest components have a 'top' value of 10
and both the lowest components have a 'top' value of 200.
+---------------------------------------------+
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
| |
| |
| +----------+ |
| | 1 | |
| +----------+ |
| +----------+ |
| +----------+ | 2 | |
| | 1 | +----------+ |
| +----------+ |
| +----------+ |
| | 2 | |
| +----------+ |
| |
| |
| |
| |
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
+---------------------------------------------+
2. Align:
Select the components (by dragging a rectangle around them, while
pressing the left mouse button)
+---------------------------------------------+
| +---------------+ |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| | | |
| | | |
| | | |
| | +----------+ | |
| | | 1 | | |
| | +----------+ | |
| | | +----------+ |
| | +----------+ | | 2 | |
| | | 1 | | +----------+ |
| | +----------+ | |
| | | +----------+ |
| | | | 2 | |
| | | +----------+ |
| | | |
| | | |
| | | |
| | | |
| | | |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| +---------------+ |
+---------------------------------------------+
3. While they are selected, right click on the mouse and select
from list 'Position'->'Align'.
Then enable the radiobutton 'space equal' in the option 'Vertical'
And click OK.
+---------------------------------------------+
| +---------------+ |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| | | |
| | | |
| | | |
| | | |
| | +----------+ | |
| | | 1 | | |
| | +----------+ | |
| | | |
| | | |
| | | |
| | | +----------+ |
| | +----------+ | | 2 | |
| | | 1 | | +----------+ |
| | +----------+ | |
| | | +----------+ |
| | | | 2 | |
| | | +----------+ |
| | | |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| +---------------+ |
+---------------------------------------------+
5. To possibly also left align enable also this radio button in the
option 'Horizontal', and click OK when ready
+---------------------------------------------+
| +---------------+ |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| | | |
| | | |
| | | |
| | | |
| | +----------+ | |
| | | 1 | | |
| | +----------+ | |
| | | |
| | | |
| | | |
| | | +----------+ |
| | +----------+ | | 2 | |
| | | 1 | | +----------+ |
| | +----------+ | |
| | | +----------+ |
| | | | 2 | |
| | | +----------+ |
| | | |
| | +----------+ | +----------+ |
| | | 1 | | | 2 | |
| | +----------+ | +----------+ |
| +---------------+ |
+---------------------------------------------+
6. you will have to repeat step 3. and 4. for each of
the two vertical groups of buttons separately):
figure: selecting the second group of buttons
+---------------------------------------------+
| +--------------------+ |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | | |
| | 1 | | | |
| +----------+ | | |
| | | |
| | | |
| | | |
| | +----------+ | |
| +----------+ | | 2 | | |
| | 1 | | +----------+ | |
| +----------+ | | |
| | +----------+ | |
| | | 2 | | |
| | +----------+ | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| +--------------------+ |
+---------------------------------------------+
figure: aligning vertically with 'space equal' of the second group
+---------------------------------------------+
| +--------------------+ |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| +--------------------+ |
+---------------------------------------------+
figure: aligning horizontally the 'left side' of the second group
+---------------------------------------------+
| +--------------------+ |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| | | |
| | | |
| | | |
| | | |
| +----------+ | +----------+ | |
| | 1 | | | 2 | | |
| +----------+ | +----------+ | |
| +--------------------+ |
+---------------------------------------------+
figure: final result, both groups 1 and 2 of the buttons are aligned
+---------------------------------------------+
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
| |
| |
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
| |
| |
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
| |
| |
| |
| +----------+ +----------+ |
| | 1 | | 2 | |
| +----------+ +----------+ |
| |
+---------------------------------------------+
---
You can of course align vertically and horizontally at the same time
within a given group of components.
---
As soon as you get the feeling for this, aligning groups of components
is done in the order of a few seconds to minutes.
----------------------------------------------------------------------
