AsyncDisplayKit 2.0 教程:入门「译」
Pin Young Lv9
  2017-03-23 00:00:00 2017-03-23 00:00   2023-02-05 21:25:09   5k 字  18 分钟  

AsyncDisplayKit 2.0 Tutorial: Getting Started

前言

“艺术是你任何能做到极致的事”

AsyncDisplayKit 是一个UI框架，最初诞生于 Facebook 的 Paper 应用程序。它是为了解决 Paper 团队面临的核心问题之一：如何尽可能缓解主线程的压力？

现在,许多应用程序的用户体验,很大程度上依赖于持续手势和物理动画。至少,你的UI可能是依赖于某种形式的 scrollView。

这些类型的用户界面完全依赖于主线程，并且对主线程阻塞非常敏感。主线程阻塞将导致丢帧，降低用户的体验。

一些主线程开销较大的任务包括：

  • 计算尺寸和布局：比如 -heightForRowAtIndexPath:，或者在UILbel中调用 -sizeThatFits 以及指数上升的 AutoLayout‘s布局计算。
  • 图像解码：想要在一个 image view 中使用 UIImage，首先要进行解码。
  • 绘图：复杂的文本以及手动绘制渐变和阴影。
  • 对象生命周期：创建，操纵和销毁系统对象（即创建一个UIView）

当正确使用时,AsyncDisplayKit 允许您在默认情况下异步执行所有测量、布局和渲染。无需任何额外的优化，一个应用程序可以减少约一个数量级的主线程开销。

除了这些性能优势，酷炫的 AsyncDisplayKit 还为开发者提供的便利接口，用简洁的代码就能完成复杂的功能。

在这两部分 AsyncDisplayKit 2.0 教程中，你将掌握使用ASDK构建一个实用的和动态的应用程序的所有要素。在第一部分中，你将要学习一些在你构建应用程序时可以用到的宏观思想。在第二部分中，你将学习如何构建自己 node 的 subclass，以及如何使用ASDK强大的布局引擎。为了更好的完成本教程，你需要会使用 Xcode 以及 熟悉 Objective-C。

免责声明：ASDK不兼容 Interface Builder和AutoLayout，因此，您将不会在本教程中使用它们，虽然ASDK完全支持Swift(除了ComponentKit)，许多开发者仍在使用
Objective-C。免费App排行榜前100大多数都没有使用Swift（至少6个使用ASDK）。出于这些原因，本系列将重点介绍 Objective-C。话虽这么说，我们已经包括了一个Swift版本的实例项目。（嘴上说没有，代码还是很诚实的😂~）

开始

首先，下载初始项目。

该项目使用 CocoaPods 来拉入AsyncDisplayKit。所以，在正常的 CocoaPods 体系下，打开 RainforestStarter.xcworkspace 而不是RainforestStarter.xcodeproj。

注意：需要网络连接才能完成本教程。

构建并运行以查看包含 UITableView 动物列表的应用程序。如果你看过了代码，AnimalTableController 你会发现这是一个正常且熟悉的 UITableViewController 类。

注意：确保在真机上运行本教程中的代码，而不是在模拟器中运行。

向上滑动你将看到帧数丢失引起的卡顿。你不需要启动控制台，以便能发现到这个应用程序需要在性能方面上的一些优化。

你可以通过 AsyncDisplayKit 的力量来解决这个问题

ASDisplayNode 简介

ASDisplayNode 是ASDK的核心类，它只是一个类似于 MVC 中的 “View” 一样的UIView 或 CALayer。认识一个 node 的最佳方法是参照你已经熟悉的 UIViews 和 CALayers 之间的关系。

记住，iOS应用程序中的所有在屏幕上的显示都通过CALayer对象表示的。UIViews 创建并且拥有一个底层的 CALayer，并为他们添加触摸处理和其他交互功能。UIView 并不是 CALayer 的子类，而是相互环绕，扩展其功能。

image

这种抽象的情况下扩展 ASDisplayNode：您可以将它们视为包装一个 view，就像在 view 上添加一个 layer 一样。

通常由 Node 创建的一个常规的view，其创建和配置都在行队列中执行，并且异步渲染。

image

幸运的是，用于处理 Node 的 API 对于任何使用过的 UIViews 或者 CALayers 的人来说应该异常的熟悉。所有 View 的属性都可以等效为 Node 类。你可以访问基础的 view 或者 layer 本身，就像是访问 view.layer 一样

节点容器（The Node Containers）

虽然 Node 本身提供了巨大的性能改进的可能，但真正的强大的是它们与四个容器类结合使用时产生的黑魔法。

这些类包括：

  • ASViewController：一个 UIViewController 的子类，允许你提供要管理的 Node。
  • ASCollectionNode and ASTableNode：Node 等效于 UICollectionView 和 UITableView，其子类实际上保留在底层。
  • ASPagerNode:一个ASCollectionNode的子类，提供极好的滑动性能相比与 UIKit 的 UIPageViewController 来说。

image

说得好，但真正的黑魔法来自 ASRangeController 这些类用于影响所包含的 Node 的行为。现在，跟着我并把你们的脑袋放空吧~

TableNode

你要做的第一件事就是将当前 TableView 替换为 TableNode。这个没什么难度。

将 TableView 替换为 TableNode

首先，进入到 AnimalTableController.m 。在此类中添加下面代码下面代码。

#import <AsyncDisplayKit/AsyncDisplayKit.h>

这就导入了 ASDK 框架。

然后，我们继续，替换 tableView 的声明属性 ：

@property  （ strong，nonatomic ） UITableView * tableView;

替换为 tableNode：

@property  （ strong，nonatomic ） ASTableNode * tableNode;

这将导致这个类中很多地方报错，但不要慌张！

image

别担心。这些错误和警告将作为你的向导，将代码转换成我们想要的。

-viewDidLoad 中的报错是理所当然，因为 tableView 已经被替换掉。我不会让你通过 tableNode 替换 所有的 tableView 实例（我的意思是，查找和替换并非那么难），但是如果你做了，你会看到：

  1. 你应该为 ASTableNode 分配一个属性。
  2. table Node 没有调用 -registerClass:forCellReuseIdentifier: 方法。
  3. 你不能添加一个 node 到 subview

此时，你应该将 -viewDidLoad 中的方法替换为：

- (void)viewDidLoad {
  [super viewDidLoad];
 
  [self.view addSubnode:self.tableNode];
  [self applyStyle];
}

这里要注意一个有趣的情况，你调用的是 UIView 的一个 -addSubnode: 方法，该方法是通过 category 添加到 UIView 上的，等效于:

[self.view addSubview:self.tableNode.view];

接下来，修改 -viewWillLayoutSubviews 中的代码：

- (void)viewWillLayoutSubviews {
  [super viewWillLayoutSubviews];
 
  self.tableNode.frame = self.view.bounds;
}

这样就替换用 self.tableNode 替换了 self.tableView，并且设置了 table 的 Frame

继续修改 -applyStyle 方法中的代码为：

- (void)applyStyle {
  self.view.backgroundColor = [UIColor blackColor];
  self.tableNode.view.separatorStyle = UITableViewCellSeparatorStyleNone;
}

这是唯一设置 table 的 separatorStyle 的一行代码。注意 tableNode 的 view 是如何访问 table 的 separatorStyle 属性的。ASTableNode 不会暴露所有UITableView的的属性，所以你必须通过 tableNode 底层的 UITableView 实例去设置 UITableView 的特殊属性。

然后，在 -initWithAnimals: 方法中添加。

_tableNode = [[ASTableNode alloc] initWithStyle:UITableViewStylePlain];

并且在 return 之前，调用：

[self wireDelegation];

这就会在初始化 AnimalTableController 的时候，创建了一个 tableNode 并且调用 -wireDelegation 方法 设置 tableNode 的 代理。

设置 TableNode 的 DataSource & Delegate

类似于 UITableView，ASTableNode 也使用 DataSource 和 Delegate 来设置本身。TableNode 的ASTableDataSource 和 ASTableDelegate protocols 非常类似于 UITableViewDataSource 和 UITableViewDelegate。

事实上，虽然他们定义了一些完全相同的方法，如 -tableNode:numberOfRowsInSection:，但两组协议也不完全相同，因为 ASTableNode 行为和UITableView还以所有不同的。

找到 -wireDelegation 方法， 并用 tableNode 替换 tableView：

- (void)wireDelegation {
  self.tableNode.dataSource = self;
  self.tableNode.delegate = self;
}

现在， 你会收到警告, AnimalTableController 实际上不符合协议。目前，AnimalTableController 仅遵循 UITableViewDataSource 和 UITableViewDelegate协议。在下面的章节中，我们将遵循这些协议，使我们能够使用 tableNode 的功能。

遵循 ASTableDataSource

在 AnimalTableController.m 开头的地方找到 AnimalTableController 的 DataSource 扩展声明：

1
2
@interface AnimalTableController (DataSource)<UITableViewDataSource>
@end

用 ASTableDataSource 替换 UITableViewDataSource为：

@interface AnimalTableController (DataSource)<ASTableDataSource>
@end

现在，AnimalTableController 已经遵循了 AnimalTableController 协议。本就该如此了。

导航到 AnimalTableController.m 的底部并找到 DataSource category 的实现。

首先，将 UITableViewDataSource 的 -tableView:numberOfRowsInSection:方法，
更改为ASTableDataSource 的版本。

1
2
3
- (NSInteger)tableNode:(ASTableNode *)tableNode numberOfRowsInSection:(NSInteger)section {
  return self.animals.count;
}

接着，ASTableNodes 的 cells 会以不同于 UITableView 的方式返回。用下面的代码替换 -tableView:cellForRowAtIndexPath: 以适应新的规则。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 1
- (ASCellNodeBlock)tableNode:(ASTableView *)tableView nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath {
  
  // 2
  RainforestCardInfo *animal = self.animals[indexPath.row];
 
  // 3 return ASCellNodeBlock
  return ^{
    // 4
    CardNode *cardNode = [[CardNode alloc] initWithAnimal:animal];
 
    //You'll add something extra here later...
    return cardNode;
  };
}

让我们整理一下：

  1. ASDK 中的 ASCellNode 等价于 UITableViewCell 或者 UICollectionViewCell。要注意的是这个方法返回的是一个 ASCellNodeBlock，ASTableNode 维持着内部所有的 Cell，每个 indexPath 对应一个 block，并且随时准备进行初始化。
  2. 你的首要任务是通过数据模型构建cell。这是非常重要的一步，要注意！你获取数据后在 下面的 block 处理。不要在 block 里引用indexPath,以防止 block 运行前的数据变动。
  3. 然后返回一个 block，其返回值必须为 ASCellNode。
  4. 没有必要担心Cell的复用以及初始化一个Cell的方法。您可能会注意到您现在返回了CardNode，而不是CardCell。

这让我想到一个重要的点。或许你已经了解到，使用 ASDK 不需要复用 cell，好吧，我已经说了两遍了，但能记住就好。请随意删除顶部kCellReuseIdentifier的定义吧

1
static NSString *kCellReuseIdentifier = @"CellReuseIdentifier";

你不必再担心 -prepareForReuse了

遵循 ASTableDelegate

在 AnimalTableController.m 顶部，找到以下Delegate类别接口声明：

1
2
@interface AnimalTableController (Delegate)<UITableViewDelegate>
@end

用 ASTableDelegate 替换 UITableViewDelegate：

1
2
@interface AnimalTableController (Delegate)<ASTableDelegate>
@end

现在 AnimalTableController 已经遵循了 ASTableDelegate，是时候做处理了。在 AnimalTableController.m 底部找到 Delegate 分类的实现。

我们都知道，每个 UITableView 至少都要提供一个 -tableView:heightForRowAtIndexPath: 实现方法，因为每个 cell 的高度都由代理计算和返回。

ASTableDelegate 中没有 -tableView:heightForRowAtIndexPath:。再 ASDK 中，所有的 ASCellNode 都负责确定自己的大小。你可以选择为单元格定义最小和最大尺寸，而不是提供静态高度。这种情况下，你希望每个cell的高度至少为屏幕的 2／3。

现在不用担心太多，这个会在第二部分中介绍。

现在只需要替换 -tableView:heightForRowAtIndexPath:为:

1
2
3
4
5
6
7
- (ASSizeRange)tableView:(ASTableView *)tableNode 
  constrainedSizeForRowAtIndexPath:(NSIndexPath *)indexPath {
  CGFloat width = [UIScreen mainScreen].bounds.size.width;
  CGSize min = CGSizeMake(width, ([UIScreen mainScreen].bounds.size.height/3) * 2);
  CGSize max = CGSizeMake(width, INFINITY);
  return ASSizeRangeMake(min, max);
}

经过我们的辛勤劳动，重新编译、运行项目，看看发生了什么。

image

真是一个流畅的 tableView！一旦你开始做了，那就让我们做的更好吧！

无限滚动

在大多数应用中，服务器的数据点的个数往往会多于当前 tableView 中显示的单元格数量。这意味着，你必须通过某些手段做无缝处理，以便用户刷完当前数据列表时从服务端加载新的数据。

很多时候，这是通过手动观察滚动视图方法中的内容偏移来处理 scrollViewDidScroll:, 使用 ASDK， 有一种更具说明性的处理方式。相反的，你可以预先确定好你需要加载的页数。

你要做的第一件事是取消已经存在的方法的注释。在 AnimalTableController.m 的结尾，取消 Helpers 分类中的两个方法。你可以认为 -retrieveNextPageWithCompletion: 是你的网络调用，而 -insertNewRowsInTableNode: 是个非常典型的再表中添加新的元素的方法。

接下来，在 -viewDidLoad 添加：

1
self.tableNode.view.leadingScreensForBatching = 1.0;  // overriding default of 2.0

设置 leadingScreensForBatching 为 1.0 意味着当用户滑动一个屏的时候，就会载入新的数据。

继续，在 Delegate 分类中实现：

1
2
3
- (BOOL)shouldBatchFetchForTableNode:(ASTableNode *)tableNode {
  return YES;
}

该方法用于告诉 tableView 是否继续请求新的数据。如果返回 NO，则在到达 API 数据末尾时，不会再不会发出任何请求。

因为你希望无限滚动，那就返回 YES，以确保总是请求新的数据。

接下来，还要添加：

1
2
3
4
5
6
7
8
9
- (void)tableNode:(ASTableNode *)tableNode willBeginBatchFetchWithContext:(ASBatchContext *)context {
  //1
  [self retrieveNextPageWithCompletion:^(NSArray *animals) {
    //2
    [self insertNewRowsInTableNode:animals];
    //3
    [context completeBatchFetching:YES];
  }];
}

该方法在用户滑动到 table 的末端并，且 -shouldBatchFetchForTableNode: 方法返回 YES 时被调用。

让我们回顾下上面的章节：

  1. 首先，你要请求新的 animals 数据来展示。通常是通过 API 来获取的一组array。
  2. 完成后，用新下载的数据更新 tableView
  3. 最后，确保 -completeBatchFetching:返回的是YES，即大功告成。在完成操作之前，不会进行新的数据请求。

Build and Run，并且不停的滚呀滚。你将会看到不停的看到一只鸟，他们是无限的。

image

智能预加载

你在工作中是否曾经遇到需要预先加载内容到 scrollView 或者 pageView 控制器中？也许你正在处理一个充满屏幕 image ，并且总是希望在接下来的几张图片加载时处于等待状态，所以用户很少看到占位符。

image

当你再这样的体系下工作时，你很快就会意识到有很多问题要考虑。

  • 你占用了多少内存
  • 你应该提前多久加载内容
  • 你决定什么时候忽略用户的交互反映

并且当你考虑到多个维度的内容时，将些问题将会变得更加复杂。假设你有一个pageViewController，里面每个 viewController 都带有一个 collectionView。现在，你就需要考虑如何在两个方向上动态加载内容。同时，还要对每个设备进行优化。

image

还记得告诉你 ASRangeController 是不重要的吗？现在，这将是我们的重点。

在每个容器类中，所有包含的 node 都有一个接口状态的概念。在任何给定的时间，一个 node 可以是下面的任意组合：

  • Preload Range（预载范围）：通常最远的范围从可见区域。这是当cell的每个 subNode （例如ASNetworkImageNode） 的内容从外源加载，例如API和本地缓存。这与批量获取时，使用用模型对象代表cell本身形成对比。
  • Display Range（显示范围）：在这里进行显示任务，例如文本绘制和进行图像解码。
  • Visible Range（可见范围）：此时，node 至少有一个像素在屏幕上。

image

这些范围也适用于 screenfuls 的度量，并且可以使用 ASRangeTuningParameters 属性轻松调整。

例如：你正在使用一个 ASNetworkImageNode在 gallery 的每个页面中展示图像，当每个cell进入 Preload Range 时，会发送网络请求，并且在进入 Display Range 时进行图像解码。

通常来说，你不必对这些 Ranges 太较真。利用好已有的组件，如：ASNetworkImageNode 和 ASTextNode，通常来说你将会获得极大的便利。

注意: 有件不明显的事，这些 Ranges 不是堆栈的。相反，它们会在
Visible Range 上重叠和汇聚。如果将显示和预取都设置为一个屏幕，则它们将完全相同。通常数据需要存在才能显示，所以一般预取范围应该稍大一点。那么在 node 到达该范围时，就可以开始显示。

通常，该范围的前侧大于后侧。当用户改变其滚动方向时，范围的大小也是相反的，以便于对应用户实际移动的方向。

Node接口的状态回调

你可能会疑惑：这些 Ranges 是如何正确工作的？很高兴你这样问~

系统中的每个 node 都有一个interfaceState 属性，是一个带有字段（(NS_OPTION）ASInterfaceState类型。ASRangeController 负责管理 ASCellNode 在 scrolView 上的移动，每个subNode 都由一个 interfaceState 属性做对应的更新。这意味着即使时 tree 中最深的 nodes 也可以相应 interfaceState 的变化。

幸运的是，我们很少需要直接去操作 node 的 interfaceState 上的 二进制位。更常见的做法时，你只需要对某 node 的特定的状态进行更改。这就是接口的状态回调。

Node 命名

为了看到一个 node 的各种状态，给它命名时很有必要的。这样，你就可以监测每个 node 的数据加载、内容成、屏幕展示以及所以的事情。

回到代码-tableNode:nodeBlockForRowAtIndexPath:,添加一句注释

//You'll add something extra here later...

在它的下面，给 cardNode 添加一个 debugName：

1
cardNode.debugName = [NSString stringWithFormat:@"cell %zd", indexPath.row];

观察 Cells

进入 CardNode_InterfaceCallbacks.m 中，你可以找到六种追踪 node 在 ranges 中的状态的方法。取消注释，Build and Run。打开你的控制台，然后慢慢滑动 table。对照你的滑动，观察cell在对应的状态变化。

注意： 大多数情况下，你只要关心 -didEnterVisibleState 或 -didExitVisibleState 方法对 ASInterfaceState 的改变。或者说，已经为你做好了许多引擎。你可以查看 ASNetworkImageNode 中的代码，看看你集成的通过Preload 和 Display 状态实现的功能。 所有 node 网络图片的请求和解码，以及内存的释放都是自动完成，不费吹灰之力。

智能预加载（续）

在 2.0 版本中，已经介绍了多个维度上智能与加载的概念。假设你有一个竖直滚动的tableView，在其中某些Cell包含了水平滚动的 collectionView。

image

尽管现在的技术能够实现，但你不会希望在到达可见区域之前预先加载全部的 collection。相反的，两个方向上的 scrollView 都由各自的 ASRangeController 单独控制自己的 range 参数。

来到二次元

现在，你已经有了完整的 AnimalTableController， 你可以把它做为 ASPagerNode 的一个page。

项目已经提前写好了控制器的代码，首先进入 **AppDelegate.m**。

找到 -installRootViewController 的下面代码：

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

替换为：

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

然后，跳到 AnimalPagerController.m 在 -init 方法中添加创建 pager 方法以及 dataSource 的数据源：

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

pagerNode 是 ASCollectionNode 的子类，使用方法与 UIPageViewController 一样。API 实际上比 UIPageViewController 要简单的多。

接下来要实现 pager 的 dataSource 方法，在底部找到 ASPagerDataSource 分类.

首先，告诉 pager 有几个页面。实际上当前的 animal 数组中有三组不同动物，我们需要重写 -numberOfPagesInPagerNode:方法：

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

然后，你需要实现 -pagerNode:nodeAtIndex 方法，类似于先前实现的 ASTableNode 的 dataSource 方法。

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

我们来总结下这部分：

  1. 尽管这个版本中没有进行模块化分，但是首先获取数据模型是个好习惯。
  2. 这一次，你使用的正是强大的 -initWithViewControllerBlock: 构造器。你所要做的就是返回一个block，这个 block 返回你提前设置好的 tableNodeController，它将自动展示在pager 的 页面中。真是太酷了😏~

一旦你添加了这个方法，你将拥有一个完整功能的 Pagar，其中的 cell 是从你原先创建的 tableNodeController 生成的。现在，就可以在用户的垂直和水平滑动下，充分发挥二维预加载的功能！

要查看这个 AsyncDisplayKit 2.0 教程完整的项目，点击这里进行下载。如果你想查看swift版本，这里也有。

准备好之后，请转到该项目的第2部分，了解 AsyncDisplayKit 2.0 引入的强大的新的布局系统。

如果你想先进行深入了解，你可以阅读 AsyncDisplayKit主页 的文档。Scott Goodson（AsyncDisplayKit的原创作者）也有几个你可能会感兴趣的话题。最近的话题很好的概述了一些框架对处理大图片存在问题的的尝试。

你可能会对 Paper的构建 感兴趣。虽然当时并没有开源，并且有许多地方发生了变化，但看到这一切的开始还是挺有意思的。

这里有一个 public Skack channel ,欢迎来提问~

著作权声明

本文译自 AsyncDisplayKit 2.0 Tutorial: Getting Started .

由@柏荧(BY)进行翻译,首次发布于 BY Blog，转载请保留原文链接.

  • 本文标题：AsyncDisplayKit 2.0 教程:入门「译」
  • 本文作者：Pin Young
  • 创建时间：2017-03-23 00:00:00
  • 本文链接：posts/4a6.html
  • 版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
  1. 1. 前言
  2. 2. 开始
  3. 3. ASDisplayNode 简介
  4. 4. 节点容器（The Node Containers）
  5. 5. TableNode
    1. 5.0.0.1. 将 TableView 替换为 TableNode
    2. 5.0.0.2. 设置 TableNode 的 DataSource & Delegate
    3. 5.0.0.3. 遵循 ASTableDataSource
    4. 5.0.0.4. 遵循 ASTableDelegate
  • 5.1. 无限滚动
  • 5.2. 智能预加载
  • 5.3. Node接口的状态回调
    1. 5.3.0.1. Node 命名
    2. 5.3.0.2. 观察 Cells
  • 5.4. 智能预加载（续）
  • 5.5. 来到二次元
  • 6. 著作权声明