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 increasing 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 submorph, not to the LayoutMorph:

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

Figure 2.7: Top alignment

Alternatively to numeric value arguments, symbols can be used:

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

Browse the method offAxisEdgeWeight: to discover more symbols.