2.2 Alignment ¶

For a row LayoutMorph the major axis is x and the minor axis is y. For a column LayoutMorph the major axis is y and the minor axis is x.

If a LayoutMorph is given a width or height that is larger than needed to fit the submorphs, we can specify how the submorphs should be aligned. By default the submorphs will be aligned at the beginning of its major axis and centered on its minor axis.

You can lengthen the layout by adding space to its morphExtent. layout morphExtent: (layout morphExtent + (80 @ 0)). Another way of doing this is to get the LayoutMorph’s halo and drag its yellow Change size button at the lower right.

Figure 2.5: Default alignment

To change the major axis alignment, send to the layout morph the message #axisEdgeWeight: with a floating point argument between 0 and 1. The argument should be 0 for left-align, 0.5 for center, or 1 for right-align. The following symbols can also be used for the argument:

• For rows. #rowLeft, #center, or #rowRight,
• For columns. #columnTop, #center, or #columnBottom.

layout axisEdgeWeight: #center.

Figure 2.6: Center alignment

To change the minor axis alignment, send to each submorph the message #offAxisEdgeWeight: with a floating point argument. It takes the same argument values as the #axisEdgeWeight: message.

Again, this message must be sent to each of the submorphs, not to the LayoutMorph

layout submorphsDo: [:submorph |
   submorph layoutSpec offAxisEdgeWeight: 0]

Figure 2.7: Top alignment

Alternatively to numeric value argument, symbol can be used:

• For rows. #rowTop, #center, #rowBottom,
• For columns. #columnLeft, #center, #columnRight.

Browse the method offAxisEdgeWeight: to discover more symbols.