本文来自尚妆iOS团队嘉文
发表于尚妆github博客，欢迎订阅！

原文链接 http://texturegroup.org/docs/getting-started.html

AsyncDisplaykit2.0

前言

AsyncDisplayKit是一个建立在UIKit基础上的iOS框架，让即使是最复杂的用户界面光滑和响应。它最初建成Facebook的Paper应用，并与流行的pop基于物理的动画相辅相成——它与UIKit动力学和传统应用程序的设计同样强大。最近，它是用于Pinterest应用的重写。

AsyncDisplayKit

随着框架的发展，添加了许多功能，在现代iOS应用程序中通过消除常见的样板风格和结构可以节省开发人员大量的时间。如果你曾经处理过Cell重用的Bug，试图高性能预加载数据页面或滚动风格界面，甚至只是试图让你的应用从下降太多的帧可以受益于整合ASDK。

官方地址

目录

• Quickstart（快速学习）
• Layout Examples（布局示例）
• Layout Specs（布局规则）
• ASInsetLayoutSpec（插入布局规则）
• ASOverlayLayoutSpec（覆盖布局规则）
• ASBackgroundLayoutSpec（背景布局规则）
• ASCenterLayoutSpec（中心布局规则）
• ASRatioLayoutSpec（比例布局规则）
• ASRelativeLayoutSpec（相对布局规则）
• ASStackLayoutSpec（堆叠布局规则）
• ASAbsoluteLayoutSpec（绝对布局约束)
• ASLayoutSpec（布局规则）
• Layout Element Properties（布局元素属性）
• ASStackLayoutElement Properties（堆叠布局元素属性）
• ASAbsoluteLayoutElement Properties（绝对布局元素属性）
• ASLayoutElement Properties（布局元素属性）

章节

一、Quickstart（快速学习）

1、LayoutSpecs（布局规则）

LayoutSpecs是“layout specification”的缩写，没有物理存在。
相反，LayoutSpecs充当其他LayoutElements的容器，来理解这些子LayoutElements如何相互关联。
AsyncDisplayKit提供了ASLayoutSpec的几个子类。
从插入单个简单布局规则到更多更复杂的布局规则，变化堆放排列配置。

2、LayoutElements（布局元素）

LayoutSpecs包含并排列LayoutElements。
所有ASDisplayNodes和ASLayoutSpecs都符合<ASLayoutElement>协议。
这意味着您可以从Nodes和其他LayoutSpecs构成LayoutSpecs。
ASLayoutElement协议有几个属性，可用于创建非常复杂的LayoutSpecs。
此外LayoutSpecs也具有自己的一组属性，可用于调整LayoutElements的排列。

3、组合LayoutSpecs和LayoutElements，创建复杂的UI

可以看到如何将ASTextNode（黄色高亮），ASVideoNode（顶部图像）和ASStackLayoutSpec（“堆放布局规则”）组合来创建复杂布局。

LayoutSpecs和LayoutElements

使用ASCenterLayoutSpec（“中心布局规则”）和ASOverlayLayoutSpec（“覆盖布局规则”），来放置顶部ASVideoNode（顶部图像）的播放按钮。

LayoutSpecs和LayoutElements

4、一些Node需要固定大小

#一些元素具有一个”固有大小“，基于他们可用内容。
例如，ASTextNode可以根据其属性字符串计算其大小，其他具有固有大小的Node包括：
ASImageNode
ASTextNode
ASButtonNode
ASTextNode
#所有其他Node在外部资源加载完成之前没有或者缺乏固有大小。
例如，在从URL下载图像之前，ASNetworkImageNode不知道它的大小。这些种类包括:
ASVideoNode
ASVideoPlayerNode
ASNetworkImageNode
ASEditableTextNode
#注意:
#缺少初始固有大小的这些Node必须设置它们的初始大小，使用ASRatioLayoutSpec（“比例布局规则”），ASAbsoluteLayoutSpec（“绝对布局规则”）或者对象的size属性。

5、Layout调试

#在任何ASDisplayNode或ASLayoutSpec上调用-asciiArtString，会返回对象及其子对象的字符图。
(可选）如果在任何Node或layoutSpec上设置.debugName，那么也将包含在字符图。
例如:
  -----------------------ASStackLayoutSpec----------------------
|  -----ASStackLayoutSpec-----  -----ASStackLayoutSpec-----  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  |       ASImageNode       |  |       ASImageNode       |  |
|  ---------------------------  ---------------------------  |
--------------------------------------------------------------
#可以在任何ASLayoutElement(node或layoutSpec)上打印对象样式，调整大小属性时极其方便。
例如:
(lldb) po _photoImageNode.style
Layout Size = min {414pt, 414pt} <= preferred {20%, 50%} <= max {414pt, 414pt}

二、Layout Examples（布局示例）

1、Simple Header with Left and Right Justified Text（简单标题左右对齐）

layout-examples-1

示例工程

创建布局：

布局的组成（layout specs + nodes），如图:

layout-examples-2.png

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  // 当用户名和位置信息文本太长时,收缩堆放视图来适应屏幕,而不是将所有内容向右堆放
  ASStackLayoutSpec *nameLocationStack = [ASStackLayoutSpec verticalStackLayoutSpec];
  nameLocationStack.style.flexShrink = 1.0;
  nameLocationStack.style.flexGrow = 1.0;
  
  //如果从服务器获取位置信息,并检查位置信息是否可用
  if (_postLocationNode.attributedText) {
    nameLocationStack.children = @[_usernameNode, _postLocationNode];
  } else {
    nameLocationStack.children = @[_usernameNode];
  }
  
  //水平堆放
  ASStackLayoutSpec *headerStackSpec = [ASStackLayoutSpec   stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal
                     spacing:40     
              justifyContent:ASStackLayoutJustifyContentStart
                  alignItems:ASStackLayoutAlignItemsCenter
                    children:@[nameLocationStack, _postTimeNode]];
  
  //插入堆放
  return [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(0, 10, 0, 10)    
                                                child:headerStackSpec];
  
}

将示例项目从纵向旋转到横向，看看间隔体是如何增长和收缩的。

2、Photo with Inset Text Overlay（图片上覆盖文本）

layout-examples-3.png

创建布局：

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  _photoNode.style.preferredSize = CGSizeMake(USER_IMAGE_HEIGHT*2, USER_IMAGE_HEIGHT*2);
  
  // INIFINITY(插入无边界)
  UIEdgeInsets insets = UIEdgeInsetsMake(INFINITY, 12, 12, 12);
  ASInsetLayoutSpec *textInsetSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets child:_titleNode];
  
  return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:_photoNode 
                                                 overlay:textInsetSpec];
  
}

3、Photo with Outset Icon Overlay（图片上覆盖和图标）

layout-examples-4.png

创建布局：

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  
  _iconNode.style.preferredSize = CGSizeMake(40, 40);
  _iconNode.style.layoutPosition = CGPointMake(150, 0);
  
  _photoNode.style.preferredSize = CGSizeMake(150, 150);
  _photoNode.style.layoutPosition = CGPointMake(40 / 2.0, 40 / 2.0);
  
  return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithSizing:ASAbsoluteLayoutSpecSizingSizeToFit
                                                   children:@[_photoNode, _iconNode]];
  
}  

4、Simple Inset Text Cell（简单插入文本单元格）

layout-examples-5

创建布局：

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

    UIEdgeInsets insets = UIEdgeInsetsMake(0, 12, 4, 4);
    ASInsetLayoutSpec *inset = [ASInsetLayoutSpec insetLayoutSpecWithInsets:insets
                                                                      child:_titleNode];

    return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringY                                                  
    sizingOptions:ASCenterLayoutSpecSizingOptionMinimumX 
            child:inset];
            
}

5、Top and Bottom Separator Lines（顶部和底部分隔线）

layout-examples-6.png

创建布局：

布局的组成（layout specs + nodes），如图：

layout-examples-7.png

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  _topSeparator.style.flexGrow = 1.0;
  _bottomSeparator.style.flexGrow = 1.0;

  ASInsetLayoutSpec *insetContentSpec = [ASInsetLayoutSpec insetLayoutSpecWithInsets:UIEdgeInsetsMake(20, 20, 20, 20) child:_textNode];

  return [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionVertical
                                                 spacing:0
                                          justifyContent:ASStackLayoutJustifyContentCenter
                                              alignItems:ASStackLayoutAlignItemsStretch
                                                children:@[_topSeparator, insetContentSpec, _bottomSeparator]];
}
  

三、Layout Specs（布局规则）

1、以下ASLayoutSpec子类，用于组成简单或复杂的布局

你可以子类化ASLayoutSpec，自定义ASLayoutSpec

四、ASInsetLayoutSpec（插入布局规则）

在布局过程中，ASInsetLayoutSpec通过constrainedSize.max传递插入减掉后的CGSize给子项，一旦子项确定它的最终尺寸，插入规则将其最终尺寸加上其插入边距向上传递，由于插图布局规则的大小基于其子项的大小，所以子项必须具有固有大小或明确设置其大小。

ASInsetLayoutSpec-diagram-1.png

1、如果在UIEdgeInsets中设置了INFINITY作为值，插入规则只使用子项固有大小。

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize
{
  ...
  UIEdgeInsets *insets = UIEdgeInsetsMake(10, 10, 10, 10);
  ASInsetLayoutSpec *headerWithInset = insetLayoutSpecWithInsets:insets child:textNode];
  ...
}

五、ASOverlayLayoutSpec（覆盖布局规则）

ASOverlayLayoutSpec布局一个组件(红色)，作为覆盖伸展到另个组件(蓝色)之前覆盖布局的大小，是根据子项的大小计算得出的。下图中，子项是蓝色层，然后子项的大小作为constrainedSize传递给覆盖布局元素（红色层），子项（蓝色层）必须具有固有大小或在其上设置的大小。

ASOverlayLayouSpec-diagram-2.png

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor blueColor]);
  ASDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]
  return [ASOverlayLayoutSpec overlayLayoutSpecWithChild:backgroundNode overlay:foregroundNode]];
}

六、ASBackgroundLayoutSpec（背景布局规则）

ASBackgroundLayoutSpec布局一个组件(红色)，作为背景伸展到另一个组件(蓝色)之后背景布局的大小，是根据子项的大小计算得出的。下图中，子项是蓝色层，然后，子项的大小作为constrainedSize传递给背景布局元素（红色层），子项（蓝色层）必须具有固有大小或在其上设置的大小。

ASBackgroundLayoutSpec-diagram-3.png

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]);
  ASDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor blueColor]);
  return [ASBackgroundLayoutSpec backgroundLayoutSpecWithChild:foregroundNode background:backgroundNode]];
}

七、ASCenterLayoutSpec（中心布局规则）

ASCenterLayoutSpec将其子项居中在其最大值中constrainedSize。
如果中心规格的宽度或高度不受约束，它会缩小到子项的大小。

ASCenterLayoutSpec的两个属性：

ASCenterLayoutSpec-diagram-4.png

代码：

//Objective-C
- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ASStaticSizeDisplayNode *subnode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(70, 100));
  return [ASCenterLayoutSpec centerLayoutSpecWithCenteringOptions:ASCenterLayoutSpecCenteringXY
                                             sizingOptions:ASRelativeLayoutSpecSizingOptionDefault
                                                     child:subnode]
}

八、ASRatioLayoutSpec（比例布局规则）

ASRatioLayoutSpec布局缩放固定宽高比，此规则必须具有作为constrainedSize传递给它的宽度或高度，因为它使用此值来缩放自身。
使用比例布局为ASNetworkImageNode或ASVideoNode提供固有大小是非常常见的，因为两者在服务器返回内容之前都没有内在大小。

ASRatioLayoutSpec-diagram-5.png

代码：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  //一半比例
  ASStaticSizeDisplayNode *subnode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(100, 100));
  return [ASRatioLayoutSpec ratioLayoutSpecWithRatio:0.5 child:subnode];
}

九、ASRelativeLayoutSpec（相对布局规则）

根据垂直和水平位置说明范围内布局组件,子项可以被定位在4个角中的任何一个，或者4个边缘中的任何一个，以及中心。

代码：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ...
  ASDisplayNode *backgroundNode = ASDisplayNodeWithBackgroundColor([UIColor redColor]);
  ASStaticSizeDisplayNode *foregroundNode = ASDisplayNodeWithBackgroundColor([UIColor greenColor], CGSizeMake(70, 100));

  ASRelativeLayoutSpec *relativeSpec = [ASRelativeLayoutSpec relativePositionLayoutSpecWithHorizontalPosition:ASRelativeLayoutSpecPositionStart
                                verticalPosition:ASRelativeLayoutSpecPositionStart
                                    sizingOption:ASRelativeLayoutSpecSizingOptionDefault                                                                       
                                           child:foregroundNode]

  ASBackgroundLayoutSpec *backgroundSpec = [ASBackgroundLayoutSpecbackgroundLayoutSpecWithChild:relativeSpec background:backgroundNode];
  ...
}

十、ASStackLayoutSpec（堆叠布局规则）

在ASDK中的所有layoutSpecs中，ASStackLayoutSpec是非常强大的，ASStackLayoutSpec使用flexbox算法来确定其子节点的位置和大小，Flexbox旨在在不同的屏幕尺寸上提供一致的布局，在堆叠布局中，以垂直或水平堆叠对齐item。堆叠布局可以是另一个堆叠布局的子布局，这使得可以使用堆叠布局规则创建几乎任何布局。

ASStackLayoutSpec除了ASLayoutElement还有7个属性:

代码：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  ASStackLayoutSpec *mainStack = [ASStackLayoutSpec stackLayoutSpecWithDirection:ASStackLayoutDirectionHorizontal                                                                                   spacing:6.0
        justifyContent:ASStackLayoutJustifyContentStart
     alignItems:ASStackLayoutAlignItemsCenter
                  children:@[_iconNode, _countNode]];

  //设置一些大小约束
  mainStack.minWidth = ASDimensionMakeWithPoints(60.0);
  mainStack.maxHeight = ASDimensionMakeWithPoints(40.0);

  return mainStack;
}

说明:

Flexbox在AsyncDisplayKit中的工作方式与在Web上的CSS中的工作方式相同，有一些例外。
默认值不同，没有flex参数，flexGrow和flexShrink只支持一个布尔值。

十一、ASAbsoluteLayoutSpec（绝对布局约束）

在ASAbsoluteLayoutSpec中，可以通过设置其layoutPosition属性来指定其子元素的确切位置（x / y坐标），绝对布局比其他类型的布局更不灵活和难以维护。

ASAbsoluteLayoutSpec属性：

确定绝对规格将占用多少空间。
注意：Size to Fit选项将复制旧的ASStaticLayoutSpec行为。

代码：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{

  CGSize maxConstrainedSize = constrainedSize.max;

  //在静态布局中布局所有Node
  guitarVideoNode.layoutPosition = CGPointMake(0, 0);
  guitarVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width, maxConstrainedSize.height / 3.0));

  nicCageVideoNode.layoutPosition = CGPointMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0);
  nicCageVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0));

  simonVideoNode.layoutPosition = CGPointMake(0.0, maxConstrainedSize.height - (maxConstrainedSize.height / 3.0));
  simonVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width/2, maxConstrainedSize.height / 3.0));

  hlsVideoNode.layoutPosition = CGPointMake(0.0, maxConstrainedSize.height / 3.0);
  hlsVideoNode.size = ASSizeMakeFromCGSize(CGSizeMake(maxConstrainedSize.width / 2.0, maxConstrainedSize.height / 3.0));

  return [ASAbsoluteLayoutSpec absoluteLayoutSpecWithChildren:@[guitarVideoNode, nicCageVideoNode, simonVideoNode, hlsVideoNode]];
}

十二、ASLayoutSpec（布局规则）

ASLayoutSpec是所有布局规则都被子类化的父类，它的主要工作是处理和管理所有的子类，但它也可以用于创建自定义布局规格，只有超级高级应该希望/需要创建ASLayoutSpec的自定义子类。相反，尝试使用提供的布局规则，并将它们组合在一起以创建更高级的布局。

ASLayoutSpec的另一个用途是充当ASStackLayoutSpec中的其他子元素，在使用.flexGrow和/或.flexShrink时。

代码：

- (ASLayoutSpec *)layoutSpecThatFits:(ASSizeRange)constrainedSize{
  ...
  // ASLayoutSpec作为间隔
  let spacer = ASLayoutSpec()
  spacer.flexGrow = true

  stack.children = [imageNode, spacer, textNode]
  ...
}

十三、Layout Element Properties（布局元素属性）

十四、ASStackLayoutElement Properties（堆叠布局元素属性）

十五、ASAbsoluteLayoutElement Properties（绝对布局元素属性）

十六、ASLayoutElement Properties（布局元素属性）

Demo

Demo地址

AsyncDisplaykit2.0使用