Texture (二)

内容都是个人的知识点整理和笔记。

Texture布局

Texture的Layout API相较于复杂且增加开销的Auto Layout其具有以下的有点：

• 快捷：比Auto Layout 布局快速
• 异步并发：可以在后台线程中对布局进行计算从而不影响交互
• 规范：使用不可变数据结构声明布局
• 可缓存
• 可扩展

熟悉使用Flexbox布局（比如RN、Flutter）的人会从Texture发现许多相似的地方。

Flexbox旨在为不同的屏幕尺寸提供一致的布局。在堆栈布局中，您可以在垂直或水平堆栈中对齐项目。堆栈布局可以是另一个堆栈布局的子代，这使得使用堆栈布局规范创建几乎任何布局成为可能。

Texture布局主要围绕这两个中心概念：

• Layout Elements
• Layout Specs

Layout Elements

布局规范（ASLayoutSpec）由布局元素构成并对他们进行排列，并且所有的节点（ASDisplayNode）和布局规范都遵循了ASLayoutElement的协议，这意味着我们可以通过节点和其他作为子元素的规范来组合实现复杂的布局规范。

Layout Specs

布局规范可以作为一个盛放布局元素的容器通过理解布局元素的布局来使他们可以相互关联。
Texture提供了几个ASLayoutSpec的子类：

ASWrapperLayoutSpec

作为ASLayoutSpec一个简单的子类，它可以包裹ASLayoutElement并根据布局元素上设置的大小计算子项的布局。

ASStackLayoutSpec

作为Texture最有用最强大的布局规范，ASStackLayoutSpec使用flexbox算法确定其子项的位置和大小。
ASStackLayoutSpec除了具有布局元素所具有的属性外，还额外提供了7个属性：

• direction：指定子元素的堆叠方法，既设定主轴的方向
• spacing：所有子元素之间的间距
• horizontalAlignment：指定子元素在水平方向上的对齐方式
• verticalAlignment：指定子元素在垂直方向上的对齐方式
• justifyContent：指定子元素沿着主轴的排列方式
• alignItems：指定子元素沿着次轴的排列方式
• flexWrap：子元素是否堆叠为多行

• alignContent：当子元素堆叠为多行时，多行的对齐方式

  
  
  justifyContent.png

ASInsetLayoutSpec

ASInsetLayoutSpec会在减去上左下右的插入间距后将约束后的最大Size传递给其子元素。一旦子元素确定了它的最终尺寸，ASInsetLayoutSpec就会将其尺寸加上插入边距作为最终尺寸。因此子元素必须具有内部大小或明确设置其大小。

ASInsetLayoutSpec

我们可以使用INFINITY作为插入间距中的值来保持子元素原有的尺寸。

ASOverlayLayoutSpec

在子元素上拉伸覆盖另一个元素。叠加元素的大小会根据子元素进行计算。

ASBackgroundLayoutSpec

与ASOverlayLayoutSpec相反，在子元素后拉伸垫底另一个元素。垫底元素的大小会根据子元素进行计算。

ASCenterLayoutSpec

该规范会根据规范的最大约束大小将其子元素置于居中位置。

ASCenterLayoutSpec

ASRatioLayoutSpec

ASRatioLayoutSpec以固定的宽高比进行缩放的布局规范。此规范必须具有作constrainedSize为它传递宽度或高度。

ASRatioLayoutSpec

ASRelativeLayoutSpec

根据垂直和水平位置说明符布置组件并将其放置在布局边界内。

ASAbsoluteLayoutSpec

字面上的意思，绝对布局，在iOS开发上都熟。

ASCornerLayoutSpec

ASCornerLayoutSpec是一种用于快速角元素布局的规范。通过使用声明性代码表达式而不是手动坐标计算的方法在角落中定位元素。

ASCornerLayoutSpec

在了解到Texture的布局后我们下面将会开始通过组合布局规范与布局元素来构造复杂的页面。

参考资料

Texture - Layout
AsyncDisplayKit系列之ASLayoutSpec布局