前言

Texture的基本使用单元是node. ASDisplayNode是一个UIView层之上的封装，就像UIView是对CALayer的封装一样。跟View不一样的是，node是线程安全（比如uiview的操作就不是线程安全的，在非UI线程无法操作UIView）的，就是说你在非主线程对node进行初始化以及配置它们的层级操作都是安全的。

今天的主题是布局，Texture拥有自己的一套成熟布局方案，虽然学习成本略高，但至少比盖原。而且AutoLayout写起来舒服，重点是性能远好于AutoLayout，Texture文档上也。指出了这套布局方案的的优点：

• 快速：与手动布局代码一样快，比自动布局更快
• 异步和并发：可以在后台线程上计算布局，以便不中断用户交互。
• 声明性：使用不可变数据结构显示布局。这使得布局代码更易于开发，文档，代码审查，测试，调试，配置文件和维护。
• 可缓存：布局结果是不可变数据结构，因为它们可以在后台预先计算并缓存以提高用户感知性能。
• 可扩展：易于在类之间共享代码。

章节

一、快速了解

ASLayoutElement Properties（布局元素属性）

1、一些Node需要固定大小

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

2、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}

3、需要使用原生控件

let node = ASDisplayNode { () -> UIView in
    let view = SomeView()
    return view
}

二、Layout Specs（布局规则）

ASDisplayNode 在初始化之后会检查是否有子视图，如果有就会调用以下方法进行布局，所以对视图进行布局需要重写这个方法（该方法返回的必须是 ASLayoutSpec）

func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec 

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

1. ASInsetLayoutSpec(插入布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec
{
  let insets = UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0)
  let headerWithInset = ASInsetLayoutSpec(insets: insets, child: textNode)
  return  headerWithInset
}

ASInsetLayoutSpec.png

2. ASOverlayLayoutSpec(覆盖布局)

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

override func layoutSpecThatFits（_ constrainedSize：ASSizeRange） - > ASLayoutSpec
{
  let backgroundNode = ASDisplayNodeWithBackgroundColor（UIColor.blue）
  let foregroundNode = ASDisplayNodeWithBackgroundColor（UIColor.red）
  return ASOverlayLayoutSpec（child：backgroundNode，overlay：foregroundNode）
}

3. ASBackgroundLayoutSpec(背景布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec
{
  let backgroundNode = ASDisplayNodeWithBackgroundColor(UIColor.red)
  let foregroundNode = ASDisplayNodeWithBackgroundColor(UIColor.blue)

  return ASBackgroundLayoutSpec(child: foregroundNode, background: backgroundNode)
}

4. ASCenterLayoutSpec(中心布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec
{
  let subnode = ASDisplayNodeWithBackgroundColor(UIColor.green, CGSize(width: 60.0, height: 100.0))
  let centerSpec = ASCenterLayoutSpec(centeringOptions: .XY, sizingOptions: [], child: subnode)
  return centerSpec
}

ASCenterLayoutSpec的两个属性：

5. ASRatioLayoutSpec(比例布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec
{
  // 一半比例
  let subnode = ASDisplayNodeWithBackgroundColor(UIColor.green, CGSize(width: 100, height: 100.0))
  let ratioSpec = ASRatioLayoutSpec(ratio: 0.5, child: subnode)
  return ratioSpec
}

6. ASAbsoluteLayoutSpec(绝对布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec
{
  let maxConstrainedSize = constrainedSize.max

  guitarVideoNode.style.layoutPosition = CGPoint.zero
  guitarVideoNode.style.preferredSize = CGSize(width: maxConstrainedSize.width, height: maxConstrainedSize.height / 3.0)

  nicCageVideoNode.style.layoutPosition = CGPoint(x: maxConstrainedSize.width / 2.0, y: maxConstrainedSize.height / 3.0)
  nicCageVideoNode.style.preferredSize = CGSize(width: maxConstrainedSize.width / 2.0, height: maxConstrainedSize.height / 3.0)

  simonVideoNode.style.layoutPosition = CGPoint(x: 0.0, y: maxConstrainedSize.height - (maxConstrainedSize.height / 3.0))
  simonVideoNode.style.preferredSize = CGSize(width: maxConstrainedSize.width / 2.0, height: maxConstrainedSize.height / 3.0)

  hlsVideoNode.style.layoutPosition = CGPoint(x: 0.0, y: maxConstrainedSize.height / 3.0)
  hlsVideoNode.style.preferredSize = CGSize(width: maxConstrainedSize.width / 2.0, height: maxConstrainedSize.height / 3.0)

  return ASAbsoluteLayoutSpec(children: [guitarVideoNode, nicCageVideoNode, simonVideoNode, hlsVideoNode])
}

ASAbsoluteLayoutSpec属性：

确定绝对规格将占用多少空间。

7. ASStackLayoutSpec(堆叠布局)

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

override func layoutSpecThatFits(_ constrainedSize: ASSizeRange) -> ASLayoutSpec 
{
  let mainStack = ASStackLayoutSpec(direction: .horizontal,
                                    spacing: 6.0,
                                    justifyContent: .start,
                                    alignItems: .center,
                                    children: [titleNode, subtitleNode])

  mainStack.style.minWidth = ASDimensionMakeWithPoints(60.0)
  mainStack.style.maxHeight = ASDimensionMakeWithPoints(40.0)

  return mainStack
}

ASStackLayoutSpec除了ASLayoutElement还有7个属性:

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