Using constraint-based layouts
Use constraints on a component to automatically adjust the component’s size and position in the container when a user resizes the application window.
You typically define layout constraints in Design mode of the MXML editor. You can also edit a component’s properties in Source mode to define layout constraints.
About constraint-based layouts
Flex supports constraint-based layouts. Constraint-based layouts are available in containers that support absolute positioning. For Spark containers, the default layout, BasicLayout, supports absolute positioning.
When using constraint-based layouts, you anchor one or more sides of a component to the edges of a container or a container’s constraint region. You can also specify an offset for the component w/respect to the anchor. When a user resizes the container, the size and position of the container components are determined by the defined anchor points.
Constraint-based layout example
In the following example, all the controls are absolutely positioned in a container either by dragging them or by setting the x and y coordinates in the Properties view. The arrows in the figure indicate how constraints, specified according to the following bulleted list, make the controls behave when the user resizes the layout.
A number of layout constraints are applied to the controls to ensure that the layout adjusts correctly when the user resizes the application:
The TextInput A and TextInput B controls stretch horizontally as the layout is enlarged. TextArea C control stretches horizontally and vertically. The Button control moves down and to the right.
Constraint-based layouts and absolute positioning
To create a constraint-based layout, use a container that supports absolute positioning. For Spark containers, set the layout property to BasicLayout. If you do not specify a layout property for a Spark container, the default property is BasicLayout.
For MX containers, the absolute layouts can be used only with the Application, Canvas, and Panel containers. For the Canvas container, absolute layouts are the default. For MX Application and Panel containers, set the layout property to absolute to implement absolute positioning.
For MX containers, the layout="absolute" property overrides the container’s layout rule and lets you drag and position components anywhere in the container.
Using advanced constraint layouts
You can also define constraints that anchor to horizontal and vertical constraint regions. Advanced constraints are useful in the following situations:
Note: You can use nested HGroup and VGroup containers to achieve results similar to advanced constraints.
For advanced constraint layouts, define ConstraintColumn regions and ConstraintRow regions. Constrain components to the edges or centers of these regions. Constraint columns are laid out in the container from left to right while constraint rows are laid out from top to bottom.
Constraint regions can be defined with fixed pixel dimensions (width or height) or as a percentage of the space in the parent container. The set of constraint columns and rows may have any combination of fixed or percentage dimensions.
Components within a parent container are constrained to the container, to constraint regions, or to any combination of container and region constraints.
Use the MXML editor in Source mode to specify advanced constraints.
Setting layout constraints for components
You can specify a constraint-based layout for components in a container that has absolute positioning.
Note: Layout constraints relative to constraint columns and rows can only be set by editing the source code.