Swift学徒

AsyncDisplayKit 教程(6):多方向的智能预加载

多方向的智能预加载

ASDK 支持多方向的智能预加载。也就是说可以在垂直方向上滚动 table,当 cell 来到屏幕上的某个位置时,cell 会包含一个水平滚动的 Collection View。

虽然 Collection View 明显已经位于可见区域,但你并不想将整个 Collection View 都加载。为此,你可以让每个 Scroll View 分别拥有各自的 ASRangeController,每个 ASRangeController 的 Range Tuning Parameters 是分开配置的。

现在你已经完成了 AnimalTableController,你可以把它作为 ASPageNode 中的一页来使用。

打开 AppDelegate.m,将这句代码:

1
AnimalTableController *vc = [[AnimalTableController alloc] initWithAnimals:[RainforestCardInfo allAnimals]];

替换为

1
AnimalPagerController *vc = [[AnimalPagerController alloc] init];

然后打开 AnimalPagerController.m 在构造函数中 return 语句之前加入代码。你所需要做的仅仅是创建一个新的 pager,并将它作为 View Controller 的数据源:

1
2
_pagerNode = [[ASPagerNode alloc] init];
_pagerNode.dataSource = self;

Pager Node 实际上是一个配置好的 ASCollectionNode 子类,这和 UIPageViewController 的用法是一样的。

接下来你必须实现 Pager 的数据源方法。

实现 numberOfPagesInPagerNode: 方法:

1
2
3
- (NSInteger)numberOfPagesInPagerNode:(ASPagerNode *)pagerNode {
return self.animals.count;
}

实现 pagerNode:nodeAtIndex:方法,这和早先你实现过的 ASTableNode 方法很像:

1
2
3
4
5
6
7
8
9
10
11
- (ASCellNode *)pagerNode:(ASPagerNode *)pagerNode nodeAtIndex:(NSInteger)index {
//1
NSArray *animals = self.animals[index];
//2
ASCellNode *node = [[ASCellNode alloc] initWithViewControllerBlock:^{
return [[AnimalTableController alloc] initWithAnimals:animals];
} didLoadBlock:nil];
return node;
}

代码解释如下:

  1. 需要先获取一个数据模型。
  2. 你用到的是强大的 initWithViewControllerBlock: 构造方法。你需要提供一个闭包,在这个块闭包中返回你前面已经做好的 Table Node Controller,这样它的 View 会自动用作每一页的 View。酷!

这样就拥有一个完整的 Pager 了,它的 cell 来自于你前面完成的那个 Table Node Controller。它拥有二维的预加载,用户可以从水平、垂直两个方向滚动。

总述

完整的 AsyncDisplayKit 2.0 教程项目,从这里下载。如果你想看 Swift 版的,也可以从这里下载。

如果在进入第二部分之前想学习更多的内容,你可以浏览 AsyncDisplayKit 的官方主页,并查看它的文档。Scott Goodson (AsyncDisplayKit 的原作者) 也会发表一些你感兴趣的文字,它们按时间顺序罗列在这个地方:AsyncDisplayKit.org Resources

你可能会对 Building Paper 大事记 感兴趣。尽管它还没有被开源,并且还有许多东西会变化,但在它才开始的时候就关注它仍然是一件很有意思的事情。

接下来,我们会讲到,如何利用 ASDK 2.0 强大的布局系统。


万恶胖为首 wechat
关注公众号(ID:SwiftBetter),进一步探讨交流。