AsyncDisplayKit 学习记录

秉承拿来主义，在参考了多篇文档的过程中，摘录一些作为记录。如有侵权，联系立删。

容器节点

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

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 填充布局规则

ASStackLayoutSpec 堆叠布局规则

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;
}

简单的说明下各个参数的作用：

1. direction
   ：主轴的方向，有两个可选值：

• 纵向：ASStackLayoutDirectionVertical

• 横向：ASStackLayoutDirectionHorizontal

2. spacing
   : 主轴上视图排列的间距，比如有四个视图，那么它们之间的存在三个间距值都应该是spacing

3. justifyContent
   : 主轴上的排列方式，有五个可选值：

• ASStackLayoutJustifyContentStart 从前往后排列
• ASStackLayoutJustifyContentCenter 居中排列
• ASStackLayoutJustifyContentEnd 从后往前排列
• ASStackLayoutJustifyContentSpaceBetween间隔排列，两端无间隔
• ASStackLayoutJustifyContentSpaceAround 间隔排列，两端有间隔

4. alignItems
   : 交叉轴上的排列方式，有五个可选值：

• ASStackLayoutAlignItemsStart 从前往后排列

• ASStackLayoutAlignItemsEnd 从后往前排列

• ASStackLayoutAlignItemsCenter 居中排列

• ASStackLayoutAlignItemsStretch 拉伸排列

• ASStackLayoutAlignItemsBaselineFirst 以第一个文字元素基线排列（主轴是横向才可用）

• ASStackLayoutAlignItemsBaselineLast 以最后一个文字元素基线排列（主轴是横向才可用）

5. children
   : 包含的视图。数组内元素顺序同样代表着布局时排列的顺序，所以需要注意

主轴的方向设置尤为重要，如果主轴设置的是 ASStackLayoutDirectionVertical
, 那么 justifyContent
各个参数的意义就是：

• ASStackLayoutJustifyContentStart 从上往下排列

• ASStackLayoutJustifyContentCenter 居中排列

• ASStackLayoutJustifyContentEnd 从下往上排列

• ASStackLayoutJustifyContentSpaceBetween 间隔排列，两端无间隔

• ASStackLayoutJustifyContentSpaceAround 间隔排列，两端有间隔

alignItems
就是：

• ASStackLayoutAlignItemsStart 从左往右排列

• ASStackLayoutAlignItemsEnd 从右往左排列

• ASStackLayoutAlignItemsCenter 居中排列

• ASStackLayoutAlignItemsStretch 拉伸排列

• ASStackLayoutAlignItemsBaselineFirst 无效

• ASStackLayoutAlignItemsBaselineLast 无效

参考：
新大陆：AsyncDisplayKit
AsyncDisplayKit官方文档个人翻译
AsyncDisplaykit2.0使用「复杂界面流畅性」
AsyncDisplayKit官方文档