ASScrollNode

ASScrollNode is an ASDisplayNode whose underlying view is an UIScrollView. This class offers the ability to automatically adopt its ASLayoutSpec’s size as the scrollable contentSize.

automaticallyManagesContentSize

When enabled, the size calculated by the ASScrolNode’s layout spec defines the .contentSize of the scroll view. This is in contrast to most nodes, where the layoutSpec size is applied to the bounds (and in turn, frame). In this mode, the bounds of the scroll view always fills the parent’s size.

automaticallyManagesContentSize is useful both for subclasses of ASScrollNode implementing layoutSpecThatFits: or may also be used as the base class with .layoutSpecBlock set. In both cases, it is common use .automaticallyManagesSubnodes so that the nodes in the layout spec are added to the scrollable area automatically.

With this approach there is no need to capture the layout size, use an absolute layout spec as a wrapper, or set contentSize anywhere in the code and it will update as the layout changes! Instead, it is very common and useful to simply return an ASStackLayoutSpec and the scrollable area will allow you to see all of it.

scrollableDirections

This option is useful when using automaticallyManagesContentSize, especially if you want horizontal content (because the default is vertical).

This property controls how the constrainedSize is interpreted when sizing the content. Options include:

Example

In case you’re not familiar with scroll views, they are basically windows into content that would take up more space than can fit in that area.

Say you have a giant image, but you only want to take up 200x200 pts on the screen.

// NOTE: If you are using a horizontal stack, set scrollNode.scrollableDirections.
ASScrollNode *scrollNode = [[ASScrollNode alloc] init];
scrollNode.automaticallyManagesSubnodes = YES;
scrollNode.automaticallyManagesContentSize = YES;

scrollNode.layoutSpecBlock = ^(ASDisplayNode *node, ASSizeRange constrainedSize){
  ASStackLayoutSpec *stack = [ASStackLayoutSpec verticalStackLayoutSpec];
  // Add children to the stack.
  return stack;
};

// NOTE: If you are using a horizontal stack, set scrollNode.scrollableDirections.

let scrollNode = ASScrollNode()
scrollNode.automaticallyManagesSubnodes = true
scrollNode.automaticallyManagesContentSize = true

scrollNode.layoutSpecBlock = { node, constrainedSize in
  let stack = ASStackLayoutSpec.vertical()
  // Add children to the stack.
  return stack
}

Edit on GitHub