Tutorial 5: Layout Model

WeView uses a cell-based layout model. Layouts arrange their subviews by dividing the superview’s bounds into cells.

The layout process works like this:

• A layout creates one cell for each subview, whose size reflects the desired size of that subview.
• The cells are laid out according to the layout type (in a row, a stack, a grid, etc.).
• If there is extra space in the layout, the cells are stretched to occupy it, if possible.
• The cells are aligned within the WeView’s bounds.
• If the subviews don’t fit within the WeView’s bounds, they may be cropped.
• Lastly, subviews are positioned within their cell.

An Example

Here is a horizontal layout with three UILabels:

I’ve assigned a background color to each UILabel so that its frame (ie. size and position) is clear.

Each subview has its own cell in the layout. In the animation above, the subviews are stretched to fill their cells to emphasize the difference between a subview and its cell.

• The labels use different font sizes, so they each have a different height. Each of the cells, however, have the same height.
• The spaces between and around the cells reflect the layout’s spacing and margin properties.
• The layout’s hAlign and vAlign properties default to center alignment, so the subviews are centered within their cells.

Alignment

In our first example, the WeView was shown at its desired size, ie. just large enough to exactly fit its subviews. Let’s see what happens if that WeView is larger than its desired size.

• The layout’s hAlign and vAlign properties default to center alignment, so the layout cells are centered within the superview’s bounds and the subviews are centered within their cells.

Layout Alignment vs. Cell Alignment

Here’s the same WeView if we use top and right alignment.

Note that the layout cells are top- and right-aligned within the superview’s bounds and the subviews are top- and right-aligned within their layout cells. The alignment of the subviews within their cells (or cell alignment) defaults to the layout’s alignment unless we set an explicit cell alignment for a given subview.

We might want the labels to be top-aligned as a group within their superview (ie. the alignment property of the layout) but to be bottom-aligned with respect to each other (ie. the cellAlignment property of each subview).

Custom Cell Alignment

Here we use center vertical cell alignment.

Next: Tutorial 6: Layout Properties