AsyncDisplayKit

ASCollectionNode

ASCollectionNode is equivalent to UIKit’s UICollectionView and can be used in place of any UICollectionView.

ASCollectionNode replaces UICollectionView’s required method

Swift Objective-C
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
  

with your choice of one of the following methods

SwiftObjective-C
- (ASCellNode *)collectionNode:(ASCollectionNode *)collectionNode nodeForItemAtIndexPath:(NSIndexPath *)indexPath

or

SwiftObjective-C
- (ASCellNodeBlock)collectionNode:(ASCollectionNode *)collectionNode nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath

It is recommended that you use the node block version of the method so that your collection node will be able to prepare and display all of its cells concurrently.

As noted in the previous section:

Replacing a UICollectionViewController with an ASViewController

AsyncDisplayKit does not offer an equivalent to UICollectionViewController. Instead, you can use the flexibility of ASViewController to recreate any type of UIViewController.

Consider, the following ASViewController subclass.

An ASCollectionNode is assigned to be managed by an ASViewController in its -initWithNode: designated initializer method, thus making it a sort of ASCollectionNodeController.

SwiftObjective-C
- (instancetype)init
{
  _flowLayout     = [[UICollectionViewFlowLayout alloc] init];
  _collectionNode = [[ASCollectionNode alloc] initWithCollectionViewLayout:_flowLayout];
  
  self = [super initWithNode:_collectionNode];
  if (self) {
    _flowLayout.minimumInteritemSpacing  = 1;
    _flowLayout.minimumLineSpacing       = 1;
  }
  
  return self;
}

This works just as well with any node including as an ASTableNode, ASPagerNode, etc.

Accessing the ASCollectionView

If you’ve used previous versions of ASDK, you’ll notice that ASCollectionView has been removed in favor of ASCollectionNode.

`ASCollectionView`, an actual `UICollectionView` subclass, is still used internally by `ASCollectionNode`. While it should not be created directly, it can still be used directly by accessing the `.view` property of an `ASCollectionNode`.

Don't forget that a node's `view` or `layer` property should only be accessed after viewDidLoad or didLoad, respectively, have been called.

The LocationCollectionNodeController above accesses the ASCollectionView directly in -viewDidLoad.

SwiftObjective-C
- (void)viewDidLoad
{
  [super viewDidLoad];
  
  _collectionNode.delegate   = self;
  _collectionNode.dataSource = self;
  _collectionNode.view.allowsSelection = NO;
  _collectionNode.view.backgroundColor = [UIColor whiteColor];
}

Cell Sizing and Layout

As discussed in the previous section, ASCollectionNode and ASTableNode do not need to keep track of the height of their ASCellNodes.

Right now, cells will grow to fit their constrained size and will be laid out by whatever UICollectionViewLayout you provide.

Soon, there will be a method such as ASTableNode’s -constrainedSizeForRow: but at the moment, if you’d like to constrain the size of a cell used in a collection node, you need to wrap your layoutSpec object in an ASStaticLayoutSpec and provide it with a

Examples

The most detailed example of laying out the cells of an ASCollectionNode is the CustomCollectionView app. It includes a Pinterest style cell layout using an ASCollectionNode and a custom UICollectionViewLayout.

More Sample Apps with ASCollectionNodes

Interoperability with UICollectionViewCells

ASCollectionNode supports using UICollectionViewCells alongside native ASCellNodes.

Note that these UIKit cells will not have the performance benefits of ASCellNodes (like preloading, async layout, and async drawing), even when mixed within the same ASCollectionNode.

However, this interoperability allows developers the flexibility to test out the framework without needing to convert all of their cells at once. Read more here.

Edit on GitHub