AsyncDisplayKit/_docs/automatic-layout-containers.md

title, layout, permalink, prevPage, nextPage

title	layout	permalink	prevPage	nextPage
LayoutSpecs	docs	/docs/automatic-layout-containers.html	automatic-layout-basics.html	automatic-layout-examples.html

AsyncDisplayKit includes a library of layoutSpec components that can be composed to declaratively specify a layout. The child(ren) of a layoutSpec may be a node, a layoutSpec or a combination of the two types.

Both nodes and layoutSpecs conform to the <ASLayoutable> protocol. Any ASLayoutable object may be the child of a layoutSpec. ASLayoutable properties may be applied to ASLayoutable objects to create complex UIs.

Single Child layoutSpecs

LayoutSpec	Description
ASInsetLayoutSpec	applies an inset margin around a component.
ASRatioLayoutSpec	lays out a component at a fixed aspect ratio (which can be scaled). Great for images, gifs and videos.
ASOverlayLayoutSpec	lays out a component, stretching another component on top of it as an overlay. The order in which subnodes are added matter for this layoutSpec.
ASBackgroundLayoutSpec	lays out a component, stretching another component behind it as a backdrop. The order in which subnodes are added matter for this layoutSpec.
ASCenterLayoutSpec	centers a component in the available space.
ASRelativeLayoutSpec	lays out a component and positions it within the layout bounds according to vertical and horizontal positional specifiers. Similar to the “9-part” image areas, a child can be positioned at any of the 4 corners, or the middle of any of the 4 edges, as well as the center.
ASLayoutSpec	can be used as a spacer if it contains no child.

Multiple Child(ren) layoutSpecs

The following layoutSpecs may contain one or more children.

LayoutSpec	Description
ASStackLayoutSpec	is based on a simplified version of CSS flexbox. It allows you to stack components vertically or horizontally and specify how they should be flexed and aligned to fit in the available space.
ASStackLayoutSpec	is based on a simplified version of CSS flexbox. It allows you to stack components vertically or horizontally and specify how they should be flexed and aligned to fit in the available space.
ASStaticLayoutSpec	allows positioning children at fixed offsets.

ASLayoutable Properties

The following properties can be applied to both nodes and layoutSpecs; both conform to the protocol.

ASStackLayoutable Properties

The following properties will only apply to a child wrapped in an stack layoutSpec.

Property	Description
CGFloat .spacingBefore	Additional space to place before this object in the stacking direction.
CGFloat .spacingAfter	Additional space to place after this object in the stacking direction.
BOOL .flexGrow	If the sum of childrens' stack dimensions is less than the minimum size, should this object grow? Used when attached to a stack layout.
BOOL .flexShrink	If the sum of childrens' stack dimensions is greater than the maximum size, should this object shrink? Used when attached to a stack layout.
ASRelativeDimension .flexBasis	Specifies the initial size for this object, in the stack dimension (horizontal or vertical), before the flexGrow or flexShrink properties are applied and the remaining space is distributed.
ASStackLayoutAlignSelf alignSelf	Orientation of the object along cross axis, overriding alignItems. Used when attached to a stack layout.
CGFloat .ascender	Used for baseline alignment. The distance from the top of the object to its baseline./td>
CGFloat .descender	Used for baseline alignment. The distance from the baseline of the object to its bottom.

ASStaticLayoutable Properties

The following properties will only apply to a child wrapped in an static layoutSpec.

Property	Description
.sizeRange	If specified, the child's size is restricted according to this `ASRelativeSizeRange`. Percentages are resolved relative to the static layout spec.
.layoutPosition	The `CGPoint` position of this object within its parent spec.

Best Practices

• don't wrap everything in a staticLayoutSpec
• avoid using preferred frame size for everything - won't respond nicely to device rotation or device sizing differences