Aligning components using X/Y alignment

When you set the layout property for a component to null, you can use the Customize Layout window to align components based on their boundaries.

With layout set to null, each component is independently placed and sized on the user interface based on its bounds. To avoid the tedious and error-prone task of individually updating each component's bounds, you can use the visual editor to align and adjust the sizes and placement of components based on relationships.

When layout is set to null, the Customize Layout window has a number of actions that work on a group of components. You can:
  • Align components based on edges
  • Align components based on center points
  • Make components the same width and height
  • Distribute components evenly, both vertically and horizontally, across a given space

To align, resize, and distribute components in null layout:

  1. In the Design view or Java Beans view, select two or more components that you want to align or adjust in relation to each other. You can use the marquee selection tool or hold the Ctrl key to select multiple components. The last component that you select is the control component, or anchor. The anchor component is indicated by black resize handles, while the other selected components have white handles.
  2. Do one of the following steps to open the Customize Layout window:
    • Right-click and select Customize Layout from the pop-up menu.
    • Click Customize Layout show alignment window icon in the toolbar.

    Customize Layout window for null layout
  3. To align the components with each other, use the following buttons:
    • Align left - aligns the components with the left edge of the anchor component.
    • Align center - aligns the components with the center of the anchor component along a vertical plane.
    • Align right - aligns the components with the right edge of the anchor component.
    • Align top - aligns the components with the top edge of the anchor component.
    • Align middle - aligns the components with the middle of the anchor component along a horizontal plane.
    • Align bottom - aligns the components with the bottom edge of the anchor component.
  4. To adjust the size of the selected components, use the following buttons:
    • Match width - makes the components the same width as the anchor component.
    • Match height - makes the components the same height as the anchor component.
  5. To distribute the spacing of the components, first do one of the following to specify the bounds of the distribution area:
    • Click nothing to use the container as the distribution area (which is the default behavior), or click Hide distribute box if the box is already showing.
    • Click Show distribute box and drag the handles of the box to create the required size for your distribution.
    Then, use one of the following buttons to distribute the components:
    • Distribute horizontally - makes the components the same width as the anchor component.
    • Distribute vertically - makes the components the same height as the anchor component.

For example, you can select three JButton components and specify that they should be the same width and aligned with each other on the left bound. The last selected JButton component is used as the anchor, or control, for the other two buttons. The Align left action aligns the JButton components with the left edge of the last selected JButton component, and the Match width action makes the selected JButton components the same width as the control JButton component.

The alignment buttons on the Customize Layout window are only enabled if the following conditions are true:

In addition to aligning components and matching width and height, you can distribute components. When components are distributed, their positions are changed so that they are evenly spaced within a bounding box defined by their parent container. For example, before clicking the Distribute vertical button distribute vertical button, three buttons have uneven spacing, as shown in the following image:


beans as placed on Design view

After clicking Distribute vertical, the components are spaced evenly, as shown in the following image:


beans distributed vertically

Notice that the three buttons are distributed within the height of the parent (the frame's top and bottom edge).

For more control over the area used for the distribution, you can enable the distribution box by clicking the Show distribute box distribute box button. When you click this button, a box is drawn around the area of all the selected components. You can move and resize this box using its handles. When you use a distribution box and the box is active, the distribution box defines the area that is used to reposition the controls. Without a distribution box, the parent container defines the area used for distribution. The following image shows a distribution box:


beans with distribution box

You can move and resize the distribution box, as the following image shows:


beans in resized distribution box

If you do a vertical distribution while using the distribution box, the distribution takes place within the boundaries of the box, rather than the parent container, as is shown in the following image:


beans distributed vertically within box

Parent topic: Laying out components using the visual editor

Related concepts
Layout managers and containers

(C) Copyright IBM Corporation 1999, 2004. All Rights Reserved.