Tutorial 8: The Layouts

Summary: WeViews have a number of built-in layouts, but most layouts can and should be built using just the horizontal and vertical layouts.

WeView Layouts have two responsibilities:

• Laying out the contents of (some of) the subviews of a WeView.
• Helping that WeView determine its desired size.

WeView supports the following layouts:

The Horizontal layout

The Horizontal layout (shown here with top, center and bottom vertical alignment) lays out its subviews horizontally, left-to-right.

You can build 95% of most UIs using just the horizontal and vertical layouts.

The Vertical Layout

The Vertical layout (shown here with left, center and right horizontal alignment) lays out its subviews horizontally, top-to-bottom.

The Stack Layout

The Stack layout (shown here with a variety of alignments) lays out its subviews on top of each other in a stack. Useful for positioning single subviews.

The Flow Layout

The Flow layout (shown here with left & v-center alignment at a variety of sizes) lays out its subviews in a text-like flow, in horizontal lines that wrap at the edge of the superview.

The Block-based Layout

The Block-based layout can be used for unusual layouts.

Misc.

• There is also a Grid layout in the works.

• You can also create your own layout by subclassing WeViewLayout.

Next: Tutorial 9: Grid Layout