集成 AsyncDisplayKit
AsyncDisplayKit 官方只支持 CocoaPods 和 Carthage 安装。Carthage 不用说了，它是 Swift 包管理器。以国内的网络状况，CocoaPods 也基本不用想了，于是手动安装是我们的唯一选择。
如果你想用 git submodule 的方式安装，请参考这里。 本文使用源代码方式安装，于是你需要从 github 以 zip 包方式下载 AyncDisplayKit。下载后解压缩出 AsyncDisplay-master 目录（你可以把这个目录拷贝到要集成的项目目录下）。将这个目录拖进你的项目的项目导航窗口。
在项目导航窗口，选中你的项目的 target，在 General/Embedded Binaries 下面，点击 + 按钮，将 AsyncDisplayKit.framerork 添加到列表中。
编译项目，看看是否有报错的地方。
以 submodule 方式集成
进入要安装的项目根目录，将 ASDK 作为一个 git submodule 添加到项目中：
git submodule add https://github.com/facebook/AsyncDisplayKit.git
- 等 git clone 完成，进入 AsyncDisplayKit 目录，将 .xcodeproj 拖进你的项目的 Xcode 项目导航窗口，它会在你的项目图标下方显示，无论你拖到什么位置。
- 在项目导航窗口中选择 AsyncDisplayKit.xcodeproj，修改 deployment target 为你的 App target 一致。
- 在项目导航窗口中选中你的项目图标，在 target 设置中，选择 App 的 target。在 General 标签页，找到 Embedded Binaries，点击 + 按钮，添加 AsyncDisplayKit.framework。
- 完成。
导入头文件
要在你的 Object C 项目中使用 AsyncDisplayKit ，需要导入头文件：
#import <AsyncDisplayKit/AsyncDisplayKit.h>
用 ASTableNode 替换 UITableView
在你的 View Controller 中，将用到 UITableView 的地方全部注释，我们将使用 ASTableNode 替换它以获得顺滑的滚动加载体验。因此将原来的 tableView 对象、TableView 的 Delegate 和 DataSource 协议方法和调用代码全部删除。
在 View Controller 中，定义一个属性：
@property(strong,nonatomic)ASTableNode* tableNode;
在 viewDidLoad 方法中，用下列代码初始化 tableNode：
// 1
_tableNode = [[ASTableNode alloc]initWithStyle:UITableViewStylePlain];
// 2
self.tableNode.dataSource = self;
self.tableNode.delegate = self;
// 3
self.tableNode.view.separatorStyle = UITableViewCellSeparatorStyleNone;
// 4
self.tableNode.view.leadingScreensForBatching = 1.0;
// 5
[self.view addSubnode:self.tableNode];代码解释如下：
- 和 UITableView 一样，这句创建了 ASTableNode 实例，同时指定类型为 plain，因为我们决定使用自定义的表格。
- 设置 delegate 和 dataSource。
- tableNode 实际上封装了一个 UITableView，可以通过它的 .view 属性引用这个 UITableView，因此这句清除了表格分隔线。
- leadingScreenFroBatching 指定了表格什么时候抓取新数据，单位为一个完整屏幕。这句表示当还有 1 屏 cell 数据缓存时就抓取新数据。
- addSubnode 是以 Category 形式添加的。其作用类似于 addSubview，不过它添加的是 ASNode 而不是 UIView。
实现一个viewWillLayoutSubviews方法：
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
self.tableNode.frame = CGRectMake(0, CGRectGetMaxY(_bar.frame), CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)-CGRectGetHeight(self.bar.frame));
}没有什么，指定了 TabelNode 的 frame 而已。这里我们让它放在 _bar(一个 UIView)下面，并占据屏幕上除 _bar 以外的剩余空间。
在 dealloc 中释放 delegate 和 dataSource，据说这样可以避免闪退(实际有没有作用不得而知)：
-(void)dealloc{
self.tableNode.delegate = nil;
self.tableNode.dataSource = nil;
}接下来实现 dataSource:
- (NSInteger)tableNode:(ASTableNode *)tableNode numberOfRowsInSection:(NSInteger)section {
// 1
return self.models.count;
}
- (ASCellNodeBlock)tableNode:(ASTableNode *)tableNode nodeBlockForRowAtIndexPath:(NSIndexPath *)indexPath
{
// 2
AlbumModel* model = _models[indexPath.row];
// 3
ASCellNode *(^ASCellNodeBlock)() = ^ASCellNode *() {
AlbumCellNode *cellNode = [[AlbumCellNode alloc] initWithAlbum:model];
return cellNode;
};
return ASCellNodeBlock;
}
- (NSInteger)numberOfSectionsInTableNode:(ASTableNode *)tableNode{
// 4
return 1;
}
ASTableNode 的数据源方法和 UITableView 的数据源方法基本上是可以对应的，比如这 3 个方法，返回了表格的行数、节数和 cell。
代码解释如下：
- models 是一个数组，是用远程抓取到的模型对象来填充的。我们需要显示这些模型数据，因此简单返回它的个数以作为表格的行数。
- nodeBlockForRowAtIndexPath: 方法签名有点怪（它的返回结果是一个块），不用管它，我们把它当成 cellForRowAtIndexPath: 方法用就行，除了返回结果奇怪点外，它们基本上没区别。这句从 models 数组中检索出 cell 将要展现的模型对象。
- ASCellNode 是 UITableViewCell 的对应封装。本来我们可以直接返回 ASCellNode（ASDK 有一个返回这个类型的数据源方法），但是官方推荐我们使用返回块的版本。因此这里定义了一个 ASCellNodeBlock 对象，这是一个特殊的块，会返回一个 ASCellNode，不需要提供任何参数。在这个块中，我们使用了一个自定义的 ASCellNode，名为 AlbumCellNode（后面我们会实现它），并调用它的初始化方法把模型传递进去，然后在块的最后返回这个 ASCellNode。
- 我们的表格不分组，所以返回 1 就行。
接下来是 delegate 方法实现：
// 1
- (BOOL)shouldBatchFetchForTableNode:(ASTableNode *)tableNode {
return YES;
}
//2
- (void)tableNode:(ASTableNode *)tableNode willBeginBatchFetchWithContext:(ASBatchContext *)context
{
[context beginBatchFetching];
[self loadPageWithContext:context];
}
// 3
- (void)tableNode:(ASTableNode *)tableNode didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
[tableNode deselectRowAtIndexPath:indexPath animated:YES];
// 你自己的代码
......
}这两个全新的 delegate 方法是 ASTableDelegate 中独有的，UITableViewDelegate 中没有对应的方法。这两个方法的作用是让表格实现异步加载，也就是以往我们需要用 MJRefresh 实现的功能。代码解释如下：
- 这个方法用于告诉 ASTableNode，用户的一次下拉动作是否需要触发异步抓取，这里我们返回了 YES，也就是不管什么情况都进行异步抓取。我们这样做的原因，是现在的后台服务从来不告诉前端什么时候数据才会”完”,反正有数据的话服务器会返回数据，没数据的话则返回错误（比如“ 404 没有数据” 之类）或者返回空结果集。所以我们根本无法事先知道数据什么时候数据已经加载完。所以不管数据有没有完，我们都当做没有完来进行抓取，并通过服务器返回的结果来判断。这样这个方法就没有必要进行任何计算了，直接返回 YES。
- 这个方法用于进行一次抓取。loadPageWithContext: 方法是我们自定义的，它会加载一页数据，同时页数会累加，这样每次都会加载“下一页”，除非服务器没有数据返回。context 参数是必须的，用于抓取完后通知 ASTableNode 抓取完成（见后面的loadPageWithContext 方法实现)。
- 和 UITableView 的 cell 点击事件方法一模一样，你自己实现吧。
然后，新增两个方法如下：
// 1
- (void)loadPageWithContext:(ASBatchContext *)context
{
NSString* radioId = [[AccountAdditionalModel currentAccount] radioId];
// 2
[self loadAlbums:radioId pageNum:pageNum+1 pageSize:pageSize].thenOn(dispatch_get_main_queue(),^(NSArray<AlbumModel>* array){
if(array!=nil){
// 3
pageNum = pageNum+1;
[_models addObjectsFromArray: array];
// 4
[self insertNewRowsInTableNode:array];
}
// 5
if (context) {
[context completeBatchFetching:YES];
}
}).catch(^(NSError* error){
[self showHint:error.localizedDescription];
// 6
if (context) {
[context completeBatchFetching:YES];
}
});
}
// 7
- (void)insertNewRowsInTableNode:(NSArray<AlbumModel>*)array
{
NSInteger section = 0;
NSMutableArray *indexPaths = [NSMutableArray array];
for (NSUInteger row = _models.count-array.count; row < _models.count; row++) {
NSIndexPath *path = [NSIndexPath indexPathForRow:row inSection:section];
[indexPaths addObject:path];
}
[_tableNode insertRowsAtIndexPaths:indexPaths withRowAnimation:UITableViewRowAnimationNone];
}代码解释如下：
- 这个方法用于加载一页数据，如果后台服务器也支持分页查询的话。这里各人的实现会不一样，这个实现仅供参考。
- 在这个方法中，调用你自己的分页抓取实现，具体的实现就不介绍了，无非就是向服务器进行异步请求之类的。注意，这里的分页抓取实现使用了 Promise 设计模型来解决异步调用的问题，即 thenOn/catch 形式。
- 当所请求的数据返回，如果结果集不为空，我们累加当前页数和数据源数组。
- 调用 insertNewRowsInTableNode 方法，这个方法向 tableNode 中插入新的单元格（见后面的实现）。
- 数据源更新完毕，一定要通知 context（ASBatchContext 实例）告诉它批抓取结束，即调用它的 completeBatchFetching 方法。
- 出现错误时，也要调用 completeBatchFetching。
- insertNewRowsInTableNode 方法实现就很简单了，一次向 tableNode 中插入多个 cell。
批抓取什么时候进行？
ASTableNode 也有“页”的概念，但和我们向服务器进行分页请求时的“页”不同，这里的“页”是一屏的概念。也就是说，我们在 viewDidLoad 中设置 self.tableNode.view.leadingScreensForBatching = 1.0; 这一句时，表示当屏幕中还剩下一屏（页）的数据就要显示完的时候，ASTableNode 会自动进行抓取。
但是我们一次向服务器能够请求的页大小并不一定能够填满一屏。比如分页查询的页大小是 4，然而 4 条数据并不足以填满一个屏幕，因此 ASTableNode 还会再请求一次分页查询，然后检查（会进行一个预布局，计算数据显示时的尺寸）是否填满一屏，如果不够，会再次请求，直至填满一屏。
也就是说，数据在真正得到显示之前就已经进行了布局（异步的）。当需要显示的时候，仅仅是一个绘制而已，这样绘制的速度就会非常快，滚动体验会无比顺滑。
自定义 cell
ASTableNode 的真正难点，在于自定义 cell 的使用，因为 ASDK 使用了自己的布局系统 ASLayoutSpec，这个布局系统不同于你曾经使用过的任何一个自动布局系统，没有使用过它的人无疑会很头疼。但没有关系，当你使用过它几次之后，你就会觉得它和安卓的布局系统很像，还是较容易掌握的。
在前面的 tableNode: nodeBlockForRowAtIndexPath: 数据源方法中，我们使用了一个自定义的 ASCellNode 类 AlbumCellNode，它就是一个 ASLayoutSpec 的极好的例子。我们来看看它是怎样实现的。
@implementation AlbumCellNode{
AlbumModel* _album;
ASNetworkImageNode *_photoImageNode;
ASTextNode *_titleLabel;
ASTextNode *_contentLabel;
ASTextNode *_albumCountLabel;
}这个 cell 中包含了几个对象：
- _album：一个自定义模型对象，我们将在 cell 上展示的数据。
- _photoImageNode：一个 ASNetwokImageNode(能够异步加载图片的 UIImageView)，用于在 cell 上显示一张图片。
- _titleLabel：一个 ASTextNode，用于显示标题文本。ASTextNode 相当于 UILabel，不同的是能够在 ASCellNode 上使用。通常情况下，在 ASCellNode 中你不能使用 UIKit 中的UI 组件，而只能使用它们的 ASDK 的封装类。
- _contentLabel：用于显示一些文字描述。
- _albumCountLabel：用于显示专辑中的曲目数。
然后是初始化方法：
- (instancetype)initWithAlbum:(AlbumModel *)album{
self = [super init];
if (self) {
_album = album;
// 1
_photoImageNode = [[ASNetworkImageNode alloc] init];
_photoImageNode.URL = [NSURL URLWithString:[kDownloadUrl add: album.icon]];
[self addSubnode:_photoImageNode];
// 2
_titleLabel = [[ASTextNode alloc]init];
_titleLabel.attributedText = [[NSAttributedString alloc]initWithString:album.title attributes:@{NSForegroundColorAttributeName: [UIColor blackColor],
NSFontAttributeName: [UIFont systemFontOfSize:15]}];
[self addSubnode:_titleLabel];
_contentLabel = [[ASTextNode alloc]init];
NSString* newStr = album.content;//[album.content stringByPaddingToLength:album.content.length*10 withString:album.content startingAtIndex:0];
_contentLabel.attributedText = [[NSAttributedString alloc]initWithString:newStr attributes:@{NSForegroundColorAttributeName: [UIColor grayColor],
NSFontAttributeName: [UIFont systemFontOfSize:12]}];
[self addSubnode:_contentLabel];
_albumCountLabel = [[ASTextNode alloc]init];
_albumCountLabel.backgroundColor = [UIColor redColor];
_albumCountLabel.cornerRadius = 3;
_albumCountLabel.clipsToBounds = YES;
_albumCountLabel.attributedText = [[NSAttributedString alloc]initWithString:[album.programCount add:@"辑"] attributes:@{NSForegroundColorAttributeName: [UIColor whiteColor],
NSFontAttributeName: [UIFont systemFontOfSize:9]}];
[self addSubnode:_albumCountLabel];
}
return self;
}这个初始化方法需要用一个模型数据作为参数，根据模型中已有的数据来初始化 UI 组件。
- 构建一个 ASNetworkImageNode，将它通过 addSubnode 添加到 cell 中。这个组件的使用非常简单，实例化、设置 URL、addSubnode。
- 剩下的是构建 3 个 ASTextNode 并 addSubnode，它们的使用都是一样的，所以只看一个就够了。关键点在于 attributedText 属性的使用，也就是这个组件通过 NSAttributedString 来一次性指定文字的字体、大小、颜色、换行、段落格式、对齐方式、文本内容。当然这个对象暴露了一些 UILabel 和 CALayer 的属性，比如 backgroundColor、cornerRadius 等。
注意到一个细节没有？不管是 ASNetworkImageNode 还是 ASTextNode，它们都不需要设置框架（frame）。这是因为它们的构建和布局是分开进行的（这就是框架名字中 Async 异步的由来了），在初始化方法中，你只管构建好了，布局在另一个方法中进行：
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
// 1
NSMutableArray *mainStackContent = [[NSMutableArray alloc] init];
[mainStackContent addObject:_titleLabel];
[mainStackContent addObject:_contentLabel];
// 2
_albumCountLabel.textContainerInset = UIEdgeInsetsMake(3, 5, 3, 5);
// 3
ASRelativeLayoutSpec *albumCountSpec = [ASRelativeLayoutSpec
relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionStart
verticalPosition:ASRelativeLayoutSpecPositionCenter
sizingOption:ASRelativeLayoutSpecSizingOptionMinimumWidth
child:_albumCountLabel];
// 4
[mainStackContent addObject:albumCountSpec];
// 5
ASStackLayoutSpec *contentSpec =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
spacing:8.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStretch
children:mainStackContent];
contentSpec.style.flexShrink = 1.0;
// 6
_photoImageNode.style.preferredSize = CGSizeMake(90, 90);
// 7
ASStackLayoutSpec *avatarContentSpec =
[ASStackLayoutSpec
stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:16.0
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStart
children:@[_photoImageNode, contentSpec]];
// 8
return [ASInsetLayoutSpec
insetLayoutSpecWithInsets:UIEdgeInsetsMake(8, 16, 8, 16)
child:avatarContentSpec];
}所有的 ASNode 都必须在这个方法中进行布局，这也是这一节重点要介绍的地方：
- 一个数组，我们放入了两个对象：一个标题标签，一个内容标签。这个后面会用到，因为我们打算将这两个标签放在一起，上下排列。
- 设置曲目数标签的文字补白，这样会在这个标签的文字四周补上一些边距，不至于让文字紧紧地被边框包裹在一起，因为默认的 Inset 值是 0。
- 一个相对布局，这个和 Android 中的相对布局是一样的。这个相对布局我们指定它的水平对齐方式为左对齐，垂直对齐方式为中对齐，在宽度上进行紧凑布局（相当于 Android 的 layout_width=”wrap_content”)，然后将曲目数标签放入布局。这样会导致这个标签居于这个布局中的左边垂直居中，同时标签宽度不会占满整行，而是内容有多长就多宽。
- 将这个对布局也放到前面的数组中，这样，三个标签就放在一块了，上下排列。
- 要将 3个标签放到一块，需要将 3 者（即前面的数组，我们已经将 3 者放到一个数组了）添加到一个 stack 布局中。stack 布局类似自动布局中的 UIStackView，专门作为其他节点的容器，并且可以方便地指定这些节点的排列方式。这里我们在构建 stack 布局时指定三者为垂直排列，行间距 8，主轴方向(y轴)顶对齐，交叉轴方向(x轴)占据行宽。
- 现在来布局图片的大小，一般来说图片大小是固定的，这里我们通过设置它的 style.preferredSize 来指定它的固定大小为 90*90。
- 创建另一个 stack 布局，将图片和另一个 stack 布局（即 3 个标签）放到一起，指定：让两者水平排列、水平间距 16、主轴方向左对齐，交叉轴方向顶对齐。
- 最后在 stack 布局的基础上补白。并返回补白后的 Inset 布局。
ASDK 有 4 中布局，这 4 种布局分别是：
- ASStackLayoutSpec: 允许你定义一个水平或垂直的子节点栈。它的 justifyContent 属性决定栈在相应方向上的子节点之间的间距。alignItems 属性决定了它们在另一个坐标轴上的间距。这种 layout specs 有点像 UIKit 的 UIStackView。
- ASOverlayLayoutSpec: 允许你拉伸一个元素横跨到另一个元素。被覆盖的对象必须要有一个固定的 content size，否则无法工作。
- ASRelativeLayoutSpec: 一种相对布局，允许将一个东西以相对位置放置在它的有效空间内。参考一下“9-切片图”的 9 个切片。你可以让一个东西放在这 9 个切片中的某个上。
- ASInsetLayoutSpec: 一个 inset 布局，允许你在一个已有的对象的基础上添加某些间距。你想在你的 cell 四周加上经典的 iOS 16 像素的边距吗？用这个就对了。
在这个例子中我们用到了 3 种。Overlay 布局不太常用，它类似于 css 中的 position : absolute 属性，允许将一个布局重叠到另一个布局上。
结束
好了，本文就此结束。本文偏向于 ASDK 的应用和实作，对 ASDK 的基础概念介绍得较少。如果你需要这方面的介绍，可以阅读这几篇文章：
扫一扫
3867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
