How to create a frame for AsTableNode in AsyncDisplayKit?

Question

I used facebook's AsyncDisplayKit to run my project, Where I found a sample project named "ASDKgram". It uses Nodes instead of TableViewCells. By default, the 'AsTableNodes' aka TableView are displayed to the bounds of the screen.

I want my tableView or AsTableNodes to be displayed 10pixels from each edge of the uiScreen.

Question: How can I create the AsTableNodes with that specific frame?

If anybody had already gone through the AsyncDisplayKit, Please respond with an answer.

Here is the link to that project https://github.com/facebook/AsyncDisplayKit/tree/master/examples/ASDKgram

Thanks in Advance.

Answer 1

Use ASCollectionNode

First, replace

tableNode = [[ASTableNode alloc] init];

with

tableNode = [[ASCollectionNode alloc] initWithCollectionViewLayout:[UICollectionViewFlowLayout new]];

Then add this to ASViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  _tableNode.view.contentInset = UIEdgeInsetsMake(0, 10, 0, 10);
}

- (ASSizeRange)collectionView:(ASCollectionView *)collectionView constrainedSizeForNodeAtIndexPath:(NSIndexPath *)indexPath {
  return ASSizeRangeMake(
          CGSizeMake(0, 0),
          CGSizeMake(self.view.frame.size.width - 2*10, CGFLOAT_MAX)
  );
}

- (NSInteger)collectionNode:(ASCollectionNode *)collectionNode numberOfItemsInSection:(NSInteger)section {
  return [_photoFeed numberOfItemsInFeed];
}

- (ASCellNodeBlock)collectionNode:(ASCollectionNode *)collectionNode nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath {
  PhotoModel *photoModel = [_photoFeed objectAtIndex:indexPath.row];
  // this will be executed on a background thread - important to make sure it's thread safe
  ASCellNode *(^ASCellNodeBlock)() = ^ASCellNode *() {
      PhotoCellNode *cellNode = [[PhotoCellNode alloc] initWithPhotoObject:photoModel];
      return cellNode;
  };

  return ASCellNodeBlock;
}

Result: