AsyncDisplayKit/_docs/containers-ascollectionnode.md

title, layout, permalink, next

title	layout	permalink	next
ASCollectionNode	docs	/docs/containers-ascollectionnode.html	containers-aspagernode.html

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

ASCollectionNode replaces UICollectionView's required method

collectionView:cellForItemAtIndexPath:

with your choice of one of the following methods

- (ASCellNode *)collectionView:(ASCollectionView *)collectionView nodeForItemAtIndexPath:(NSIndexPath *)indexPath

or

- (ASCellNodeBlock)collectionView:(ASCollectionView *)collectionView nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath (recommended)

Note that these are the same methods as the `ASTableNode`! Please read the previous `ASTableNode` section as most of the details here are identical and so we will gloss over them quickly.

As noted in the previous section

• both of these ASCollectionView methods should not implement reuse (they will be called once per row)
• `collectionView:nodeBlockForRowAtIndexPath:` is preferred to `collectionView:nodeForItemAtIndexPath:` for its concurrent processing
• it is very important that node blocks be thread-safe
• ASCellNodes are used by ASTableNode, ASCollectionNod and ASPagerNode

##Replace UICollectionViewController with 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;
}

init() {
  flowLayout     = UICollectionViewFlowLayout()
  collectionNode = ASCollectionNode(collectionViewLayout: flowLayout)

  super.init(node: collectionNode)

  flowLayout.minimumInteritemSpacing  = 1
  flowLayout.minimumLineSpacing       = 1
}

This works just as well with any node such 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 as an internal property of `ASCollectionNode`. While it should not be created directly, it can still be used directly by accessing the .view property of an `ASCollectionNode`.

Do not forget that anything that accesses a view using AsyncDisplayKit's node containers or nodes should be done in viewDidLoad or didLoad, respectively.

The LocationCollectionNodeController above accesses the ASCollectionView directly in viewDidLoad

SwiftObjective-C

- (void)viewDidLoad
{
  [super viewDidLoad];
_collectionNode.view.asyncDelegate   = self;
_collectionNode.view.asyncDataSource = self;
_collectionNode.view.allowsSelection = NO;
_collectionNode.view.backgroundColor = [UIColor whiteColor];
}

override func viewDidLoad() {
  super.viewDidLoad()

  collectionNode.view.asyncDelegate   = self
  collectionNode.view.asyncDataSource = self
  collectionNode.view.allowsSelection = false
  collectionNode.view.backgroundColor = UIColor.whiteColor()
}

##Table Row Height##

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

***constrainedSizeForNode (also in table, but more important for collection) - check that (0,0) min and (infinity, infinity) max

• example sample photo grid
  • popover, rotated -> how to get size constraint (USE constrainedSizeForNode to do simple divide by 3 width thing)
• document itemSize (check what happens in ASDKgram)

##Sample Apps with ASCollectionNodes##

• ASDKgram
• CatDealsCollectionView
• ASCollectionView