mirror of
https://github.com/HackPlan/AsyncDisplayKit.git
synced 2026-04-26 12:55:56 +08:00
Update nav_docs.yml
Create node-containers-overview.md Update node-containers-overview.md Update node-containers-overview.md Update node-containers-overview.md Update node-containers-overview.md Update nav_docs.yml Update nav_docs.yml Update and rename node-containers-overview.md to containers-overview.md Update and rename asviewcontroller.md to container-asviewcontroller.md Update and rename astablenode.md to container-astablenode.md Update and rename ascollectionnode.md to container-ascollectionnode.md Update and rename aspagernode.md to container-aspagernode.md Update and rename container-ascollectionnode.md to containers-ascollectionnode.md Update and rename container-asviewcontroller.md to containers-asviewcontroller.md Update containers-ascollectionnode.md Update container-astablenode.md Rename container-astablenode.md to containers-astablenode.md Update and rename container-aspagernode.md to containers-aspagernode.md Update containers-overview.md Update containers-overview.md Update containers-overview.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-overview.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-overview.md Update containers-overview.md Removing _site folder from repository (only needed to run locally) Update containers-overview.md Update containers-overview.md Update containers-asviewcontroller.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-pixel-scaling.md Update debug-tool-hit-test-slop.md Update debug-tool-hit-test-slop.md Update nav_docs.yml Update image-node.md Update image-node.md Update control-node.md Update control-node.md Update nav_docs.yml Create batch-fetching-api.md Update batch-fetching-api.md Update debug-tool-hit-test-slop.md Update debug-tool-pixel-scaling.md Update debug-tool-hit-test-slop.md Update debug-tool-pixel-scaling.md Update containers-aspagernode.md Update containers-aspagernode.md Update containers-aspagernode.md Update containers-aspagernode.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-asviewcontroller.md Update containers-overview.md Update containers-asviewcontroller.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md Update containers-astablenode.md This is the 45th commit message: Update Website Documentation - Container Node section, Batch Fetching, debug tools
This commit is contained in:
@@ -5,17 +5,92 @@ permalink: /docs/containers-ascollectionnode.html
|
||||
next: containers-aspagernode.html
|
||||
---
|
||||
|
||||
ASCollectionNode can be used in place of any UICollectionView. The only requirements are that you replace your
|
||||
`ASCollectionNode` is equivalent to UIKit's `UICollectionView` and can be used in place of any UICollectionView.
|
||||
|
||||
<code>-cellForRowAtIndexPath:</code>
|
||||
ASCollectionNode replaces UICollectionView's required method
|
||||
|
||||
method with a
|
||||
`collectionView:cellForItemAtIndexPath:`
|
||||
|
||||
<code>-nodeForRowAtIndexPath:</code>
|
||||
with your choice of **_one_** of the following methods
|
||||
|
||||
`- (ASCellNode *)collectionView:(ASCollectionView *)collectionView nodeForItemAtIndexPath:(NSIndexPath *)indexPath`
|
||||
|
||||
or
|
||||
|
||||
<code>-nodeBlockForRowAtIndexPath:</code>
|
||||
`- (ASCellNodeBlock)collectionView:(ASCollectionView *)collectionView nodeBlockForItemAtIndexPath:(NSIndexPath *)indexPath` **_(recommended)_**
|
||||
|
||||
Otherwise, a collection node has mostly the same delegate and dataSource methods that a collection view would and is compatible with most UICollectionViewLayouts.
|
||||
<div class = "note">
|
||||
Note that these are the same methods as the `ASTableNode`! Please read the previous <a href = "containers-astablenode.html">`ASTableNode`</a> section as most of the details here are identical and so we will gloss over them quickly.
|
||||
</div>
|
||||
|
||||
As noted in the previous section
|
||||
<ul>
|
||||
<li>both of these ASCollectionView methods should not implement reuse (they will be called once per row)</li>
|
||||
<li>`collectionView:nodeBlockForRowAtIndexPath:` is preferred to `collectionView:nodeForItemAtIndexPath:` for its concurrent processing</li>
|
||||
<li>it is very important that node blocks be thread-safe</li>
|
||||
<li>ASCellNodes are used by ASTableNode, ASCollectionNod and ASPagerNode</li>
|
||||
</ul>
|
||||
|
||||
##Replace UICollectionViewController with ASViewController##
|
||||
|
||||
AsyncDisplayKit does not offer an equivalent to UICollectionViewController. Instead, use an ASViewController initialized with an ASCollectionNode.
|
||||
|
||||
Consider, the ASViewController subclass - LocationCollectionNodeController - from the <a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples/ASDKgram">ASDKgram sample app</a> that uses a collection node as its managed node.
|
||||
|
||||
An `ASCollectionNode` is assigned to be managed by an `ASViewController` in its `initWithNode:` designated initializer method.
|
||||
|
||||
```objective-c
|
||||
- (instancetype)initWithCoordinates:(CLLocationCoordinate2D)coordinates
|
||||
{
|
||||
_flowLayout = [[UICollectionViewFlowLayout alloc] init];
|
||||
_collectionNode = [[ASCollectionNode alloc] initWithCollectionViewLayout:_flowLayout];
|
||||
|
||||
self = [super initWithNode:_collectionNode];
|
||||
if (self) {
|
||||
_flowLayout.minimumInteritemSpacing = 1;
|
||||
_flowLayout.minimumLineSpacing = 1;
|
||||
}
|
||||
|
||||
return self;
|
||||
}
|
||||
```
|
||||
|
||||
##Accessing the ASCollectionView##
|
||||
If you've used previous versions of ASDK, you'll notice that `ASCollectionView` has been removed in favor of `ASCollectionNode`.
|
||||
|
||||
<div class = "note">
|
||||
`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`.
|
||||
</div>
|
||||
|
||||
**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
|
||||
|
||||
```objective-c
|
||||
- (void)loadView
|
||||
{
|
||||
[super loadView];
|
||||
|
||||
_collectionNode.view.asyncDelegate = self;
|
||||
_collectionNode.view.asyncDataSource = self;
|
||||
_collectionNode.view.allowsSelection = NO;
|
||||
_collectionNode.view.backgroundColor = [UIColor whiteColor];
|
||||
}
|
||||
```
|
||||
|
||||
##Table Row Height##
|
||||
|
||||
As discussed in the previous <a href = "containers-astablenode.html">`ASTableNode`</a> 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##
|
||||
<ul>
|
||||
<li><a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples/ASDKgram">ASDKgram</a></li>
|
||||
<li><a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples/CatDealsCollectionView">CatDealsCollectionView</a></li>
|
||||
<li><a href="https://github.com/facebook/AsyncDisplayKit/tree/master/examples/ASCollectionView">ASCollectionView</a></li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user