前言
Texture的基本使用单元是node. ASDisplayNode是一个UIView层之上的封装，就像UIView是对CALayer的封装一样。跟View不一样的是，node是线程安全（比如uiview的操作就不是线程安全的，在非UI线程无法操作UIView）的，就是说你在非主线程对node进行初始化以及配置它们的层级操作都是安全的。
今天的主题是布局，Texture拥有自己的一套成熟布局方案，虽然学习成本略高，但至少比盖原。而且AutoLayout写起来舒服，重点是性能远好于AutoLayout，Texture文档上也。指出了这套布局方案的的优点：
- 快速：与手动布局代码一样快，比自动布局更快
- 异步和并发：可以在后台线程上计算布局，以便不中断用户交互。
- 声明性：使用不可变数据结构显示布局。这使得布局代码更易于开发，文档，代码审查，测试，调试，配置文件和维护。
- 可缓存：布局结果是不可变数据结构，因为它们可以在后台预先计算并缓存以提高用户感知性能。
- 可扩展：易于在类之间共享代码。
章节
一、快速了解
| 基础元素 | 含义 | 基本概念 |
|---|---|---|
| Layout Specs | 布局规则 | LayoutSpecs包含并排列LayoutElements。这意味着您可以从Nodes和其他LayoutSpecs构成LayoutSpecs |
| Layout Elements | 布局元素 | ASDisplayNodes和ASLayoutSpecs都符合<ASLayoutElement>协议 |
ASLayoutElement Properties（布局元素属性）
| 属性 | 类型 | 描述 |
|---|---|---|
| .style.width | ASDimension | 设置元素的宽度。 会被minWidth和maxWidth覆盖。默认为ASDimensionAuto |
| .style.height | ASDimension | 设置元素的高度。 会被minHeight和maxHeight覆盖。默认为ASDimensionAuto。 |
| .style.minHeight | ASDimension | 设置元素的最大高度。 它防止height属性的已使用值变得大于为maxHeight指定的值。 maxHeight的值覆盖height，但minHeight覆盖maxHeight。默认为ASDimensionAuto |
| .style.maxHeight | ASDimension | 如果子元素的堆栈大小的总和大于最大大小，那么这个对象是否应该缩小呢？ |
| .style.minWidth | ASDimension | 设置元素的最小宽度。它防止width属性的使用值变得小于为minWidth指定的值。 minWidth的值覆盖maxWidth和width。默认为ASDimensionAuto |
| .style.maxWidth | ASDimension | 设置元素的最大宽度。 它防止width属性的使用值变得大于为maxWidth指定的值。 maxWidth的值覆盖width，但minWidth覆盖maxWidth。默认为ASDimensionAuto |
| .style.preferredSize | **CGSize ** | 提供布局元素的建议大小。 如果提供了可选的minSize或maxSize，且preferredSize超过这些，则将强制执行minSize或maxSize, 如果未提供此可选值，则布局元素的大小将默认为其提供的内在内容大小calculateSizeThatFits： |
| .style.minSize | **CGSize ** | ~ |
| .style.maxSize | **CGSize ** | ~ |
| .style.preferredLayoutSize | ASLayoutSize | ~ |
| .style.minLayoutSize | ASLayoutSize | ~ |
| .style.maxLayoutSize | ASLayoutSize | ~ |
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的常用布局子类，用于组成简单或复杂的布局
| 布局规则 | 说明 |
|---|---|
| ASInsetLayoutSpec | 插入布局 |
| ASOverlayLayoutSpec | 覆盖布局 |
| ASBackgroundLayoutSpec | 背景布局 |
| ASCenterLayoutSpec | 中心布局 |
| ASRatioLayoutSpec | 比例布局 |
| ASStackLayoutSpec | 堆叠布局 |
| ASAbsoluteLayoutSpec | 绝对布局 |
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的两个属性：
| 属性 | 说明 | 值 |
|---|---|---|
| centeringOptions | 确定中心位置 | None，X，Y，XY |
| sizingOptions | 确定中心占用空间 | Default，minimum X，minimum Y，minimum XY |
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属性：
| 属性 | 说明 | 值 |
|---|---|---|
| sizing | 大小 | Default / Size to Fit |
确定绝对规格将占用多少空间。
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个属性:
| 属性 | 说明 | 描述 |
|---|---|---|
| direction | 方向 | 指定堆叠方向,如果设置了horizontalAlignment和verticalAlignment,它们将被再次解决，导致justifyContent和alignItems被相应地更新。 |
| spacing | 间距 | 每个子元素之间的距离。 |
| horizontalAlignment | 水平对齐 | 指定子元素如何水平排列,取决于堆叠方向，设置对齐会导致justifyContent或alignItems被更新。未来方向更改后，对齐将保持有效。因此，优选那些性质。 |
| verticalAlignment | 竖直对齐 | 指定子元素如何垂直排列,取决于堆叠方向，设置对齐会导致justifyContent或alignItems被更新。未来方向更改后，对齐将保持有效。因此，优选那些性质。 |
| justifyContent | 对齐内容 | 每个子元素之间的距离。 |
| alignItems | 对齐Item | 子元素沿着横轴的方向。 |
| baselineRelativeArrangement | 基线相对布局 | 如果YES，则从顶视图的最后基线到底视图的顶部测量两个视图之间的垂直间距。 |
ASStackLayoutElement Properties（堆叠布局元素属性）
| 属性 | 类型 | 描述 |
|---|---|---|
| .style.spacingBefore | **CGFloat ** | 在堆叠方向上放置此对象之前的额外空间。 |
| .style.spacingAfter | **CGFloat ** | 在堆叠方向上放置此对象之后的额外空间。 |
| .style.flexGrow | **CGFloat ** | 如果子元素的堆叠大小的总和小于最小大小，那么这个对象是否增长？ |
| .style.flexShrink | **CGFloat ** | 如果子元素的堆叠大小的总和大于最大大小，那么这个对象是否缩小？ |
| .style.flexBasis | ASDimension | 使用flexGrow或flexShrink属性并分配剩余空间之前，在堆栈维度（水平或垂直）中指定此对象的初始大小。 |
| .style.alignSelf | **ASStackLayoutAlignSelf ** | 沿着横轴的对象的方向，覆盖alignItems。(ASStackLayoutAlignSelfAuto，ASStackLayoutAlignSelfStart， ASStackLayoutAlignSelfEnd， ASStackLayoutAlignSelfCenter， ASStackLayoutAlignSelfStretch) |
| .style.ascender | **CGFloat ** | 用于基线对准。从对象的顶部到其基线的距离。 |
| .style.descender | **CGFloat ** | 用于基线对准。从对象的底部部到其基线的距离 |
网友评论