秉承拿来主义，在参考了多篇文档的过程中，摘录一些作为记录。如有侵权，联系立删。
容器节点
| ASDK | UIKit |
|---|---|
| ASViewController | UIViewController |
| ASTableNode | UITableView |
| ASCollectionNode | UICollectionView |
| ASPagerNode | UICollectionView |
- ASViewController. UIViewController 类型的容器，管理子节点
- ASCollectionNode. UICollectionView 类型的容器，管理使用ASCellNode
- ASTableNode. UITableView 类型的容器，管理使用ASCellNode
- ASPagerNode. 一种特殊的ASCollectionNode 可以当做 UIPageViewController类型
控件
| ASDK | UIKit |
|---|---|
| ASDisplayNode | UIView |
| ASCellNode | UITableViewCell/UICollectionViewCell |
| ASTextNode | UILabel |
| ASImageNode | UIImageView |
| ASNetworkImageNode | UIImageView |
| ASVideoNode | AVPlayerLayer |
| ASControlNode | UIControl |
| ASScrollNode | UIScrollView |
| ASControlNode | UIControl |
| ASEditableTextNode | UITextView |
| ASMultiplexImageNode | UIImageView |
子父类关系：
- ASDisplayNode
- ASCellNode
- ASTextCellNode
- ASCollectionNode
- ASPagerNode
- ASControlNode
- ASButtonNode
- ASImageNode
- ASMapNode
- ASMultiplexImageNode
- ASNetworkImageNode
- ASVideoNode
- ASTextNode
- ASEditableTextNode
- ASScrollNode
- ASTableNode
- ASVideoPlayerNode
- ASCellNode
ASDisplayNode 作为最基本的节点
ASDisplayNode是最主要的UIView和CALayer的抽象对象，他初始化的时候拥有一个UIView，同时UIView在初始化的时候拥有一个CALayer
ASDisplayNode *node = [[ASDisplayNode alloc] init];
node.backgroundColor = [UIColor orangeColor];
node.bounds = CGRectMake(0, 0, 100, 100);
NSLog(@"Underlying view: %@", node.view);
ASDK布局都是基于 ASDK 组件的，所以当遇到要使用原生控件时，通过用 block 的方式包装一个原生组件再合适不过了，例如:
可以把一个UIView子类包装成一个ASDisplayNode子类
ASDisplayNode *node = [ASDisplayNode alloc] initWithViewBlock:^{
SomeView *view = [[SomeView alloc] init];
return view;
}];
Layout
AsyncDisplayKit的排版引擎是非常强大并且独特的，基于CSS FlexBox模型。
支持如下布局规则
ASWrapperLayoutSpec 填充布局规则
ASInsetLayoutSpec 插入布局规则
ASOverlayLayoutSpec 覆盖布局规则
ASBackgroundLayoutSpec 背景布局规则
ASCenterLayoutSpec 中心布局规则
ASRatioLayoutSpec 比例布局规则
ASRelativeLayoutSpec 相对布局规则
ASAbsoluteLayoutSpec 绝对布局规则
，下面是所有的子类及其关系：
- ASLayoutSpec
- ASAbsoluteLayoutSpec // 绝对布局
- ASBackgroundLayoutSpec // 背景布局
- ASInsetLayoutSpec // 边距布局
- ASOverlayLayoutSpec // 覆盖布局
- ASRatioLayoutSpec // 比例布局
- ASRelativeLayoutSpec // 顶点布局
- ASCenterLayoutSpec // 居中布局
- ASStackLayoutSpec // 盒子布局
- ASWrapperLayoutSpec // 填充布局
下面这个方法是布局方法，所以对视图进行布局需要重写这个方法。
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
ASStackLayoutSpec介绍
该说说 stack layout spec 了。你可以把它看成是一种和 UIStackView 类似的 layout spec，但它能够自动向后兼容，这确实太爽了。
Stacks 可以定义要么横向要么纵向，和其它 layout spec 一样，它可以把其它节点或 layout spec 作为子对象。
ASStackLayoutSpec *goodsImageContentStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
spacing:10
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStretch
children:@[typeTagAbsolute, contentStack]];
ASStackLayoutSpec
可以说这是最常用的类，而且相对于其他类来说在功能上是最接近于 AutoLayout
的。之所以称之为盒子布局是因为它和 CSS 中 Flexbox
很相似，不清楚 Flexbox
的可以先看下阮一峰的这篇博客。
先看一个例子：
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
self.childNodeA.style.preferredSize = CGSizeMake(100, 100);
self.childNodeB.style.preferredSize = CGSizeMake(200, 200);
ASStackLayoutSpec *stackLayout = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
spacing:12
justifyContent:ASStackLayoutJustifyContentStart
alignItems:ASStackLayoutAlignItemsStart
children:@[self.childNodeA, self.childNodeB]];
return stackLayout;
}
简单的说明下各个参数的作用：
- direction
：主轴的方向，有两个可选值：
纵向：
ASStackLayoutDirectionVertical横向：
ASStackLayoutDirectionHorizontal
spacing
: 主轴上视图排列的间距，比如有四个视图，那么它们之间的存在三个间距值都应该是spacingjustifyContent
: 主轴上的排列方式，有五个可选值：
-
ASStackLayoutJustifyContentStart从前往后排列 -
ASStackLayoutJustifyContentCenter居中排列 -
ASStackLayoutJustifyContentEnd从后往前排列 -
ASStackLayoutJustifyContentSpaceBetween间隔排列，两端无间隔 -
ASStackLayoutJustifyContentSpaceAround间隔排列，两端有间隔
- alignItems
: 交叉轴上的排列方式，有五个可选值：
ASStackLayoutAlignItemsStart从前往后排列ASStackLayoutAlignItemsEnd从后往前排列ASStackLayoutAlignItemsCenter居中排列ASStackLayoutAlignItemsStretch拉伸排列ASStackLayoutAlignItemsBaselineFirst以第一个文字元素基线排列（主轴是横向才可用）ASStackLayoutAlignItemsBaselineLast以最后一个文字元素基线排列（主轴是横向才可用）
- children
: 包含的视图。数组内元素顺序同样代表着布局时排列的顺序，所以需要注意
主轴的方向设置尤为重要，如果主轴设置的是 ASStackLayoutDirectionVertical
, 那么 justifyContent
各个参数的意义就是：
ASStackLayoutJustifyContentStart从上往下排列ASStackLayoutJustifyContentCenter居中排列ASStackLayoutJustifyContentEnd从下往上排列ASStackLayoutJustifyContentSpaceBetween间隔排列，两端无间隔ASStackLayoutJustifyContentSpaceAround间隔排列，两端有间隔
alignItems
就是：
ASStackLayoutAlignItemsStart从左往右排列ASStackLayoutAlignItemsEnd从右往左排列ASStackLayoutAlignItemsCenter居中排列ASStackLayoutAlignItemsStretch拉伸排列ASStackLayoutAlignItemsBaselineFirst无效ASStackLayoutAlignItemsBaselineLast无效
参考：
新大陆：AsyncDisplayKit
AsyncDisplayKit官方文档个人翻译
AsyncDisplaykit2.0使用「复杂界面流畅性」
AsyncDisplayKit官方文档
